如何使用“加载图像”显示刷新Iframe网址

时间:2011-07-09 11:02:12

标签: javascript html iframe javascript-events

我希望动画I-Frame加载其源页面。我使用JavaScript代码部分实现了我的目标

function reloadIt()
{
    frm=document.getElementsByName("pagers")[0];      //we get the iframe object
    frm.src=frm.src;        //or you can set the src to a new src
    setTimeout("reloadIt()",100000);         //the function will run every 60000 miliseconds, or 60 seconds
}

我的HTMl Body代码在这里

<body onload="reloadIt()">

和我的IFRAME代码就是这样

<div id="divLoading">
    <div style="width:100%; height:200px; align="center"> 
        <img src="loader.gif" alt="" align="absmiddle"/> 
    </div>
</div>
<div id="divFrameHolder" style="display:none">
    <iframe  src="lead.php" height="450px;" width="100%"  name="pagers"  onload="hideLoading()" > </iframe>`
</div>

这在第一次加载这个html页面时工作正常,我们可以看到在iframe中加载Image直到它的源页面加载。但是在IFrame刷新的时间间隔之后没有加载图像,它只是重新加载它的源页面......任何人都可以帮助我吗?

1 个答案:

答案 0 :(得分:0)

你可以看看BlockUi,一个jquery插件。 (http://jquery.malsup.com/block/#element)。尝试这样的事情:

function reloadIt() {
       $("#iframeholder").block({
            message: '<img src="css/ajax-loader.gif"/>',
            css: { width: "600px;", height: "400px;" }
        });
        $('#pagers').attr('src', $('#pagers').attr("src"));
        $('#iframeholder').unblock()
        setTimeout("reloadIt()", 5000);
}