使用 postMessage + iframe 实现跨域通信

前端贾公子

于 2024-06-12 18:06:45 发布

阅读量750

点赞数 20

文章标签：前端 javascript java

本文链接：https://blog.csdn.net/qq_63358859/article/details/139631561

版权

解决 iframe.postMessage()多次触发请求问题

说明

window.postMessage()方法可以安全地实现Window对象之间的跨域通信。例如，在一个页面和它生成的弹出窗口之间，或者是页面和嵌入其中的iframe之间。

通常情况下，不同页面上的脚本允许彼此访问，当且仅当它们源自的页面共享相同的协议，端口号和主机（也称为“同源策略”）。window.postMessage()提供了一个受控的机制来安全地规避这个限制（如果使用得当的话）。

一般来说，一个窗口可以获得对另一个窗口的引用(例如，通过targetWindow=window.opener)，然后使用targetWindow.postMessage()在其上派发MessageEvent。接收窗口随后可根据需要自行处理此事件。传递给window.postMessage()的参数通过事件对象暴露给接收窗口。

发送端

postMessage程序

var receiver = document.getElementById('receiver').contentWindow;
var btn = document.getElementById('send');
btn.addEventListener('click', function (e) {
    e.preventDefault();
    var val = document.getElementById('text').value;
    receiver.postMessage("Hello "+val+"！", "http://res.42du.cn");
});

发送消息的基本语法：

targetWindow.postMessage(message, targetOrigin, [transfer]);

targetWindow

targetWindow就是接收消息的窗口的引用。获得该引用的方法包括：

Window.open
Window.opener
HTMLIFrameElement.contentWindow
Window.parent
Window.frames +索引值

message

message就是要发送到目标窗口的消息。数据使用结构化克隆算法进行序列化。这意味着我们可以将各种各样的数据对象安全地传递到目标窗口，而无需自己对其进行序列化。

targetOrigin

targetOrigin就是指定目标窗口的来源，必须与消息发送目标相一致，可以是字符串“”或URI。 表示任何目标窗口都可接收，为安全起见，请一定要明确提定接收方的URI。

transfer

transfer是可选参数

接收端

目标窗口通过执行下面的JavaScript来侦听发送过来的消息：

window.addEventListener("message", receiveMessage, false);
function receiveMessage(event){
  if (event.origin !== "http://www.42du.cn")
    return;
}

event对象有三个属性，分别是origin，data和source。event.data表示接收到的消息；event.origin表示postMessage的发送来源，包括协议，域名和端口；event.source表示发送消息的窗口对象的引用; 我们可以用这个引用来建立两个不同来源的窗口之间的双向通信。

完整程序

发送程序

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>42度空间-window.postMessage()跨域消息传递</title>
</head>
<body>
<div>
    <input id="text" type="text" value="42度空间" />
    <button id="send" >发送消息</button>
</div>
<iframe id="receiver" src="http://res.42du.cn/static/html/receiver.html" width="500" height="60">
    <p>你的浏览器不支持IFrame。</p>
</iframe>
<script>
    window.onload = function() {
        var receiver = document.getElementById('receiver').contentWindow;
        var btn = document.getElementById('send');
        btn.addEventListener('click', function (e) {
            e.preventDefault();
            var val = document.getElementById('text').value;
            receiver.postMessage("Hello "+val+"！", "http://res.42du.cn");
        });
    }
</script>
</body>
</html>

接收程序

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>42度空间-从www.42du.cn接收消息</title>
</head>
<body>
<div id="message">
    Hello World!
</div>
<script>
    window.onload = function() {
        var messageEle = document.getElementById('message');
        window.addEventListener('message', function (e) {
            alert(e.origin);
            if (e.origin !== "http://www.42du.cn") {
                return;
            }
            messageEle.innerHTML = "从"+ e.origin +"收到消息： " + e.data;
        });
    }
</script>
</body>
</html>

解决 iframe.postMessage()多次触发请求问题

预览会触发多次事件的代码：

window.addEventListener("message", function(event) {
    console.log('event === ', event);
});

修改后的有效代码：

window.onmessage = function(event){
    console.log('event === ', event);
};

使用 window.onmessage 作为事件处理器和使用 addEventListener 方法添加 message 事件监听器在功能上是相似的，但它们之间存在一些差异，这些差异可能解释了为什么使用 addEventListener 时事件被多次触发，而使用 onmessage 时则没有这个问题。

事件监听器的覆盖：

当你使用 window.onmessage = function(event) {...} 时，你实际上是在设置 window 对象的 onmessage 属性。这意味着这个属性会被设置为一个新的函数，如果之前已经设置了，那么之前的函数会被新函数覆盖。
而 addEventListener 允许你添加多个监听器，它们都会被调用。如果你多次调用 addEventListener 为同一个事件添加监听器，那么每个监听器都会被触发。

因此，如果你发现使用 addEventListener 时事件被多次触发，而使用 onmessage 时没有这个问题，可能是因为 addEventListener 被多次调用，或者存在代码逻辑上的错误。使用 onmessage 属性可以避免这些问题，因为它总是覆盖而不是添加新的监听器。

前端贾公子

关注

20
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
使用 postMessage + iframe 实现跨域通信

一般来说，一个窗口可以获得对另一个窗口的引用(例如，通过targetWindow=window.opener)，然后使用targetWindow.postMessage()在其上派发MessageEvent。通常情况下，不同页面上的脚本允许彼此访问，当且仅当它们源自的页面共享相同的协议，端口号和主机（也称为“同源策略”）。例如，在一个页面和它生成的弹出窗口之间，或者是页面和嵌入其中的iframe之间。表示任何目标窗口都可接收，为安全起见，请一定要明确提定接收方的URI。时事件被多次触发，而使用。
复制链接

扫一扫