Как показать google.com в iframe?


121

Я пытаюсь поместить google.com в iframe на своем веб-сайте, это работает со многими другими веб-сайтами, включая Yahoo. Но это не работает с Google, так как он просто показывает пустой iframe. Почему не отображается? Есть ли какие-нибудь уловки для этого?

Я пробовал обычным способом показать веб-сайт в iframe следующим образом:

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

Страница google.com не отображается в iframe, она просто пуста. Что происходит?


Зачем нужно отображать Google в iframe?
Пол Алан Тейлор

Не цитируйте меня, но, может быть, Google использует что-то вроде window.propertyили что-то такое, что внутри IFrame сломало бы часть дисплея?
анонимно 02

если вы хотите, чтобы панель поиска Google см. эту ссылку: google.com/webelements/#!/custom-search
mgraph

@PaulAlanTaylor Это было требование моего клиента, было сказано, что он хочет показать результат google на своем веб-сайте в удобном iframe.
Bala

11
Просто сделай это:<iframe src="https://www.google.com/webhp?igu=1"></iframe>
niutech

Ответы:


117

Причина в том, что Google отправляет заголовок ответа «X-Frame-Options: SAMEORIGIN». Этот параметр запрещает браузеру отображать фреймы iFrames, которые не размещены в том же домене, что и родительская страница.

См .: Сеть разработчиков Mozilla - Заголовок ответа X-Frame-Options


18
Я считаю это бесполезным. Если кто-то может придумать причину для использования этой функции, помимо просто злости, не стесняйтесь сказать мне.
анонимно 02

15
@JonHanna нельзя просто связаться с Google ни для чего.
Альберт

23
Вы можете использовать этот URL в iframe: google.com/search?igu=1
niutech

1
Или вы можете использовать мой веб-компонент X-Frame-Bypass .
niutech

4
@niutech Невероятно, но ваш URL с параметром? igu = 1 работает. Есть идеи, почему? Какова первоначальная цель этого варианта? Интересно, что из-за этого я показываю, что не вошел в систему, но поле поиска по-прежнему предлагает некоторые из моих фактических исторических поисков. Так что я "вроде" вошел в систему. Очень странно.
Марк Томсон

28

НЕВОЗМОЖНО.
Используйте обратный прокси-сервер для решения проблемы другого происхождения. Раньше я использовал Nginx proxy_passдля изменения URL-адреса страницы. вы можете попробовать.

Другой способ - написать простую прокси-страницу, запускаемую на сервере самостоятельно, просто запросите у Google и выведите результат клиенту.


8
Google заблокировал мои простые попытки свернуть их стандартный URL-адрес поиска. :( В итоге я использовал "Google Custom", который отправляет разные параметры X-Frame. Google.com/custom?q=test&btnG=Search
Джоэл Меллон

7
Есть ли руководство по решению этой проблемы с помощью Nginx?
Black

21

Как было указано здесь, поскольку Google отправляет заголовок ответа «X-Frame-Options: SAMEORIGIN», вы не можете просто установить src на « http://www.google.com » в iframe.

Если вы хотите встроить Google в iframe, вы можете сделать то, что sudopeople предложили в комментарии выше, и использовать ссылку пользовательского поиска Google, как показано ниже. Это отлично сработало для меня (оставил пустое поле 'q =', чтобы начать с пустого поиска).

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

РЕДАКТИРОВАТЬ:

Этот ответ больше не работает. Для получения информации и инструкций о том, как заменить поиск iframe на элемент пользовательского поиска Google, посетите: https://support.google.com/customsearch/answer/2641279


Thx ScottyG! Есть ли варианты добавления результатов изображений?
Кшиштоф Пшигода

Привет, Кшиштоф Пшигода. Я думаю, вы можете принудительно выполнить поиск изображений с помощью src вроде: http://www.google.com/search?site=imghp&tbm=isch&q='searchstring'но потому что он использует поиск? а не кастом? вы не сможете использовать его в iframe
ScottyG

1
@ScottyG Действует ли описанный выше метод? Я попытался перетащить эту строку на пустую страницу, и все, что я получил, это пустой iframe, даже когда я задаю запрос
Андрес,

2
Привет, Андрес, похоже, ты прав. Я больше не могу заставить это работать на меня. Ссылка настраиваемого поиска теперь перенаправляет на google.ca/webhp?btnG=&gws_rd=ssl, который запускает ssl и, похоже, теперь заблокирован в iframe. Я буду продолжать расследование, но похоже, что вечеринка на этом закончилась ... :(
ScottyG

8

Вы можете обойти X-Frame-Options при использовании 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>

Запустите его здесь: http://jsfiddle.net/2gou4yen/

Код отсюда: Как я могу обойти параметры X-Frame: HTTP-заголовок SAMEORIGIN?


3
Работает, но не в первый раз. Если я открываю свою веб-страницу, в которую встроил, мне нужно нажать кнопку «Обновить», чтобы загрузить страницу в первый раз. После этого будет хорошо.
Вивек Синха

@ TV-C-15 Работает при замене http://query.yahooapis.comна https://query.yahooapis.com.
niutech

протестирован также на codepen [ codepen.io/anon/pen/Xyqqvb], и он работает (хотя иногда требует обновления) в firefox, chrome, opera, не работает на краю, НО если я копирую локально и открываю в браузере, он продолжает перезагрузите страницу .. вот полный сценарий: [ files.fm/u/arzrb2h4]
Джо

1
не работает. Есть ли другой способ открыть Google в iframe?
Кришна

3

Вы можете решить с помощью Google CSE эту (Custom Searche Engine), которую можно легко вставить в iframe. Вы можете создать свою собственную поисковую систему для поиска по выбранным сайтам или по всей базе данных Google.

Результаты можно оформить по своему усмотрению, также как и в стиле Google. Google CSE работает с веб-поиском и поиском изображений.

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

Раньше это работало, потому что я использовал его для создания пользовательских поисков Google с моими собственными параметрами. Google внес изменения со своей стороны и сломал мою частную страницу индивидуального поиска :( Не работает пример ниже. Это было очень полезно для сложных шаблонов поиска.

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

Web

Думаю, лучший вариант - просто использовать Curl или аналогичный.


1

Это не идеально, но вы можете использовать прокси-сервер, и он отлично работает. Например, перейдите на hidemyass.com, введите www.google.com и поместите ссылку, на которую он переходит, в iframe, и он работает!


0

Если вы используете PHP, вы можете использовать file_get_contents()для печати содержимого:

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

Это напечатает любую file_get_contents()функцию содержимого, полученную по этому URL-адресу. Обратите внимание, что, поскольку вы показываете контент в виде строки, а не как фактическую веб-страницу, такие вещи, как изображения относительного пути, отображаются неправильно, потому что /img/myimg.jpg теперь загружается с вашего сервера, а не с google.com.

Однако вы можете поиграть с некоторыми уловками, например с str_replace()функцией замены абсолютных URL-адресов в изображениях:

<?php
$page = file_get_contents('https://www.google.com');
echo str_replace('src="img/','src="https://google.com/img/',$page);
?>
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.