XDM是什么？

跨文档消息传递，支持不同源的文档之间传递消息。

XDM的优点是什么？

• 1、XDM可以支持不同源的文档之间通信，也保证了安全性；
• 2、消息传递时允许发送被序列化的数据；

代码实现

page1---html部分

<button>发送给page2</button>
<iframe 
    id="receiverFrame" 
    src="http://127.0.0.1:5500/%E8%84%9A%E6%9C%AC/page2.html" 
    style="width:100%; height:200px; border:1px solid #ccc">
</iframe>

page1---js部分

发送消息给page2

const btn = document.querySelector("button");
btn.addEventListener("click", ()=>{
    const receiverFrame = document.querySelector("#receiverFrame").contentWindow;
    receiverFrame.postMessage("hello,world",'http://127.0.0.1:5500/%E8%84%9A%E6%9C%AC/2.html')
});

监听page2发送的消息

window.addEventListener("message",(event)=>{
    console.log(event.data);
})

page2---html部分

<canvas id="canvasId"></canvas>

page2---js部分

绘制页面

const canvasId = document.querySelector("#canvasId");
const contextCanvas = canvasId.getContext("2d");
contextCanvas.beginPath();
contextCanvas.fillRect(10,10,100,100);
contextCanvas.fillStyle = "red";
contextCanvas.closePath();

监听page1发送的消息和发送消息给page1

 window.addEventListener('message', (event) => {
    console.log(event.data,event.source);
    event.source.postMessage("page1,我收到你的信息了","http://127.0.0.1:5500/%E8%84%9A%E6%9C%AC/1.html")
});

注意：本文归作者所有，未经作者允许，不得转载