IFrame父頁面和子頁面的交互
阿新 • • 發佈:2017-09-28
targe fix content ava 所有 屬性獲取 entry 地址 arc
現在在頁面裏面用到iframe的情況越來越少了,但有時還是避免不了,甚至這些頁面之間還需要用js來做交互,那麽這些頁面如何操作彼此的dom呢?下面將會逐步介紹。
1.父頁面操作子頁面裏面的dom
下面提供了四中方法來操作iframe裏面的dom:
a. contentWindow: 以window對象返回iframe中的文檔,所有主流瀏覽器都支持。
用法:
// 獲取id為iframeId的子頁面中的div01元素
document.getElementById(‘iframeId‘).contentWindow.document.getElementById(‘div01‘)
b. contentDocument: 以document對象返回iframe中的文檔,IE8以下瀏覽器不支持,IE8以下可以由contentWindow替代。
用法:
// 獲取id為iframeId的子頁面中的div02元素
document.getElementById(‘iframeId‘).contentDocument.getElementById(‘div02‘)
c. window.frames[iframeName]: 通過iframe的name屬性獲取iframe的內容
用法:
// 獲取name為iframeName的子頁面中的div01元素
window.frames[‘iframeName‘].document.getElementById(‘div01‘)
d. window.frames[iframeIndex]: 通過iframe在頁面中的索引值獲取iframe的內容
// 獲取iframe索引值為0的子頁面中的div01元素
window.frames[0].document.getElementById(‘div01‘)
2.子頁面操作父頁面裏面的dom
子頁面操作父頁面的dom可以通過window.parent或者window.top來實現,parent代表父頁面,top代表最頂級頁面。
用法:
// 獲取父頁面中id為menu的元素,window.parent可簡寫為parent
window.parent.document.getElementById(‘menu‘)
Ok,以上就是關於iframe父子頁面之間dom操作的一些內容,如果需要進一步了解可以參考示例:
示例地址:http://wangchi.github.io/blogdemos/2015/01/js-iframe-dom/js-iframe-dom.html
源碼:https://github.com/wangchi/wangchi.github.io/tree/master/blogdemos/2015/01/js-iframe-dom
原文地址:http://hao.jser.com/archive/5388/IFrame父頁面和子頁面的交互