iframe通信iframe 使用iframe可以在网页中嵌入子页面,那么就会涉及到页面的通信了这里先说下页面通信的流

iframe

使用iframe可以在网页中嵌入子页面,那么就会涉及到页面的通信了

这里先说下页面通信的流程

1. 同源通信

父页面

<iframe src="./child.html"  id="ii" frameborder="0"></iframe>

假如父页面要实时的将参数传递给子页面,那么可以在子页面中定义一个函数

子页面

<script>
    function on(res){
        console.log(res)
    }
</script>

父页面需要调用子页面的方法,那么就要先获取子页面的实例

父页面获取子页面的上下文

通过document.getElementById()等选择器的方式来获取当前的子页面iframe

let child = document.getElementById("ii");

获取子页面的window

因为子页面中是全局声明的on函数,函数自然会被挂载到window对象上,所以要先获取child的window对象,在chrome中可以通过子frame.contentWindow属性来获取子iframe的window对象

注意📢:

iframe通信会涉及到跨域问题,所以两个页面都要在同源的情况下才能互相通信

必须要等到页面中iframe也加载完成了才能获取上下文,所以可以通过window.onload或者document.onreadystatechange来进行监听

通过子页面的onload来回调中获取,

以下代码写到父页面 ↓↓↓

<iframe src="./child.html"  id="ii" frameborder="0"></iframe>

<script>
  let child = document.querySelector("#ii")//获取子页面
  child.onload = function(){
    console.log(this.contentWindow)
    console.log(this.contentWindow.document)//获取document
  }
</script>

通过父页面的document.onreadystatechange

<script>
  document.onreadystatechange = function(){
    if(document.readyState==="complete"){
      //....
      //操作iframe 传递参数
      child.contentWindow.on('999')
      
    }
  }
</script>

2.document.readyState

这个是document的一个加载状态

interactive 交互页面dom元素已经加载但是所有的源文件资源没有加载
complete 所有的资源都加载完毕
速度都比onload快

3.iframe 跨域传递参数

postMessage

使用postmessage这个方法可以实现iframe的跨域传参

参数说明:

第一个参数是父页面要传递的内容
第二个参数写子页面对应的的源(url地址)

父页面

child.contentWindow.postMessage("摸鱼欧阳锋","http://localhost:5500/1.html")

子页面

在子页面中,通过window.onmessage这个事件来监听,并且传入一个参数,就能获取到父页面传递的值了

window.onmessage = function(e){
        console.log(e.data)//摸鱼欧阳锋
    }

用法:

我们需要在父页面中,注册子页面的load事件中执行代码

<body>
    <h1>父页面</h1>
    <iframe id="child" src="http://localhost:5500/1.html" height="200" frameborder="0"></iframe>
</body>
<script>
    let child = document.querySelector("#child");//获取子页面
    child.onload = function(){//子页面的load事件
        child.contentWindow.postMessage("p2c","http://localhost:5500/1.html")
    }
</script>

📢注意:iframe连接的页面不能是file协议