如何在iframe中显示google.com?

我试图把google.com放到我的网站上的iframe中,这可以和许多其他网站一起工作,包括雅虎。 但它不适用于谷歌,因为它只显示一个空白的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”响应头。 此选项可防止浏览器显示与父页面不在同一域中的iFrame。

请参阅: Mozilla开发人员networking – X-Frame-Options响应标题

这不是不可能的。
使用反向代理服务器来处理异源问题。 我曾经使用Nginx与proxy_pass来改变网页的url。 你可以试一试。

另一种方法是自己编写一个简单的代理页面运行在服务器上,只需要Google的请求,并将结果输出到客户端。

正如这里所描述的,因为Google发送了一个“X-Frame-Options:SAMEORIGIN”响应头文件,所以你不能简单的在iframe中设置src为“ http://www.google.com ”。

如果您想将Googleembedded到iframe中,您可以执行sudopeople在上述注释中build议的操作,并使用Google自定义search链接,如下所示。 这对我很好(左'Q ='空白开始空白search)。

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

编辑:

这个答案不再有效。 有关如何使用Google自定义search元素replaceiframesearch的信息和说明,请访问: https : //support.google.com/customsearch/answer/2641279

您可以绕过使用YQL的X-Frame-Options。

 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> 

在这里运行。

http://jsfiddle.net/2gou4yen/

这里的代码: 我如何绕过X框架选项:SAMEORIGIN HTTP头?

添加</iframe> – 您忘记了结束标签。

它不理想,但你可以使用代理服务器,它工作正常。 例如,去隐藏myass.com放在www.google.com,并把它链接到一个iframe,它的工作原理!

这用于工作,因为我用它来创build自定义的Googlesearch与我自己的select。 谷歌做了他们最后的变化,打破了我的私人定制search页面:(不再工作在下面的示例,这对于复杂的search模式非常有用。

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

卷筒纸

我想更好的select是只使用curl或类似的。