iframe内部需要弹出浮层问题

需求场景：

1．  页面内有多级iframe嵌套。

2．  iframe内部某些按钮点击后需要弹出浮层。

3．  浮层需要将整个浏览器窗口遮罩，且浮层位于浏览窗口中部。

 

效果如下： 

 

解决思路：

1. 顶层页面内预留用于显示浮层的div(命名为popdiv),且该div内有一预留的iframe，该iframe用于加载浮层内容，命名为popiframe
2. 提供可以直接访问浮层内容的url连接
3. iframe触发显示浮层事件时，通过window.top 设置顶层窗口的popiframe.src。
4. 通过计算浮层内容的长宽及当前窗口的长宽设置popdiv的位置，使其在窗口中央显示。

 

 

 

实现：

顶层页面相关html代码：

<div id="mask" style="display:none;"></div>

 

<div id="id_popdiv" style="display:none;" class="popup">

    <iframe id="id_popiframe" src="" frameborder="0" scrolling="no" width="100%" height="100%">

    </iframe>

</div>

 

iframe有点击按钮的html代码

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

 

<a href="javascript:pop('popcontenturl',782,600);" class="link" rel="1">show pop content</a><br />

 

popcontenturl 页面中的关闭的主要代码：

<script type="text/javascript" src="js/showhide.js" charset="utf-8"></script>

<div class="pop_container">

         <a href="javascript:unpop();" title="关闭" class="close"></a>

         <h2 class="title">浮层标题</h2>

    <div class="pop_content">

       浮层内容

…

    </div>

</div>

 

 

主要js代码(popmanager.js)

function getWindowScrollTop(win){

         var scrollTop=0;

         if(win.document.documentElement&&win.document.documentElement.scrollTop){

                   scrollTop=win.document.documentElement.scrollTop;

         }else if(win.document.body){

                   scrollTop=win.document.body.scrollTop;

         }

         return scrollTop;

}

function setWindowScrollTop(win, topHeight)

{

    if(win.document.documentElement)

    {

        win.document.documentElement.scrollTop = topHeight;

    }

    if(win.document.body){

        win.document.body.scrollTop = topHeight;

    }

}

function getWindowScrollLeft(win){

         var scrollLeft=0;

         if(win.document.documentElement&&win.document.documentElement.scrollLeft){

                   scrollLeft=win.document.documentElement.scrollLeft;

         } else if(win.document.body){

                   scrollLeft=win.document.body.scrollLeft;

         }

         return scrollLeft;

}

function getWindowHeight(win){

         var clientHeight=0;

         if(win.document.body.clientHeight&&win.document.documentElement.clientHeight){

                   clientHeight = (win.document.body.clientHeight<win.document.documentElement.clientHeight)?

            win.document.body.clientHeight:win.document.documentElement.clientHeight;

         }else{

                   clientHeight = (win.document.body.clientHeight>win.document.documentElement.clientHeight)?

            win.document.body.clientHeight:win.document.documentElement.clientHeight;

         }

         return clientHeight;

}

function getWindowWidth(win){

         var clientWidth=0;

         if(win.document.body.clientWidth&&win.document.documentElement.clientWidth){

                   clientWidth = (win.document.body.clientWidth<win.document.documentElement.clientWidth)?

            win.document.body.clientWidth:win.document.documentElement.clientWidth;

         }else{

                   clientWidth = (win.document.body.clientWidth>win.document.documentElement.clientWidth)?

            win.document.body.clientWidth:win.document.documentElement.clientWidth;

         }

         return clientWidth;

}

 

function unpop()

{

    try{

        var win = (top && top!=self)?top:window;

    }

    catch(e)

    {

        return ;

    }

   

    win.document.getElementById('mask').style.display = "none";

    win.document.getElementById("id_popdiv").style.display = "none";

    win.document.getElementById("id_iframe_pop").setAttribute('src', '');

   

}

 

function pop(url,width,height)

{

    try{

        var win = (top && top!=self)?top:window;

    }

    catch(e)

    {

        return ;

    }

   

   

    var topWindowHeight = getWindowHeight(win);

    var topWindowWidth = getWindowWidth(win);

 

    var lvTop=parseInt((topWindowHeight-height)/2)+parseInt(getWindowScrollTop(win));

    var lvLeft=parseInt((topWindowWidth-width)/2)+parseInt(getWindowScrollLeft(win));

    lvTop = lvTop<=0?1:lvTop;

    lvLeft = lvLeft<=0?1:lvLeft;

   

 

    win.document.getElementById("id_popdiv").style.top=lvTop+"px";

    win.document.getElementById("id_popdiv").style.left=lvLeft+"px";

    win.document.getElementById("id_popdiv").style.margin="0";

   

    win.document.getElementById("id_iframe_pop").setAttribute('src', url);

 

            

    win.document.getElementById("id_iframe_pop").setAttribute('width', width);

    win.document.getElementById("id_iframe_pop").setAttribute('height', height);

   

    win.document.getElementById('mask').style.display = "block";

    win.document.getElementById("id_popdiv").style.display = "block";

}

 

 

 

 

附：

应用较多的div浮层技术为基于jquery的blockUI技术。详情请参考相关文档。