iframe的常規(guī)用法就不說了,就那么用,這里總結(jié)一下iframe里其他的用法和功能
1.iframe高度自適應
iframe的高度自適應需要獲取iframe文檔的實際高度,然后給引入文件的iframe標簽設置行高.設置方法是通過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標簽設置高度,從而實現(xiàn)自適應高度的效果.同樣也能獲取iframe文檔流里的元素
iframe.onload = function(){
console.log(this.contentWindow.document.getElementsByTagName("span"));
}
2.點擊iframe修改父級元素
跟上面的過程正好相反,上面需要在父級上找到iframe的高度然后設置,這個需要在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的跨域請求,還是算了吧,別要強了.
