Come mostrare google.com in un iframe?


121

Sto cercando di inserire google.com in un iframe sul mio sito web, funziona con molti altri siti web incluso yahoo. Ma non funziona con Google in quanto mostra solo un iframe vuoto. Perché non esegue il rendering? Ci sono trucchi per farlo?

L'ho provato in un modo normale per mostrare un sito Web in un iframe come questo:

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

La pagina google.com non viene visualizzata nell'iframe, è solo vuota. Cosa sta succedendo?


Perché devi mostrare Google in un iframe?
Paul Alan Taylor

Non citarmi, ma forse Google usa qualcosa di simile window.propertyo qualcosa che, all'interno di un IFrame, romperebbe parte del display?
anonimo

se vuoi la barra di ricerca di Google, vedi questo link: google.com/webelements/#!/custom-search
mgraph

@PaulAlanTaylor Era un requisito del mio cliente, si diceva che voleva mostrare il risultato di Google nel suo sito web a portata di mano in un iframe.
Bala

11
Basta fare questo:<iframe src="https://www.google.com/webhp?igu=1"></iframe>
niutech

Risposte:


117

Il motivo è che Google sta inviando un'intestazione di risposta "X-Frame-Options: SAMEORIGIN". Questa opzione impedisce al browser di visualizzare iFrame che non sono ospitati nello stesso dominio della pagina principale.

Vedere: Mozilla Developer Network - L'intestazione della risposta X-Frame-Options


18
Penso che questo sia abbastanza inutile. Se qualcuno riesce a pensare a un motivo per usare quella funzione oltre a essere semplicemente cattivo, sentiti libero di dirmelo.
annonimamente il

15
@JonHanna non si limita a contattare Google per nulla.
albert

23
Puoi utilizzare questo URL in un iframe: google.com/search?igu=1
niutech

1
Oppure puoi usare il mio componente Web X-Frame-Bypass .
niutech

4
@niutech Incredibilmente, il tuo URL con il parametro? igu = 1 funziona. Qualche idea sul perché? Qual è lo scopo originale dietro questa opzione? È interessante notare che questo mi fa apparire come non connesso, ma il campo di ricerca suggerisce ancora alcune delle mie ricerche storiche effettive. Quindi sono "tipo" connesso. Molto strano.
Mark Thomson

28

NON È IMPOSSIBILE.
Utilizzare un server proxy inverso per gestire il problema dell'origine diversa. Usavo Nginx con proxy_passper cambiare l'URL della pagina. Puoi fare una prova.

Un altro modo è scrivere una semplice pagina proxy eseguita sul server da solo, basta richiedere a Google e inviare il risultato al client.


8
Google ha bloccato i miei semplici tentativi di curling del loro URL di ricerca standard. :( Ho finito per utilizzare "Google Custom" che invia diverse opzioni X-Frame. Google.com/custom?q=test&btnG=Search
Joel Mellon

7
Esiste un tutorial su come risolvere questo problema con Nginx?
Black

21

Come è stato delineato qui, poiché Google sta inviando un'intestazione di risposta "X-Frame-Options: SAMEORIGIN", non puoi semplicemente impostare src su " http://www.google.com " in un iframe.

Se desideri incorporare Google in un iframe, puoi fare ciò che le persone hanno suggerito in un commento sopra e utilizzare un link di ricerca personalizzato di Google come il seguente. Questo ha funzionato alla grande per me (lascia 'q =' vuoto per iniziare con la ricerca vuota).

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

MODIFICARE:

Questa risposta non funziona più. Per informazioni e istruzioni su come sostituire una ricerca iframe con un elemento di ricerca personalizzato di Google, visita: https://support.google.com/customsearch/answer/2641279


Grazie ScottyG! Ci sono opzioni per aggiungere risultati di immagini?
Krzysztof Przygoda

Ehi Krzysztof Przygoda penso che tu possa forzare una ricerca di immagini con un src come: http://www.google.com/search?site=imghp&tbm=isch&q='searchstring'ma perché usa la ricerca? e non personalizzato? non potrai utilizzarlo in un iframe
ScottyG

1
@ScottyG La tecnica di cui sopra è ancora valida? Ho provato a inserire quella riga in una pagina vuota e tutto quello che ottengo è un iframe vuoto, anche quando fornisco una query
Andres

2
Ciao Andres, sembra che tu abbia ragione. Non sono più in grado di farlo funzionare per me. Il link di ricerca personalizzato ora reindirizza a google.ca/webhp?btnG=&gws_rd=ssl che forza SSL e sembra essere bloccato in un iframe ora.
Continuerò a

8

Puoi bypassare X-Frame-Options in un 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 = 'https://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>

Eseguilo qui: http://jsfiddle.net/2gou4yen/

Codice da qui: Come posso bypassare le opzioni X-Frame: SAMEORIGIN HTTP Header?


3
Funziona ma non per la prima volta. Se apro la mia pagina web in cui ho incorporato, devo premere Aggiorna per caricare la pagina per la prima volta. Dopodiché andrà bene.
Vivek Sinha

@ TV-C-15 Funziona quando viene sostituito http://query.yahooapis.comcon https://query.yahooapis.com.
niutech

testato anche su codepen [ codepen.io/anon/pen/Xyqqvb] e funziona (anche se a volte richiede un aggiornamento) su firefox, chrome, opera, non funziona su edge MA se copio localmente e apro nel browser continua a ricarica la pagina..qui lo script completo: [ files.fm/u/arzrb2h4]
Joe

1
non funziona. C'è un altro modo per aprire Google in un iframe?
Krishna

3

Puoi risolvere utilizzando Google CSE (Custom Searche Engine), che può essere facilmente inserito in un iframe. Puoi creare il tuo motore di ricerca, che ricerca siti selezionati o anche nell'intero database di Google.

I risultati possono essere stilizzati come preferisci, anche in modo simile allo stile Google. Google CSE funziona con la ricerca web e immagini.

google.php

<script>
  (function() {
    var cx = 'xxxxxxxxxxxxxxxxxxxxxx';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:searchresults-only></gcse:searchresults-only>

yourpage.php

<iframe src="google.php?q=<?php echo urlencode('your query'); ?>"></iframe>

2

Questo funzionava perché lo usavo per creare ricerche Google personalizzate con le mie opzioni. Google ha apportato modifiche da parte loro e ha rotto la mia pagina di ricerca personalizzata privata :( L'esempio di seguito non funziona più. È stato molto utile per schemi di ricerca complessi.

<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">

ragnatela

Immagino che l'opzione migliore sia usare semplicemente Curl o simili.


1

Non è l'ideale ma puoi usare un server proxy e funziona bene. Ad esempio, vai su hidemyass.com, inserisci www.google.com e inserisci il link a cui va in un iframe e funziona!


0

Se stai usando PHP puoi usarlo file_get_contents()per stampare il contenuto:

<?php
$page = file_get_contents('https://www.google.com');
echo $page;
?>

Questo stamperà qualunque file_get_contents()funzione di contenuto ottiene in questo URL. Tieni presente che poiché stai visualizzando il contenuto come stringa anziché come una pagina web reale, cose come le immagini del percorso relativo non vengono mostrate correttamente, perché /img/myimg.jpg viene ora caricato dal tuo server e non più da google.com.

Tuttavia, puoi giocare con alcuni trucchi come la str_replace()funzione per sostituire gli URL assoluti nelle immagini:

<?php
$page = file_get_contents('https://www.google.com');
echo str_replace('src="img/','src="https://google.com/img/',$page);
?>
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.