js如何获取iframe页面内的对象

简单介绍iframe标签，所有的浏览器都支持<iframe>标签，iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。通常我们常用的iframe标签的属性有：width（iframe 的宽度）、height（iframe 的高度）、frameborder（显示框架周围的边框）、src（iframe 中显示的文档的 URL）。

那么如何使用js来获取iframe页面内的对象呢，以及反过来说内嵌的iframe页面又该如何得到父级页面的对象？

注意地方：

1.需要在服务器下运行

2.父级页面须保证页面内容加载完毕，即js获取iframe页面内容需要在window.onload中写

相关方法：

1.父级页面获取iframe页面中的元素对象（关键contentWindow）：

document.getElementById(iframe的id).contentWindow.document.getElementById(iframe页面元素id)

2.iframe页面获取父级页面的元素对象（关键window.parent）：

window.parent.document.getElementById(父级页面的元素id)

代码示例：

说明：父级页面test.html，iframe子级页面：iframe.html

test.html

iframe.html

在服务器下打开test.html文件，chrome浏览器测试结果：

iframe.html先获取到它的父级页面test.html的h1元素的内容“父级页面”，并输出在控制台；

然后到text.html页面获取iframe.html中的h1元素的内容“子级页面”，并输出在控制台。