iframe+postMessage实现跨域通信

最新推荐文章于 2024-04-11 09:10:42 发布

Let dreams fly

最新推荐文章于 2024-04-11 09:10:42 发布

阅读量503

点赞数 1

分类专栏： js 文章标签： iframe postMessage

本文链接：https://blog.csdn.net/weixin_40687883/article/details/100010027

版权

js 专栏收录该内容

51 篇文章 7 订阅

订阅专栏

window方法：postMessage()

该window.postMessage()方法安全地启用Window对象之间的跨源通信；例如，在页面和它产生的弹出窗口之间，或者在页面和嵌入其中的iframe之间。

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

从广义上讲，一个窗口可以获得对另一个窗口的引用（例如，可以使用targetWindow=window.opener），然后使用targetWindow.postMessage() 在其上发送一个MessageEvent。然后，接收窗口可根据需要自由处理此事件。传递给window.postMessage()的参数（即“message”）通过事件对象暴露给接收窗口。

postMessage()方法语法

targetWindow .postMessage（message，targetOrigin，[ transfer ]）;

targetWindow

对将接收消息的窗口的引用。获得此类引用的方法包括：

Window.open （生成一个新窗口然后引用它），
Window.opener （引用产生这个的窗口），
HTMLIFrameElement.contentWindow（<iframe>从其父窗口引用嵌入式），
Window.parent（从嵌入式内部引用父窗口<iframe>）
Window.frames +索引值（命名或数字）。

message

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

targetOrigin

指定要调度的事件的targetWindow的原点，可以是文字字符串"*"（表示没有首选项），也可以是URI。如果在计划调度事件时，targetWindow文档的方案，主机名或端口与targetOrigin提供的内容不匹配，则不会调度该事件；只有当所有的三个条件都匹配时，将调度该事件。该机制可以控制发送消息的位置；例如，如果postMessage()用于传输密码，则该参数必须是URI，其来源与包含密码的消息的预期接收者相同，以防止恶意第三方拦截密码。始终提供具体的targetOrigin，而不是*，如果您知道其他窗口的文档应该位于何处。未能提供特定目标会泄露您发送给任何感兴趣的恶意站点的数据。

transfer（可选的）

是与消息一起传输的Transferable对象序列。这些对象的所有权将提供给目标端，并且它们在发送端不再可用。

已调度的事件

otherWindow可以通过执行以下JavaScript来侦听已分派的消息：

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event)
{
  if (event.origin !== "http://example.org:8080")
    return;

  // ...
}

调度消息的属性是：

data

从另一个窗口传递的对象。

origin

调用当时发送消息的窗口的原点postMessage。此字符串是协议和“：//”的串联，如果存在，则为主机名，如果存在端口，则“：”后跟端口号，并且与给定协议的默认端口不同。典型起源的例子是https://example.org（意味着端口为443），http://example.net（意味着端口为80）和http://example.com:8080。请注意，此来源不保证是该窗口的当前或未来来源，该窗口可能已被导航到调用postMessage后的其他位置。

source

对发送消息的window对象的引用；你可以使用它来建立两个不同来源的窗口之间的双向通信。

代码

a.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>主页面</title>
	</head>
	<body>
		<h1>主页面</h1>
		<iframe id="child" src="http://127.0.0.1:8848/test/b.html"></iframe>
		<button type="button" onclick="sendMessage()">发送新的信息</button>
		<div>
			<h2>主页面接收消息</h2>
			<span id="message"></span>
		</div>
	</body>
	<script>
		var childLinkurl="http://127.0.0.1:8848/test/b.html";
		window.onload = function() {
			document.getElementById('child').contentWindow.postMessage("主页面消息", childLinkurl);
		}
		window.addEventListener('message', function(event) {
			//console.log(event);
			document.getElementById('message').innerHTML = "收到" + event.origin + "消息：" + event.data;
		}, false);
		function sendMessage(){
			document.getElementById('child').contentWindow.postMessage('新消息需要展示',childLinkurl);
		}
	</script>
</html>

b.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>子页面</title>
	</head>
	<body>
		<h2>子页面</h2>
		<div>
			<h3>子页面接收消息区域</h3>
			<span id="message"></span>
		</div>
	</body>
	<script>
		window.addEventListener('message', function(event) {
			if (window.parent !== event.source) {
				return
			}
			//console.log(event);
			document.getElementById('message').innerHTML = "收到" + event.origin + "消息：" + event.data;
			event.source.postMessage("子页面收到" + event.data, event.origin);
		}, false);
	</script>
</html>

Let dreams fly

关注

1
点赞
踩
1

收藏

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

window方法：postMessage()该window.postMessage()方法安全地启用Window对象之间的跨源通信；例如，在页面和它产生的弹出窗口之间，或者在页面和嵌入其中的iframe之间。通常，当且仅当它们源自的页面共享相同的协议、端口号和主机（也称为“同源策略”）时，允许不同页面上的脚本相互访问。window.postMessage()提供一种受控制的机制来安全地规...
复制链接

扫一扫