Iframe正在加载时显示遮罩层

最新推荐文章于 2023-03-14 13:10:56 发布

hsliwei

最新推荐文章于 2023-03-14 13:10:56 发布

阅读量9.9k

点赞数

分类专栏： struts2 文章标签： iframe function jquery 百度 div

struts2 专栏收录该内容

4 篇文章

订阅专栏

遮罩层的代码：

    <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.youkuaiyun.com/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();
            }
        }
    });

这个方便自己查看。