iframe的常規(guī)用法就不說了,就那么用,這里總結(jié)一下iframe里其他的用法和功能

1.iframe高度自適應(yīng)

iframe的高度自適應(yīng)需要獲取iframe文檔的實際高度,然后給引入文件的iframe標簽設(shè)置行高.設(shè)置方法是通過JS獲取iframe的contentWindow屬性,獲取iframe文檔的高度.

 // HTML
<iframe id="iframe" src="test22.html" frameborder="1"></iframe>
// JS
var iframe = document.getElementById("iframe");
iframe.onload = function(){
    this.height = this.contentWindow.document.documentElement.scrollHeight;
}

當瀏覽器加載iframe的時候,會創(chuàng)建一個新的window對象出來, contentWindow就是由加載iframe創(chuàng)建的window對象,然后通過獲取contentWindow的實際高度,然后給iframe標簽設(shè)置高度,從而實現(xiàn)自適應(yīng)高度的效果.同樣也能獲取iframe文檔流里的元素

iframe.onload = function(){
    console.log(this.contentWindow.document.getElementsByTagName("span"));
}

2.點擊iframe修改父級元素

跟上面的過程正好相反,上面需要在父級上找到iframe的高度然后設(shè)置,這個需要在iframe上找到父級的DOM,然后進行修改

// 子元素的點擊方法
btn.onclick = function(){
    window.parent.document.getElementsByTagName("div")[0].innerHTML = 2;
}

window.parent就是父級窗口,能找到所有父級的DOM元素

3.iframe 父級和子級方法相互調(diào)用

父級的JS代碼

var iframe = document.getElementById("iframe");
function dian(){
        // son()是子級的函數(shù)名
    console.log(iframe.contentWindow.son());
}

子級的JS代碼

 var btn = document.getElementById("btn");
btn.onclick = function(){
        // 父級頁面的函數(shù)名
       window.parent.father();
}

4.iframe的跨域

iframe也可以像jsonp那樣獲取數(shù)據(jù),數(shù)據(jù)顯示在iframe里,但是有別于jsonp的獲取方式,iframe能顯示,但是無法獲得子元素里的內(nèi)容,這涉及到安全問題,所以想通過iframe的方式實現(xiàn)jsonp的跨域請求,還是算了吧,別要強了.