Как показать google.com в фрейме?
Я пытаюсь поместить google.com в iframe на моем сайте, это работает со многими другими сайтами, включая Yahoo. Но он не работает с Google, так как он просто показывает пустой фрейм. Почему не рендер? Есть ли какие-нибудь хитрости, чтобы сделать это?
Я пробовал это обычным способом, чтобы показать сайт в iframe, как это:
<iframe name="I1" id="if1" width="100%"
height="254" style="visibility:visible"
src="http://www.google.com"></iframe>
Страница google.com не отображается в iframe, она просто пустая. Что здесь происходит?
10 ответов
Это связано с тем, что Google отправляет заголовок ответа "X-Frame-Options: SAMEORIGIN". Этот параметр запрещает браузеру отображать iFrames, которые не размещены в том же домене, что и родительская страница.
См. Сеть разработчиков Mozilla - заголовок ответа X-Frame-Options
ЭТО НЕВОЗМОЖНО.
Используйте обратный прокси-сервер для решения проблемы с другим источником. Я имел обыкновение использовать Nginx с proxy_pass изменить URL страницы. Вы можете попробовать.
Другой способ - написать простую страницу прокси, которая запускается на сервере самостоятельно, просто запросить у Google и вывести результат клиенту.
Как было указано здесь, поскольку 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
Вы можете использовать https://www.google.com/search?igu=1 вместо https://google.com/ , это работает. Эта проблема заключается в том, что у него есть политика заголовка X-Frame-Options, и браузеры следуют этим политикам.
Вы можете обойти 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-Options: HTTP-заголовок SAMEORIGIN?
Вы можете решить с помощью 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>
Если вы используете 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);
?>
Раньше это работало, потому что я использовал его для создания пользовательских поисков 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 или аналогичный.
Это не идеально, но вы можете использовать прокси-сервер, и он отлично работает. Например, перейдите на hidemyass.com, вставьте www.google.com и поместите ссылку, на которую он идет, в iframe, и это работает!
В настоящее время я сам экспериментирую с этим и случайно использую этот пост Stackru в качестве руководства. Для всех, кто случайно наткнулся на это, я хотел бы отметить, что опция пользовательского поиска Google не возвращает те же результаты, что и стандартная поисковая система Google.com. Результаты довольно близки, так что пользовательский поиск Google может быть хорошим способом, если вы ищете что-то быстрое и простое. Попробую поэкспериментировать с упомянутым здесь методом прокси-сервера, чтобы увидеть, смогу ли я получить результат немного ближе к тому, что я ищу.