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技術。詳情請參考相關文檔。