js 实现 iframe通信

# 基础信息

# 简介：

iframe作为一个html标签，可以让嵌入任何的html网页

# 属性：

frameborder:是否显示边框，1(yes),0(no)
height:height属性指定了iframe的像素高度，建议使用css設置。
width:width属性指定了iframe的像素宽度，建议使用css設置。
name:iframe的名称，window.frames[name]时专用的属性。
scrolling:iframe是否滚动。yes,no,auto。
src：iframe的网址。
sandbox:控制iframe內的权限(html5新功能)，相关资料：Play safely in sandboxed IFrames - HTML5 RocksHow to Safeguard your Site with HTML5 Sandbox | Microsoft Docs

# 缺点：

1、iframe会阻塞主页面的Onload事件；
2、搜索引擎的检索程序无法解读这种页面，不利于SEO；
3、iframe和主页面共享连接池，而浏览器对同域的连接有限制，所以会影响页面的并行加载；
4.因为iframe等于打开一个新的网页，所有的JS/CSS全部加载一遍，内存会增加；

# iframe非跨域通信

有一点很重要,iframe是可以给name 属性的;给上name 属性可以省下一些代码;

# 父调子

// 父页面
<button id="button">给子页面发消息</button>
<iframe src="http://127.0.0.1:5500/iframe/children.html" name="childrenName"></iframe>
<script>
    var button = document.getElementById('button');
    button.onclick=function(){
        if(childrenName.document.readyState=="complete"){
            childrenName.window.fnChild('hello啊，在吗');  // 向子页面问好
        }
    }
</script>
 
// 子页面
<div id="hhhh">我是子页面</div>
<script>
    function fnChild (arg) {
        console.log(arg);  // 成功打印出‘hello啊，在吗’
    }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

当然以上的前提的话是iframe中的内容已经加载完毕，否则是会报错的;

判断iframe 加载是否完成有2种方法

childrenName.document.readyState == 'complete'来判断；

childrenName.onload = function() {} 使用onload 回调函数,把调用的方法都写在这个回调函数里面

# 子调父

// 父页面
function receive(arg) {
    console.log(arg)
}
 
// 子页面
parent.window.receive('不在');

1
2
3
4
5
6
7

当然我们也会牵扯到父子元素的引用：

# 父页面获取子页面元素操作

我们还是使用上面的html

//原生js 获取子页面window对象
var childWindow = document.getElementById("hhhh").contentWindow;
var childWindow = document.getElementsByTagName('div')[0].contentWindow;
// 其实就是普通的获取方法,只是后面多了一个contentWindow;
// jquery
var childWindow = $('#hhhh').contentWindow;
 
// 获取子页面的document对象 (假设已经通过上面的方法得到了window对象)
var frameDoc = childWindow.document;
var frameBody = frameDoc.body;
// jquery 也是跟上面的一样
var frameDoc = $(childWindow.document);
 
// 原生获取元素
childWindow.document.getElementById('a') // 上面都已经拿到了子页面的window对象,所以获取子页面的元素也就只需要想普通操作那样获取就好
childWindow.document.getElementById('a').style.color='red' // 改个颜色
 
// jq拿子页面元素
$('#f').contents().find('#a'); // $('#f').contents 这相当于拿到了iframe 里面所有的dom;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 子页面访问父页面元素

// 原生js
window.parent.document.getElementById('a'); // window.parent获取到父页面的window对象,那么接可以使用一般操作获取元素
window.parent.document.getElementById('a').style.color="red";// dom操作
// jquery
$("#a",parent.document); // $(父页面元素选择器, parent.document);
$("#a",parent.document).css('border','1px solid red');

1
2
3
4
5
6

# iframe跨域通信

# 父传子

// 父页面
<iframe id="iframe" src="http://test.com/childrenCrossDomain.html" name="childrenName"></iframe>
   
<script>
      let iframe = document.getElementById('iframe');
      function sendToChildren(){
          iframe.contentWindow.postMessage('hello啊，在吗', 'http://test.com')
      }
</script>
 
// 子页面
<script>
      window.addEventListener("message", function(e){
          console.log(e.data)
      });
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 子传父

// 父页面
window.addEventListener('message',function(e){
    console.log(e.data)
})
 
// 子页面
window.parent.postMessage('不在', 'http://父域名');

1
2
3
4
5
6
7

# 父子页面元素操作

跨域情况下是不能直接获取子页面元素的，但如果是同一主域的跨域，如：aaa.test.com和bbb.test.com，可以采用如下方法：

实现的关键点，是在父、子页面都加入一条js语句：

<script language="javascript">
  document.domain = "test.com";
</script>

1
2
3

父页面代码：

<body>
    <div id="parentPage">aaa</div>
</body>
<script type="text/javascript">
  document.domain = "test.com";
  setTimeout(function(){
  //父页面获得子页面某元素的html内容
       console.log(document.getElementById("iframe1").contentWindow.document.getElementById("sonPage").innerHTML);
  },3000);
</script>
<iframe id="iframe1" name="iframe1" style="width:0px;height:0px" src="http://bbb.test.com/test.html">

1
2
3
4
5
6
7
8
9
10
11

子页面代码：

<body>
   <div id="sonPage">bbb</div>
</body>
<script type="text/javascript" >
    document.domain = "test.com";
    //子页面赋html内容给父页面某元素
    window.parent.document.getElementById("parentPage").innerHTML = "123";
</script>

1
2
3
4
5
6
7
8

#JavaScript

上次更新: 2024/01/30, 00:35:17

← js 中的 new 命令原理 js 实现将文本复制到粘贴板→