Parent.html

Question

我有一个创建iframe的函数，它提供一个zip供下载。我想在iframe完成加载后立即触发另一个函数，但我不能通过回显iframe src中的任何内容来做到这一点，因为那个文件头在它的php中。我已经找到了收听加载事件的说明，但似乎有些事情超出了我的理解：

 function downloadZIP(structure) {
ifrm = document.createElement("IFRAME");
ifrm.setAttribute("src", "http://www.example.com/<?=$work_folder?>/zip.php?structure="+structure+"&alpha=<?=$_GET['alpha']?>");
ifrm.style.width = 640+"px";
ifrm.style.height = 480+"px";
ifrm.style.display = "none";
document.body.appendChild(ifrm);

ifrm.onreadystatechange = function() {
        if ( ifrm.readyState == 'complete' ) {
        //iframeIsLoaded();  
        alert('loaded');
        }
    }
}

欢迎纯粹的javascript或jquery建议。

Answer 1

Parent.html

function iframeLoaded() {
    console.log("[[IFRAME LOADED]]");
}

child.html

window.onload = function() {
    parent.iframeLoaded();
}

当加载iframe（child.html）内的文档时，它的最后一个函数是调用父页面上的iframeLoaded()（parent.html）。从子页面调用函数iframeLoaded()时，您可以进行回调或其他任何操作。

另一种方法是在iframe上使用onload event handler。

<iframe id="ifrm" src="demo.html" onload="doSomething()"></iframe>

<script>
document.getElementById('ifrm').onload = function() {
// put your awesome code here
}
</script>

有关iframe的更多信息，请访问here

Answer 2

您可以使用jquery。load（）

当load元素和所有子元素都有时，load事件被发送到元素已完全装满。此事件可以发送到任何元素与URL相关联：图像，脚本，框架，iframe和窗口对象。

$('iframe').load(function(){
alert('loaded');
});

完成加载后创建iframe并监听

2 个答案:

Parent.html

child.html