当前位置:  开发笔记 > 编程语言 > 正文

IFRAME加载完成后的Javascript回调?

如何解决《IFRAME加载完成后的Javascript回调?》经验,为你挑选了5个好方法。

我需要在IFRAME加载完成后执行回调.我无法控制IFRAME中的内容,因此我无法从那里触发回调.

这个IFRAME是以编程方式创建的,我需要将其数据作为回调中的变量传递,并销毁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);
    });
}

在iFrame加载之前进行此回调,因此回调没有返回数据.



1> Remy Sharp..:

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

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

// 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的情况下做到这一点吗?
+1用于理解XSS,然后回答问题.
从jQuery 3.0开始,`load`消失了.请改用`.on('load',function(){...})`.
你可以用`this.contentDocument.body.outerHTML'替换`$('body',this.contentWindow.document).html()`

2> Neo..:

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

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

因此,如果您不想使用jQuery,请查看其源代码并查看此函数是否与iframe DOM元素的行为不同,稍后我会自己查看它,因为我感兴趣并在此处发布.此外,我只测试了最新的铬.


从jQuery 3.0开始,`load`消失了.请改用`.on('load',function(){...})`.

3> allyourcode..:

iframe的innerHTML为空,因为您的iframe代码不会包含父文档中的任何内容.要从iframe的src属性引用的页面中获取内容,您需要访问iframe的contentDocument属性.如果src来自不同的域,则会抛出异常.这是一项安全功能,可以防止您在其他人的页面上执行任意JavaScript,这会产生跨站点脚本漏洞.这是一些示例代码,说明了我在说什么:



Parent

要进一步举例,请尝试将其用作iframe的内容:

Child

Google

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



4> Ryan Cook..:

如果将word docs和pdf等文档流式传输到iframe并找到一个效果很好的解决方案,我必须这样做.关键是onreadystatechanged在iframe上处理事件.

让我们说你的框架的名称是"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.
    }
}



5> Nada N. Hant..:

当i帧内容在IE上完全加载时,我想隐藏等待的微调器div,我尝试了Stackoverflow.Com中提到的每个解决方案,但没有任何工作,因为我想要的.

然后我有一个想法,当i帧内容完全加载时,可能会触发$(Window)加载事件.而这正是发生的事情.所以,我写了这个小脚本,像魔术一样工作:

     $(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";
     }
 });

希望这可以帮助.

推荐阅读
臭小子
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有