iframe 自適應高度、父子頁面傳值、回調

總結一下最近用iframe遇到的問題與解決辦法：

結構：主頁面main.html，里面套用iframe。iframe不能出現滾動條，自適應子頁面高度。內容多了滾動條是main.html頁面的。

1.  主頁面自適應iframe頁面的高度

這個問題網上的大部分都是自適應靜態iframe頁面，而且代碼較多，對於動態變化的iframe頁面，解決的辦法少。

我的解決辦法很粗狂：獲取iframe頁面的高度，在設置父頁面iframe標簽的高度。兼容性我相信都沒問題吧。

iframe頁面：

setParentHeight()

function setParentHeight(){
    var nowHei=$('body').height();//獲取當前頁面高度
    parent.setIframeHeight(nowHei);//調用父頁面設置高度函數
}

 主頁面：記得設置iframe  scrolling="no"屬性，這樣iframe就沒滾動條了。無邊框是設置 frameborder="0"

//設置iframe高度
function setIframeHeight(hei){
    $('#m-iframe').height(hei)；//m-iframe是ifram的id
}

 （1） 這樣的處理方式很簡單，缺點就是iframe頁面高度動態變化的時候，比如加載更多，這時還是需要調用  setParentHeight  函數來再次設置父頁面iframe標簽的高度。

 

2. 主頁面與iframe頁面傳值和回調。

（1） 主頁面調用iframe頁面的函數： 假如iframe頁面有個add函數：

$('#m-iframe')[0].contentWindow.add();

 　   （a） 主頁面調用iframe都是通過contentWindow來調用iframe頁面的window對象。

　　（b） 傳值就直接傳在調用的函數里面。

（2） iframe頁面調用主頁面函數。

　　 （a） 就如上面的設置高度一樣，通過 parent 就能獲取到主頁面的window對象。

      （b） 傳值就直接傳在調用的函數里面。

（3）回調。 iframe調用父頁面函數，父頁面響應之后返回回調的值。例子：

//主頁面：
var childCallback=null;
$('.box').on('click',function(){
    childCallback(1)
})
function show(callback){
   if(callback && typeof callback ==='function'){
         childCallback=callback;
    }      
}

//iframe頁面：
parent.show(function(statu){
    console.log(statu); 
})

 　　（a）當iframe調用，主頁面click事件響應之后，iframe頁面就會返回回調的值。

　　   （b） 或者是不用定義變量，直接在調用的函數里面綁定點擊事件再回調，不過要注意先取消綁定再綁定，不然會多次觸發

 

3.  iframe的彈窗蒙層需要鋪滿主頁面整個頁面。例如：

（1） 我推薦的一種方式就是整個彈窗的內容放到主頁面里面，iframe只提供觸發顯示的js就行了。

（2） 網上有些說iframe標簽設置absolute和z-index也能達到iframe頁面彈窗在主頁面之上。我試過，不是不行，iframe頁面里的有些內容也會出現在主頁面之上。有時候會導致一些問題。

（3） iframe頁面對於怎么響應並回調在主頁面里面的彈窗，我第二點已經說明了。我認為彈窗放到主頁面這樣的處理方式比較好。

 

4.iframe更改了src之后，不出現后退或者前進按鈕

要實現這種情況，就只有每次更改的時候，就新建一個iframe元素並替換原來的iframe，這樣瀏覽器就不會產生history，后退和前進按鈕就不會激活了

 

 

建議前台頁面最好少用iframe來引入頁面。但是qq郵箱就是用的iframe，為什么我就想不通了。