iframe父頁面與子頁面之間的dom操做

如今在頁面裏面用到iframe的狀況愈來愈少了，但有時仍是避免不了，甚至這些頁面之間還須要用js來作交互，那麼這些頁面如何操做彼此的dom呢？下面將會逐步介紹。html

1.父頁面操做子頁面裏面的domgit

下面提供了四中方法來操做iframe裏面的dom:github

a. contentWindow: 以window對象返回iframe中的文檔，全部主流瀏覽器都支持。瀏覽器

用法：dom

// 獲取id爲iframeId的子頁面中的div01元素
document.getElementById('iframeId').contentWindow.document.getElementById('div01')

b. contentDocument: 以document對象返回iframe中的文檔，IE8如下瀏覽器不支持，IE8如下能夠由contentWindow替代。htm

用法：對象

// 獲取id爲iframeId的子頁面中的div02元素
document.getElementById('iframeId').contentDocument.getElementById('div02')

c. window.frames[iframeName]: 經過iframe的name屬性獲取iframe的內容blog

用法：索引

// 獲取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操做的一些內容，若是須要進一步瞭解能夠參考示例：