在Iframe里使用window.postMessage

最新推荐文章于 2025-04-20 18:42:10 发布

全智能时代

最新推荐文章于 2025-04-20 18:42:10 发布

阅读量582

点赞数 2

分类专栏：前端文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_31432773/article/details/146418164

版权

前端专栏收录该内容

16 篇文章

订阅专栏

window.postMessage 是一种跨文档通信的方法，允许来自一个文档（例如一个网页或Iframe）向另一个文档发送消息。这在Iframe中使用尤其有用，因为它允许父页面和Iframe之间的安全通信。下面是如何在Iframe中使用 window.postMessage 的步骤和示例：

1. 在父页面中设置监听器
首先，你需要在父页面上设置一个监听器，以便接收来自Iframe的消息。

// 在父页面中
window.addEventListener("message", receiveMessage, false);
 
function receiveMessage(event) {
    // 检查消息来源是否可信
    if (event.origin !== "http://example.com") { // 或者 event.origin !== "https://example.com"
        return;
    }
 
    // 处理消息
    console.log("Received message:", event.data);
}

2. 在Iframe中发送消息
然后，在Iframe内部，你可以使用 window.postMessage 方法发送消息到父页面。

// 在Iframe中
window.parent.postMessage("Hello from iframe!", "http://example.com");

注意事项：
目标来源：在 postMessage 方法中，第二个参数是目标窗口的来源（协议 + 域名 + 端口），这是为了安全考虑，确保消息只被预期的窗口接收。如果不确定来源，可以使用 "*" 作为通配符，但这样做会有安全风险。

跨域限制：如果Iframe的URL与父页面的URL不在同一域（或协议、端口不匹配），则需要正确设置来源，否则消息不会被发送或接收。

安全性：总是验证消息的来源以防止跨站脚本攻击（XSS）。如上例所示，通过检查 event.origin 来确保消息来自预期的源。

示例：完整代码示例

父页面 (parent.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Parent Page</title>
</head>
<body>
    <iframe src="iframe.html" id="myIframe"></iframe>
    <script>
        window.addEventListener("message", receiveMessage, false);
        function receiveMessage(event) {
            if (event.origin !== "http://example.com") { // 或者 "https://example.com"
                return;
            }
            console.log("Received message:", event.data);
        }
    </script>
</body>
</html>

Iframe页面 (iframe.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Iframe Page</title>
</head>
<body>
    <h1>This is an iframe</h1>
    <script>
        window.parent.postMessage("Hello from iframe!", "http://example.com"); // 或者 "https://example.com"
    </script>
</body>
</html>