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

时间 2019-12-04

原文原文链接

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

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

注意地方：

须要在服务器下运行
父级页面须保证页面内容加载完毕，即js获取iframe页面内容须要在window.onload中写

代码示例：

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

test.html框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1 id="parent">父级页面</h1>
    <iframe id="myIframe" src="iframe.html"></iframe>
</body>
<script type="text/javascript">
    // document.onclick = function(){
    window.onload = function(){
        var myIframe = document.getElementById("myIframe").contentWindow
                               .document.getElementById("son").innerText;
        console.log(myIframe)   
    }
</script>
</html>

iframe.html测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1 id="son">子级页面</h1>
</body>
<script type="text/javascript">
    window.onload = function(){
        var sonText = window.parent.document.getElementById("parent").innerText;
        console.log(sonText);
    }
</script>
</html>

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

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

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

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

注意地方：

相关方法：

代码示例：