Comment afficher google.com dans un iframe?

121

J'essaie de mettre google.com dans une iframe sur mon site Web, cela fonctionne avec de nombreux autres sites Web, y compris Yahoo. Mais cela ne fonctionne pas avec google car il affiche simplement une iframe vide. Pourquoi ne rend-il pas? Y a-t-il des astuces pour faire ça?

Je l'ai essayé de manière habituelle pour afficher un site Web dans un iframe comme celui-ci:

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

La page google.com ne s'affiche pas dans l'iframe, elle est juste vide. Que se passe-t-il?

html Bala
la source

Pourquoi avez-vous besoin d'afficher Google dans une iframe?

Paul Alan Taylor

Ne me citez pas, mais peut-être que Google utilise quelque chose comme window.propertyou quelque chose qui, à l'intérieur d'un IFrame, briserait une partie de l'affichage?

anonyme le

si vous voulez la barre de recherche google, voir ce lien: google.com/webelements/#!/custom-search

mgraph

@PaulAlanTaylor C'était l'exigence de mon client, il a été dit qu'il voulait afficher le résultat Google dans son site Web à portée de main dans un iframe.

Bala

11

<iframe src="https://www.google.com/webhp?igu=1"></iframe>

Faites

117

La raison en est que Google envoie un en-tête de réponse "X-Frame-Options: SAMEORIGIN". Cette option empêche le navigateur d'afficher des iFrames qui ne sont pas hébergées sur le même domaine que la page parent.

Voir: Mozilla Developer Network - L'en-tête de réponse X-Frame-Options

Andreas Koch
la source

18

Je pense que c'est assez inutile. Si quelqu'un peut penser à une raison d'utiliser cette fonctionnalité en plus d'être méchant, n'hésitez pas à me le dire.

anonyme le

15

@JonHanna on ne contacte pas simplement google pour quoi que ce soit.

albert

23

Vous pouvez utiliser cette URL dans un iframe: google.com/search?igu=1

niutech

1

Ou vous pouvez utiliser mon composant Web X-Frame-Bypass .

niutech

4

@niutech Incroyablement, votre URL avec le paramètre? igu = 1 fonctionne. Une idée pourquoi? Quel est le but initial de cette option? Fait intéressant, cela me fait apparaître comme non connecté, mais le champ de recherche suggère toujours certaines de mes recherches historiques réelles. Donc je suis "en quelque sorte" connecté. Très étrange.

Mark Thomson

28

CE N'EST PAS IMPOSSIBLE.
Utilisez un serveur proxy inverse pour gérer le problème d'origine différente. J'utilisais Nginx avec proxy_passpour changer l'url de la page. Tu peux essayer.

Une autre façon consiste à écrire une simple page proxy exécutée sur le serveur par vous-même, il suffit de demander à Google et de transmettre le résultat au client.

ijse
la source

8

Google a bloqué mes simples tentatives de curling leur URL de recherche standard. :( J'ai fini par utiliser "Google Custom" qui envoie différentes options X-Frame. Google.com/custom?q=test&btnG=Search

Joel Mellon

7

Existe-t-il un tutoriel sur la façon de résoudre ce problème avec Nginx?

Noir

21

Comme cela a été décrit ici, étant donné que Google envoie un en-tête de réponse "X-Frame-Options: SAMEORIGIN", vous ne pouvez pas simplement définir le src sur " http://www.google.com " dans un iframe.

Si vous souhaitez intégrer Google dans une iframe, vous pouvez faire ce que sudopeople a suggéré dans un commentaire ci-dessus et utiliser un lien de recherche personnalisé Google comme celui-ci. Cela a très bien fonctionné pour moi (laisser «q =» vide pour commencer avec une recherche vide).

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

ÉDITER:

Cette réponse ne fonctionne plus. Pour plus d'informations et des instructions sur la façon de remplacer une recherche iframe par un élément de recherche personnalisée Google, consultez: https://support.google.com/customsearch/answer/2641279

ScottyG
la source

Thx ScottyG! Existe-t-il des options pour ajouter des résultats d'images?

Krzysztof Przygoda

Hey Krzysztof Przygoda Je pense que vous pouvez forcer une recherche d'image avec un src comme: http://www.google.com/search?site=imghp&tbm=isch&q='searchstring'mais parce qu'il utilise la recherche? et pas personnalisé? vous ne pourrez pas l'utiliser dans une iframe

ScottyG

1

@ScottyG La technique ci-dessus est-elle toujours valable? J'ai essayé de laisser tomber cette ligne dans une page vierge et tout ce que j'obtiens est une iframe vierge, même lorsque je fournis une requête

Andres

2

Salut Andres, on dirait que vous avez peut-être raison. Je ne suis plus en mesure de faire fonctionner cela pour moi. Le lien de recherche personnalisé redirige maintenant vers google.ca/webhp?btnG=&gws_rd=ssl qui force SSL et semble maintenant bloqué dans une iframe. Je vais continuer à enquêter sur cela, mais il semble que la fête pourrait être terminée sur celui-ci ... :(

ScottyG

8

Vous pouvez contourner X-Frame-Options dans une utilisation de 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>

Exécutez-le ici: http://jsfiddle.net/2gou4yen/

Code à partir d'ici: Comment puis-je contourner les options X-Frame: en-tête HTTP SAMEORIGIN?

Netham
la source

3

Cela fonctionne mais pas pour la première fois. Si j'ouvre ma page Web dans laquelle j'ai intégré, je dois appuyer sur Actualiser pour charger la page pour la première fois. Après cela, ce sera bien.

Vivek Sinha

@ TV-C-15 Cela fonctionne lorsque vous remplacez http://query.yahooapis.compar https://query.yahooapis.com.

niutech

testé également sur codepen [ codepen.io/anon/pen/Xyqqvb] et cela fonctionne (bien que parfois nécessite une actualisation) sur firefox, chrome, opéra, ne fonctionne pas sur le bord MAIS si je copie localement et que j'ouvre dans le navigateur, il continue à rechargez la page..ici le script complet: [ files.fm/u/arzrb2h4]

Joe

1

Ca ne fonctionne pas. Existe-t-il un autre moyen d'ouvrir Google dans une iframe?

Krishna

3

Vous pouvez résoudre en utilisant Google CSE (Custom Searche Engine), qui peut être facilement inséré dans un iframe. Vous pouvez créer votre propre moteur de recherche, qui recherche des sites sélectionnés ou également dans toute la base de données de Google.

Les résultats peuvent être stylisés comme vous le souhaitez, également similaires au style Google. Google CSE fonctionne avec la recherche sur le Web et les images.

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>

WalterV
la source

2

Cela fonctionnait car je l'utilisais pour créer des recherches Google personnalisées avec mes propres options. Google a apporté des modifications de leur côté et a cassé ma page de recherche personnalisée privée: (L'exemple ci-dessous ne fonctionne plus. C'était très utile pour les modèles de recherche complexes.

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

la toile

Je suppose que la meilleure option est d'utiliser simplement Curl ou similaire.

Jim
la source

1

Ce n'est pas idéal mais vous pouvez utiliser un serveur proxy et cela fonctionne très bien. Par exemple, allez sur hidemyass.com, mettez www.google.com et mettez le lien vers lequel il va dans un iframe et ça marche!

Monty
la source

0

Si vous utilisez PHP, vous pouvez utiliser file_get_contents()pour imprimer le contenu:

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

Cela affichera n'importe quelle file_get_contents()fonction de contenu obtient dans cette URL. Veuillez noter que puisque vous affichez le contenu sous forme de chaîne au lieu d'une page Web réelle, des éléments tels que les images de chemin relatif ne s'affichent pas correctement, car /img/myimg.jpg se charge maintenant depuis votre serveur et non plus depuis google.com.

Cependant, vous pouvez jouer avec quelques astuces comme la str_replace()fonction pour remplacer les URL absolues dans les images:

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

tremblement de terre
la source

Comment afficher google.com dans un iframe?

Réponses: