如何检测 iframe 何时开始加载以及何时完成加载答案

【问题标题】：How do I detect when an iframe starts loading and when it finishes loading如何检测 iframe 何时开始加载以及何时完成加载
【发布时间】：2013-07-27 22:53:27
【问题描述】：

我正在做一个项目，我使用iframe 上传文件。

我需要在iframe 开始上传文件时显示预加载器，并在iframe 完成加载时隐藏预加载器。

谁能帮我解决这个问题？

【问题讨论】：

是否在同一个域中？
是的，它在某个域上
How to detect if the iframe is loaded?的可能重复
最好显示一些粗略的结构，以便我们遵循和建议。基本上，预加载器 gif 可以设置在嵌入 iframe 的页面中。除非你有更复杂的文件/代码结构...

标签： javascript jquery

【解决方案1】：

我找到了解决方案：

这是 iframe 的父文档：

<div id="loader"></div>
<div class="iframeClass">
    <iframe src="myIframe.php" id="myIframe" frameborder="0"></iframe>
</div>
<script type="text/javascript">
    document.getElementById('myIframe').onload = function() {
        document.getElementById('loader').style.display = 'none';
    }
</script>

这是 iframe 文档：

<form action="myIframe.php" method="post" enctype="multipart/form-data" id="myForm">
<input type="file" name="myFile" id="myFile" />
</form>
<script type="text/javascript">
    document.getElementById('myFile').onchange = function() {
        top.document.getElementById('loader').style.display = 'block';
        document.getElementById('myForm').submit();
    }
</script>

尽情享受吧:)))

【讨论】：

【解决方案2】：

你可以试试下面的jquery代码：

$(document).ready(function(){
alert("Iframe Start Loading ...");
       var ifr=$('<iframe></iframe>', {
            id:'frame',
            src:'http://ernagroup.com',
            style:'display:none',
            load:function(){
                $(this).show();
                alert('iframe loaded !');
            }
        });
        $('body').append(ifr);
});

【讨论】：