2012-01-02 22 views
88

Próbuję umieścić google.com w elemencie iframe na mojej stronie, działa to z wieloma innymi stronami internetowymi, w tym z Yahoo. Ale nie działa z Google, ponieważ pokazuje tylko puste ramki iframe. Dlaczego nie renderuje? Czy są jakieś sztuczki, żeby to zrobić?Jak wyświetlić stronę google.com w elemencie iframe?

Próbowałem go w zwykły sposób, aby pokazać swoją stronę WWW w iframe tak:

<iframe name="I1" id="if1" width="100%" 
height="254" style="visibility:visible" 
src="http://www.google.com"></iframe> 

strona google.com nie czyni w iframe, to po prostu puste. Co się dzieje?

+0

Dlaczego trzeba pokazać Google w iframe? –

+0

Nie cytuj mnie, ale może google używa czegoś takiego jak "window.property" lub coś takiego, że w ramce IFrame złamie się część ekranu? – annonymously

+0

jeśli chcesz google pasek wyszukiwania, zobacz ten link: http: //www.google.com/webelements/#!/Custom-search – mgraph

Odpowiedz

90

Powodem tego jest to, że Google jest wysłanie "X-FRAME-opcje: SAMEORIGIN" nagłówek odpowiedzi. Ta opcja uniemożliwia przeglądarce wyświetlanie elementów iFrame, które nie są hostowane w tej samej domenie, co strona nadrzędna.

Patrz: Mozilla Developer Network - The X-Frame-Options response header

+10

Myślę, że to całkiem bezużyteczne. Jeśli ktoś może wymyślić powód, by skorzystać z tej funkcji, oprócz bycia tylko wrednym, możesz mi powiedzieć. – annonymously

+0

@Nononimowo nie powoduje żadnych problemów, gdy otrzymasz pozwolenie od kogoś na umieszczenie ich treści na twoich, po prostu każ im zmienić nagłówek, który wysyłasz w tym samym czasie. –

+0

@ JonHanna nie kontaktuje się z niczym w Google. – albert

25

nie jest to niemożliwe.
Skorzystaj z odwrotnego serwera proxy, aby obsłużyć problem z różnym początkiem. Używałem Nginx z proxy_pass, aby zmienić adres URL strony. możesz spróbować.

Innym sposobem jest napisać prostą stronę proxy działa na serwerze przez siebie, po prostu zażądać od Google i wysyła wynik do klienta.

+8

Google zablokował moje proste próby zawinięcia standardowego adresu URL wyszukiwania. :(W końcu użyłem "Google Custom", który wysyła różne opcje X-Frame. Http://www.google.com/custom?q=test&btnG=Search –

+4

Czy istnieje samouczek, jak rozwiązać ten problem z Nginx? – Black

1

To nie jest idealne, ale można użyć serwera proxy i działa dobrze. Na przykład przejdź do witryny hidemyass.com umieszczonej na stronie www.google.com i umieść w niej link w elemencie iframe, który działa!

16

Zgodnie z opisem tutaj, ponieważ Google wysyła nagłówek odpowiedzi "X-Frame-Options: SAMEORIGIN", nie można po prostu ustawić src na "http://www.google.com" w elemencie iframe.

Jeśli chcesz osadzić Google w iframe można zrobić co sudopeople sugerowane w komentarzu powyżej użyć łącza niestandardowe wyszukiwarki Google, takich jak poniżej. To zadziałało dla mnie (puste "q =" puste, aby rozpocząć od pustego wyszukiwania).

<iframe id="if1" width="100%" height="254" style="visibility:visible" src="http://www.google.com/custom?q=&btnG=Search"></iframe> 

EDIT:

Odpowiedź ta już nie działa. Aby uzyskać informacje i instrukcje zastępowania wyszukiwania ramek iframe niestandardowym elementem wyszukiwania google, sprawdź: https://support.google.com/customsearch/answer/2641279

+0

Thx ScottyG! Czy są jakieś opcje dodawania zdjęć? –

+0

Hej Krzysztof Przygoda Myślę, że możesz wymusić wyszukiwanie obrazów za pomocą src: 'http://www.google.com/search?site=imghp&tbm=isch&q= ' searchstring'' ale dlatego, że używa on search? a nie niestandardowego? nie będziesz mógł go używać w iframe – ScottyG

+1

@ScottyG Czy powyższa technika jest nadal ważna? Próbowałem upuścić tę linię na pustą stronę i wszystko, co otrzymam, to pusty element iframe , nawet jeśli podaję zapytanie: – Andres

1

To działało, ponieważ użyłem go do stworzenia niestandardowych wyszukiwań w Google z własnymi opcjami. Google wprowadziło zmiany na ich końcu i złamałam prywatną dostosowaną stronę wyszukiwania :(Już nie pracuje próbki poniżej. To było bardzo użyteczne dla skomplikowanych wzorów wyszukiwania.

<form method="get" action="http://www.google.com/search" target="main"><input name="q" value="" type="hidden"> <input name="q" size="40" maxlength="2000" value="" type="text"> 

internetowej

Myślę, że lepszym rozwiązaniem jest po prostu używać Curl lub podobny.

4

można obejście X-Frame-Options w wykorzystaniem YQL.

var iframe = document.getElementsByTagName('iframe')[0]; 
var url = iframe.src; 
var getData = function (data) { 
    if (data && data.query && data.query.results && data.query.results.resources && data.query.results.resources.content && data.query.results.resources.status == 200) loadHTML(data.query.results.resources.content); 
    else if (data && data.error && data.error.description) loadHTML(data.error.description); 
    else loadHTML('Error: Cannot load ' + url); 
}; 
var loadURL = function (src) { 
    url = src; 
    var script = document.createElement('script'); 
    script.src = 'http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20data.headers%20where%20url%3D%22' + encodeURIComponent(url) + '%22&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=getData'; 
    document.body.appendChild(script); 
}; 
var loadHTML = function (html) { 
    iframe.src = 'about:blank'; 
    iframe.contentWindow.document.open(); 
    iframe.contentWindow.document.write(html.replace(/<head>/i, '<head><base href="' + url + '"><scr' + 'ipt>document.addEventListener("click", function(e) { if(e.target && e.target.nodeName == "A") { e.preventDefault(); parent.loadURL(e.target.href); } });</scr' + 'ipt>')); 
    iframe.contentWindow.document.close(); 
} 

loadURL(iframe.src); 
<iframe src="http://www.google.co.in" width="500" height="300"></iframe> 

Uruchom tutaj.

http://jsfiddle.net/2gou4yen/

kod tutaj: How Can I Bypass the X-Frame-Options: SAMEORIGIN HTTP Header?

+2

nie działa - sprawdź, czy skrzypce –

+1

Działa, ale nie po raz pierwszy. strony, w której mam osadzone, muszę odświeżyć, aby załadować stronę po raz pierwszy, a potem będzie dobrze. –

Powiązane problemy