网页和 iframe 如何通讯

• 使用 postMessage 通讯
• 使用 window.addEventListener("message",()=>{} 来接收 数据
• 注意 跨域的限制和判断

案例

// index.html
<p>
    <button id="btn1">向子页面发送消息</button>
</p>
<iframe id="iframe1" src="./child.html"></iframe>

<script>
    const btn1 = document.getElementById("btn1");
    btn1.addEventListener("click", () => {
        console.log("index clicked");
        // postMessage 有两个参数 第一个参数是发送的信息，第二个参数是域名限制
     window.iframe1.contentWindow.postMessage("index", "*");
    })

    // 接收信息
    window.addEventListener("message", event => {
        console.log("origin", event.origin);  // 来源的域名
        console.log("index received", event.data);
    })
</script>

// child.html
<button id="btn1">向主页面发送消息</button>

<script>
    const btn1 = document.getElementById("btn1");
    btn1.addEventListener("click", () => {
        console.log("child clicked");
        // 子页面向父页面发送消息
        window.parent.postMessage("child", "*");
    })
    
    // 父页面接收消息
    window.addEventListener("message", event => {
        console.log("origin", event.origin); // 判断 origin 的合法性
        console.log("child received", event.data);
    })
</script>