IFRAME完成加载时的Javascriptcallback?

当IFRAME完成加载时,我需要执行一个callback。 我无法控制IFRAME中的内容,所以我无法从那里触发callback。

这个IFRAME是编程创build的,我需要在callback中将其数据作为variables传递,并且销毁iframe。

有任何想法吗?

编辑:

这是我现在拥有的:

function xssRequest(url, callback) { var iFrameObj = document.createElement('IFRAME'); iFrameObj.src = url; document.body.appendChild(iFrameObj); $(iFrameObj).load(function() { document.body.removeChild(iFrameObj); callback(iFrameObj.innerHTML); }); } 

这个callback在iFrame加载之前,所以callback没有数据返回。

首先,通过函数名称xssRequest,这听起来像你正在尝试跨站请求 – 如果这是正确的,你将无法读取iframe的内容。

另一方面,如果iframe的URL在您的域名上,您可以访问正文,但是我发现如果使用超时删除iframe,callback将正常工作:

 // possibly excessive use of jQuery - but I've got a live working example in production $('#myUniqueID').load(function () { if (typeof callback == 'function') { callback($('body', this.contentWindow.document).html()); } setTimeout(function () {$('#frameId').remove();}, 50); }); 

我正在使用jQuery,令人惊讶的是这似乎加载,因为我刚刚testing并加载了一个沉重的页面,我没有得到警报几秒钟,直到我看到iframe加载:

 $('#the_iframe').load(function(){ alert('loaded!'); }); 

所以,如果你不想使用jQuery看看他们的源代码,看看这个函数的行为与iframe的DOM元素是不一样的,我会后来自己看看,我感兴趣,并在这里发表。 此外,我只testing在最新的铬。

您的iframe的innerHTML是空的,因为您的iframe标记不包围父文档中的任何内容。 为了从iframe的src属性引用的页面获取内容,您需要访问iframe的contentDocument属性。 如果src来自不同的域,则会引发exception。 这是一项安全function,可防止您在其他人的页面上执行任意JavaScript,从而导致跨站脚本漏洞。 下面是一些示例代码,说明我在说什么:

 <script src="assets/2009/8/31/prototype.js" type="text/javascript"></script> <h1>Parent</h1> <script type="text/javascript"> function on_load(iframe) { try { // Displays the first 50 chars in the innerHTML of the // body of the page that the iframe is showing. // EDIT 2012-04-17: for wider support, fallback to contentWindow.document var doc = iframe.contentDocument || iframe.contentWindow.document; alert(doc.body.innerHTML.substring(0, 50)); } catch (e) { // This can happen if the src of the iframe is // on another domain alert('exception: ' + e); } } </script> <iframe id="child" src="iframe_content.html" onload="on_load(this)"></iframe> 

为了进一步的例子,尝试使用这个iframe的内容:

 <h1>Child</h1> <a href="http://www.google.com/">Google</a> <p>Use the preceeding link to change the src of the iframe to see what happens when the src domain is different from that of the parent page</p> 

如果word文档和pdf等文档正在stream向iframe,并find一个可以很好地工作的解决scheme,我就必须这样做。 关键是处理iframe上的onreadystatechanged事件。

可以说,你的框架的名称是“myIframe”。 首先在代码启动的某处(我在iframe之后的任何位置执行内联操作)添加如下内容来注册事件处理程序:

 document.getElementById('myIframe').onreadystatechange = MyIframeReadyStateChanged; 

我不能够在iframe上使用onreadystatechage属性,我不记得为什么,但应用程序必须在IE 7和Safari 3中工作,这可能是一个因素。

这是一个如何获得完整状态的例子:

 function MyIframeReadyStateChanged() { if(document.getElementById('myIframe').readyState == 'complete') { // Do your complete stuff here. } } 

我想隐藏等待微调div当我的框架内容是完全加载在IE浏览器,我试图从字面上提到每个解决scheme中提到的Stackoverflow.Com,但没有任何工作,因为我想。

然后我有一个想法,当我的框架内容被完全加载,$(窗口)加载事件可能会被解雇。 而那到底发生了什么。 所以,我写了这个小脚本,像魔术一样工作:

  $(window).load(function () { //alert("Done window ready "); var lblWait = document.getElementById("lblWait"); if (lblWait != null ) { lblWait.style.visibility = "false"; document.getElementById("divWait").style.display = "none"; } }); 

希望这可以帮助。

我在我的项目中有一个类似的代码,工作正常。 调整我的代码到你的function,解决scheme可能是以下几点:

 function xssRequest(url, callback) { var iFrameObj = document.createElement('IFRAME'); iFrameObj.id = 'myUniqueID'; document.body.appendChild(iFrameObj); iFrameObj.src = url; $(iFrameObj).load(function() { callback(window['myUniqueID'].document.body.innerHTML); document.body.removeChild(iFrameObj); }); } 

也许你有一个空的innerHTML,因为(一个或两个原因):1.你应该使用它的身体元素2.你已经从你的页面DOM的iframe

我认为负载事件是正确的。 什么是不正确的是你用来从iframe内容中检索内容的方式。

你需要的是加载在iframe中的页面的html而不是iframe对象的html。

你所要做的就是用iFrameObj.contentDocument访问内容文档。 如果它位于当前页面的同一个域中,则返回在iframe中加载的页面的dom。

在删除iframe之前,我会检索内容。

我已经在Firefox和歌剧testing。

那么我认为你可以用$(childDom).html()$(childDom).find('some selector') ...来检索你的数据$(childDom).find('some selector') ...

我和你有类似的问题。 我所做的是我使用的东西叫jQuery。 然后你在JavaScript代码中做的是这样的:

 $(function(){ //this is regular jQuery code. It waits for the dom to load fully the first time you open the page. $("#myIframeId").load(function(){ callback($("#myIframeId").html()); $("#myIframeId").remove(); }); }); 

看起来像你删除你的iFrame之前,你从中获取的HTML。 现在,我确实看到一个问题:p

希望这可以帮助 :)。

过去我也遇到了同样的问题,我发现修复这个问题的唯一方法是将callback添加到iframe页面中。 当然,只有当你拥有对iframe内容的控制时才有效。