遮盖显示父子页面

最新推荐文章于 2024-01-11 13:28:01 发布

Lloyd2008

最新推荐文章于 2024-01-11 13:28:01 发布

阅读量123

点赞数

分类专栏： web页面技术文章标签： IE

本文链接：https://blog.csdn.net/Lloyd2008/article/details/83695229

版权

web页面技术专栏收录该内容

13 篇文章 0 订阅

订阅专栏

在FF中 iframe显示还有问题 IE6中测试可以

1.parent.aspx


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script src="js/coverlayer.js" type="text/javascript"></script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
    <h3>Parent.aspx</h3>
     <input  style="background-color" id="txtParent" type="text"  />
      <input  id="Button1" type="button" value="select" onclick="createCoverLayer()" />


    </div>
    </form>
</body>
</html>

2.child.aspx


<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <script src="js/coverlayer.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
        <h3>Child.aspx</h3>
          <input  id="txtChild" type="text"  />
      <input  id="Button1" type="button" value="确定" onclick="returnVal()" />
    </form>
</body>
</html>

3.js

function createCoverLayer() {
    var coverLayer = document.createElement("div");
    coverLayer.id = "divCover";
    coverLayer.style.position = "absolute";
    coverLayer.style.top = 0;
    coverLayer.style.left = 0;
    coverLayer.style.height = "100%"; //FF不支持screen.height
    coverLayer.style.width = "100%";
    coverLayer.style.backgroundColor = "gray";
    coverLayer.style.filter = "Alpha(Opacity=60)"; //for IE
    coverLayer.style.opacity = "0.6"; //for FF

    var showLayer = document.createElement("div");
    showLayer.id = "divShow";
    showLayer.style.position = "absolute";
    showLayer.style.height = "700px";
    showLayer.style.width = "700px";
    showLayer.style.top = "150px";
    showLayer.style.left = "280px";
    var iframe = document.createElement("iframe");
    //    var iframe = document.createElement(" <iframe src='Child.aspx' width='500px' height='500px' frameborder='0'></iframe>");
    //FF不支持上面的写法
    iframe.src = "Child.aspx";
    iframe.style.width = "400px";
    iframe.style.height = "400px";
    iframe.frameborder = 0;
    showLayer.appendChild(iframe);

    document.body.appendChild(coverLayer);
    document.body.appendChild(showLayer);


}

function returnVal() {
    var gift = document.getElementById("txtChild").value;
    //获取父页面的docunment
    var winParent = window.parent.document;
    winParent.getElementById("txtParent").value = gift;
   //移除遮盖层
    winParent.body.removeChild(winParent.getElementById("divCover"));
    //移除iframe层
    winParent.body.removeChild(winParent.getElementById("divShow"));



}