Questions tagged «iframe»

“ iframe”是一个HTML元素,可在文档内创建“内嵌框架”,从而允许在同一页面中显示单独的文档。

13
防止浏览器中的iframe缓存
如何防止Firefox和Safari缓存iframe内容? 我有一个简单的网页,其中包含一个iframe到另一个网站上的页面。外部页面和内部页面都具有HTTP响应标头,以防止缓存。当我单击浏览器中的“后退”按钮时,外部页面正常工作,但是无论如何,浏览器始终会检索iframed页面的缓存。IE可以正常工作,但是Firefox和Safari给我带来了麻烦。 我的网页看起来像这样: <html> <head><!-- stuff --></head> <body> <!-- stuff --> <iframe src="webpage2.html?var=xxx" /> <!-- stuff --> </body> </html> 该var变量总是变化。尽管事实上iframe的URL已更改(因此,浏览器应向该页面发出新请求),但浏览器只是获取缓存的内容。 我检查了来回的HTTP请求和响应,并且注意到即使外层页面包含<iframe src="webpage2.html?var=222" />了浏览器,它仍然可以访存webpage2.html?var=111。 到目前为止,这是我尝试过的方法: 使用随机var值更改iframe网址 将Expires,Cache-Control和Pragma标头添加到外部网页 将Expires,Cache-Control和Pragma标头添加到内部网页 我无法执行任何JavaScript技巧,因为我被同源政策所阻止。 我的想法不多了。有谁知道如何阻止浏览器缓存iframed内容? 更新资料 我按照Daniel建议执行的另一项测试安装了Fiddler2,但不幸的是,我仍然得到相同的结果。 这是我执行的测试: 外页Math.random()在JSP中使用生成随机数。 外页在网页上显示随机数。 外页调用iframe,传入随机数。 内页显示随机数。 通过此测试,我可以准确地看到哪些页面正在更新以及哪些页面已缓存。 外观测试 为了进行快速测试,我加载了页面,导航到另一个页面,然后按“返回”。结果如下: 原始页面: 外页:0.21300034290246206 内页:0.21300034290246206 离开页面,然后回击: 外页:0.4470929019483644 内页:0.21300034290246206 这表明即使外部页面使用URL中的其他GET参数调用内部页面,也正在缓存内部页面。由于某种原因,浏览器会忽略iframe正在请求新网址的事实;它只是加载旧的。 提琴手测试 果然,提琴手证实了同一件事。 (我加载页面。) 称为外页。HTML: …

9
跨网域iframe调整大小
如何从其他域调整iframe的大小 -编辑 向下滚动一些解决方案..或阅读如何不这样做:D 经过数小时的代码黑客攻击后,得出的结论是,iframe内部的任何内容都无法访问,即使是在我的域中呈现的滚动条也是如此。我尝试了许多技巧都无济于事。 为了节省您的时间,甚至不要走这条路,只需使用sendMessages进行跨域通信。 我使用了HTML <5的插件-进入底部找到一个好例子:) 过去几天,我一直在尝试将iframe集成到网站中。这是一个短期解决方案,而另一方正在开发和API(可能要花费数月的时间...),并且因为这是短期解决方案,所以我们确实想使用easyXDM-我可以访问其他域,但要求他们这样做非常困难按原样添加p3p标头..... 3个iframe 我找到的最接近的解决方案是3个iframe,但考虑到了chrome和safari,所以我不能使用它。 镀铬 http://css-tricks.com/examples/iFrameResize/crossdomain.php#frameId=frame-one&height=1179 测量滚动条 我找到了另一篇有关如何使用scrollheight尝试调整表单大小的文章。理论上它可以正常工作,但是我无法使用iframe滚动高度正确应用它。 document.body.scrollHeight 那显然使用了主体的高度(无法访问这些属性100%是基于客户端显示的Canvaz而非x域文档的高度) 我尝试使用jquery来获取iframe的高度 $('#frameId').Height() $('#frameId').clientHeight $('#frameId').scrollHeight 返回不同的Chrome值,即-或根本没有任何意义。问题是框​​架内的所有内容都被拒绝-甚至滚动条... 计算样式 但是,如果我检查并在iframe的chrome中添加元素,它就会很傻地向我显示iframe内的文档尺寸(使用jquery x-domain获取iframe.heigh-访问被拒绝),在计算出的CSS中没有任何内容 现在,chrome如何计算呢?(编辑浏览器使用其内置的渲染引擎重新渲染页面,以计算所有这些设置-但未附加在任何位置,以防止跨域欺诈。) HTML4 我阅读了HTML4.x的规范,它说那里应该有通过document.element公开的只读值,但是通过jquery拒绝了它的访问 代理框架 我采用了将网站代理回去并计算确定的方法,直到用户通过iframe登录并且代理获取登录页面而非实际内容为止。另外对于某些两次调用该页面是不可接受的 http://www.codeproject.com/KB/aspnet/asproxy.aspx http://www.johnchapman.name/aspnet-proxy-page-cross-domain-requests-from-ajax-and-javascript/ 重新呈现页面 我没有走那么远,但是有jscript引擎可以查看源代码并根据源文件重新呈现页面。但这需要破解这些jscript ..对于商业实体而言,那不是理想的情况...以及一些涉及纯Java小程序或服务器端渲染的发票 http://en.wikipedia.org/wiki/Server-side_JavaScript http://htmlunit.sourceforge.net/ <-java而不是jscript http://maxq.tigris.org/ 编辑09-2013 更新 所有这些都可以通过HTML5套接字完成。但是easyXDM对于非HTML5投诉页面来说是很好的后备。 解决方案1很好的解决方案! 使用easyXDM 在您的服务器上,您以 <html> <head> <script src="scripts/easyXDM.js" type="text/javascript"></script> <script …

10
jQuery在加载时获取iframe内容的高度
我在Main.php的iframe中加载了一个帮助页面help.php,将页面加载到iframe中后,如何获取该页面的高度? 我问这个问题是因为我无法将iframe的高度设置为100%或自动。这就是为什么我认为我需要使用javascript ..我正在使用jQuery CSS: body { margin: 0; padding: 0; } .container { width: 900px; height: 100%; margin: 0 auto; background: silver; } .help-div { display: none; width: 850px; height: 100%; position: absolute; top: 100px; background: orange; } #help-frame { width: 100%; height: auto; margin:0; padding:0; } JS: $(document).ready(function () …
84 jquery  iframe  height  onload 

12
HTML iframe-禁用滚动
我的网站上有以下iframe: <iframe src="<<URL>>" height="800" width="800" sandbox="allow-same-origin allow-scripts allow-forms" scrolling="no" style="overflow: hidden"></iframe> 它具有滚动条。 如何摆脱它们?
84 html  css  iframe 

12
如何检查iframe是否已加载或是否包含内容?
我有一个id =“ myIframe”的iframe,这里是我加载其内容的代码: $('#myIframe').attr("src", "my_url"); 问题是有时加载时间太长,有时加载速度非常快。所以我必须使用“ setTimeout”函数: setTimeout(function(){ if (//something shows iframe is loaded or has content) { //my code } else { $('#myIframe').attr("src",""); //stop loading content } },5000); 我唯一想知道的是如何确定是否已加载iFrame或是否包含内容。使用iframe.contents().find()将不起作用。我不能用iframe.load(function(){})。



11
尝试访问以编程方式创建的<iframe>的文档对象时的“访问被拒绝” JavaScript错误(仅IE)
我有一个项目,需要在其中使用JavaScript创建&lt;iframe&gt;元素并将其附加到DOM。之后,我需要在&lt;iframe&gt;中插入一些内容。这是一个将嵌入第三方网站的小部件。 我不想设置&lt;iframe&gt;的“ src”属性,因为我不想加载页面。相反,它用于隔离/沙盒我插入其中的内容,以免与父页面发生CSS或JavaScript冲突。我正在使用JSONP从服务器加载一些HTML内容并将其插入此&lt;iframe&gt;中。 我的工作正常,但有一个严重的例外-如果在父页面中设置了document.domain属性(可能在部署此小部件的某些环境中),Internet Explorer(可能是所有版本),尝试访问已创建的此&lt;iframe&gt;的文档对象时,在6、7和8中确认)给我一个“访问被拒绝”错误。在我测试过的所有其他浏览器(所有主要的现代浏览器)中都没有发生这种情况。 这很有道理,因为我知道Internet Explorer要求您将将彼此通信的所有窗口/框架的document.domain设置为相同的值。但是,我不知道有什么方法可以在无法访问的文档上设置此值。 有谁知道执行此操作的方法-以某种方式设置此动态创建的&lt;iframe&gt;的document.domain属性吗?还是我不是从正确的角度看待它-是否有另一种方法可以实现我想要的目标而又不会遇到这个问题?无论如何,我确实需要使用&lt;iframe&gt;,因为隔离/沙盒化窗口对于此小部件的功能至关重要。 这是我的测试代码: &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt; &lt;title&gt;Document.domain Test&lt;/title&gt; &lt;script type="text/javascript"&gt; document.domain = 'onespot.com'; // set the page's document.domain &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;p&gt;This is a paragraph above the &amp;lt;iframe&amp;gt;.&lt;/p&gt; &lt;div id="placeholder"&gt;&lt;/div&gt; …

8
如果iframe src无法加载,则捕获错误。错误:-“拒绝在框架中显示“ http://www.google.co.in/”。”
我Knockout.js用来绑定iframe广告src代码(这对于用户而言是可配置的)。 现在,如果用户配置了http://www.google.com(我知道它不会在iframe中加载,这就是为什么我将它用于-ve场景),并且必须在IFrame中显示它。但是会引发错误: 拒绝在框架中显示“ http://www.google.co.in/ ”,因为它将“ X-Frame-Options”设置为“ SAMEORIGIN”。 我为iframe使用以下代码:- &lt;iframe class="iframe" id="iframe" data-bind="attr: {src: externalAppUrl, height: iframeheight}"&gt; &lt;p&gt;Hi, This website does not supports IFrame&lt;/p&gt; &lt;/iframe&gt; 我想要的是,如果URL无法加载。我想显示自定义消息。 在这里 现在,如果我将onload和onerror用作:- &lt;iframe id="browse" style="width:100%;height:100%" onload="alert('Done')" onerror="alert('Failed')"&gt;&lt;/iframe&gt; 它可以很好地加载w3schools.com,但不能与google.com一起加载。 其次:-如果我将其作为一个函数并像我在小提琴中所做的那样尝试,则它不起作用。 &lt;iframe id="browse" style="width:100%;height:100%" onload="load" onerror="error"&gt;&lt;/iframe&gt; 我不知道该如何运行它并捕获错误。 编辑:-如果iframe未加载或在stackoverflow中加载问题,我曾想过要调用一个函数,但是它显示了可在iframe中加载的网站的错误。 另外,我已经研究了加载事件上的Stackoverflow iframe, 谢谢!

13
更改新的Google Recaptcha(v2)宽度
我们刚刚开始实施列出的新的Google Recaptcha,网址为https://www.google.com/recaptcha/intro/index.html 但是,新方法似乎包含在iFrame中,而不是嵌入到页面中,因此使CSS的应用更加困难。 但是,我们的表单宽度为400像素,因此希望将Recaptcha设置为相同的宽度。 目前看起来像,但是我们希望其他地方都一样。 有人知道怎么做吗? 谢谢
76 css  iframe  width  recaptcha 

14
嵌入YouTube iframe-全屏
我有一张表格,可以插入网页。填写完表格后,将通过使用iframe嵌入来显示YouTube视频。 当我进入YouTube视频的全屏模式时,什么也没有发生。 嵌套iframe的全屏显示是否受父iframe的尺寸限制?
76 html  iframe 

1
Facebook如何在画布页面上为iFrame设置跨域Cookie?
我正在浏览Facebook的文档,以了解画布应用程序,并且遇到了一个示例应用程序:http : //developers.facebook.com/docs/samples/canvas。但是,当我阅读他们的示例时,我对他们在iframe应用程序中使用cookie感到非常困惑。 有点背景故事... 我已经尝试过将iframe用于可嵌入的小部件(与Facebook无关),并且发现一些浏览器(Chrome,Safari等)具有严格的Cookie策略,并且不允许在iframe中设置跨域Cookie(Firefox,另一方面,允许iframe在iframe中设置跨域Cookie)。例如,如果foo.com具有带src="http://bar.com/widget"iframe小部件的iframe,将无法为bar.com设置任何cookie,因此将iframe内的状态持久化将有困难:bar.com将解释来自的每个请求(包括ajax请求)窗口小部件作为没有建立会话的新请求。我挣扎了,找到了解决方法,使用JSONP和javascript来为foo.com设置cookie ... ... 所以? 好吧,我在看示例iframe Facebook应用程序画布时,我注意到他们的应用程序(运行在runwithfriends.appspot.com上)可以设置cookie u,其中包含当前用户的ID以及runwithfriends的其他一些参数。 appspot.com域。它会在每次请求时发送此Cookie ...并且可以在Chrome和Firefox中使用!WTF?Facebook如何克服Chrome上的跨域Cookie限制? (我现在已经知道答案了,但是我认为这对那些想弄清楚同一件事的人可能会有帮助-我将在下面发布答案。)

4
从iframe访问父窗口的元素
我有一个可以打电话的页面parent.php。在此页面中,我有一个iframe带有提交表单的表单,除此之外,我还有一个ID为“ target”的div。是否可以在iframe中提交表单,并在成功刷新后刷新目标div。是说要在其中加载新页面? 编辑:目标div在父页面中,所以我的问题基本上是,是否可以在iframe之外向父对象进行jQuery调用示例。那看起来如何? 编辑2:这就是我的jquery代码现在的样子。它位于iframe页面的中。div #target在parent.php中 $(;"form[name=my_form]").submit(function(e){ e.preventDefault; window.parent.document.getElementById('#target'); $("#target").load("mypage.php", function() { $('form[name=my_form]').submit(); }); }) 我不知道该脚本是否处于活动状态,导致表单成功提交,但目标没有任何改变。 编辑3: 现在,我尝试通过iframe中的链接调用父页面。那里也没有成功: &lt;a href="javascript:window.parent.getElementById('#target').load('mypage.php');"&gt;Link&lt;/a&gt;

3
从主文档中的JavaScript获取IFrame的文档
我有这个HTML代码: &lt;html&gt; &lt;head&gt; &lt;script type="text/javascript"&gt; function GetDoc(x) { return x.document || x.contentDocument || x.contentWindow.document; } function DoStuff() { var fr = document.all["myframe"]; while(fr.ariaBusy) { } var doc = GetDoc(fr); if (doc == document) alert("Bad"); else alert("Good"); } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;iframe id="myframe" src="http://example.com" width="100%" height="100%" onload="DoStuff()"&gt;&lt;/iframe&gt; &lt;/body&gt; &lt;/html&gt; 问题是我收到消息“错误”。这意味着iframe的文档未正确获取,而GetDoc函数实际返回的是父文档。 如果您告诉我在哪里犯错,我将不胜感激。(我想将文档托管在IFrame中。) …

9
空的iframe src是否有效?
我希望iframe最初src为空白,然后在页面加载后;调用JS函数,然后将该src值设置为实际值。 所以是&lt;iframe src="#" /&gt;有效的,还是我需要使用其他东西,如javascript:;等等
73 javascript  html  css  iframe 

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.