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

时间:2013-07-27 20:34:36

标签: javascript jquery

我正在开展一个项目,我使用iframe上传文件。

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

有人可以帮我吗?

2 个答案:

答案 0 :(得分:2)

我找到了解决方案:

这是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>

享受家伙:)))

答案 1 :(得分:0)

您可以尝试以下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);
});