Iframe正在加载时显示遮罩层

说明：当点击一个超链接时，会使iframe加载某个页面。点击时显示遮罩层，当Iframe将目标页面加载完毕时，遮罩层隐藏。

 

遮罩层的代码：

    <div id="iframeFather" style="z-index: 949; position: absoult; filter: alpha(opacity=10);
        width: 100%; height: 100%; top: 0px; left: 0px; display:none;background-color:#000;
" >
    </div>

将这个层放到有Iframe的页面上。

  <iframe id="mainFrame" name="mainFrame" src="http://blog.csdn.net/gaofang2009" scrolling="no" frameborder="0"
        framespacing="0" style="width: 100%; margin: 0px 0px 0px 0px; padding-left: 2px;">
    </iframe>

其中：frameborder="0"        framespacing="0"  使iframe没有凹下去的感觉。

超链接的写法为

<div id="MenuTb">

<a target="mainFrame" href="http://www.baidu.com">显示百度</a>

</div>

用jquery写的方法来实现点击是显示遮罩层，iframe加载完毕后遮罩层隐藏：

    $('#MenuTb').find('a[target="mainFrame"]').click(function () {
        $("#iframeFather").show();
    });
    $("#mainFrame").bind({
        "readystatechange": function () {
            if (this.readyState == 'complete') {
                $("#iframeFather").hide();
            }
        }
    });

这个方便自己查看。