Я пытаюсь поместить 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 отправляет заголовок ответа "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>
EDIT:
Этот ответ больше не работает. Для получения информации и инструкций по замене поиска iframe с помощью элемента пользовательского поиска google: https://support.google.com/customsearch/answer/2641279
Вы можете обойти 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 = '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>
Запустите его здесь.
Код отсюда: Как я могу обойти X-Frame-Options: SAMEORIGIN HTTP Header?
Это не идеальный вариант, но вы можете использовать прокси-сервер, и он отлично работает. Например, перейдите на hidemyass.com, зайдите на сайт www.google.com и поместите ссылку, в которую он входит, в iframe, и он работает!
Это работало, потому что я использовал его для создания пользовательских поисков 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">
веб
Я думаю, лучший вариант - просто использовать Curl или аналогичный.