大略先容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元素的内容“子级页面”,并输出在掌握台。