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操做的一些内容，若是须要进一步了解能够参考示例：