> @author: 郭瑞峰 > @createTime: 2023/08/04 > @updateTime: 2023/08/21 iframe之间的通信可以通过window.postMessage()方法来实现。这个方法可以在不同的窗口或iframe之间发送消息。具体来说，你可以在一个iframe中调用postMessage()方法，向包含它的父窗口发送消息，或者向同级的另一个iframe发送消息。接收消息的窗口需要在其JavaScript代码中添加一个事件监听器，以便在接收到消息时做出相应的处理。 ### 父元素 ```html <!DOCTYPE html> <html> <head> <title>Parent Window</title> </head> <body> <iframe id="frame1" src="frame1.html"></iframe> <iframe id="frame2" src="frame2.html"></iframe> <script> // 获取iframe元素 var frame1 = document.getElementById("frame1"); var frame2 = document.getElementById("frame2"); // 为每个iframe添加事件监听器 window.addEventListener("message", function(event) { if (event.source == frame1.contentWindow) { console.log("Received message from frame1: " + event.data); } else if (event.source == frame2.contentWindow) { console.log("Received message from frame2: " + event.data); } }, false); </script> </body> </html> ``` ### 子元素 ```html <!DOCTYPE html> <html> <head> <title>Frame 1</title> </head> <body> <h1>Frame 1</h1> <script> // 向父窗口发送消息 window.parent.postMessage("Hello from frame 1!", "*"); </script> </body> </html> ``` 最后修改：2023 年 08 月 21 日 © 允许规范转载 赞 0 如果觉得我的文章对你有用，请随意赞赏