HTML5 Web API:postMessage

最新推荐文章于 2024-01-08 11:26:21 发布

回忆里的褶皱

最新推荐文章于 2024-01-08 11:26:21 发布

阅读量415

点赞数

分类专栏： Web相关

本文链接：https://blog.csdn.net/x728999452/article/details/52048982

版权

Web相关专栏收录该内容

12 篇文章 0 订阅

订阅专栏

postMessage允许每一个window对象向其他窗口发送文本消息，实现跨窗口的消息传递。不受同源策略限制。

Mozilla Developer Network这么说：window.postMessage 是一个用于安全的使用跨源通信的方法。通常，不同页面上的脚本只在这种情况下被允许互相访问，当且仅当执行它们的页面所处的位置使用相同的协议（通常都是 http）、相同的端口（http默认使用80端口）和相同的主机（两个页面的document.domain 的值相同）。在正确使用的情况下，window.postMessage 提供了一个受控的机制来安全地绕过这一限制。

示例:

send.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>postMessage send</title>
</head>
<body>
	<iframe src="receive.html" id="iframe"></iframe>
	<form id="form">
		<input type="text" id="msg" value="Message to send"/>
		<input type="submit" value="submit"/>
	</form>
	<script type="text/javascript">
		window.οnlοad=function() {
			var win = document.getElementById("iframe").contentWindow;
			document.getElementById("form").onsubmit = function (e)
			{
				win.postMessage(document.getElementById("msg").value,"*");
				//第二个参数为提供的目标源，*为通配符
				e.preventDefault();
				/*该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。例如，如果type 属性是"submit"，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单。*/
			};
		}
	</script>
</body>
</html>

receive.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>postMessage receive</title>
</head>
<body>
	<b>This iframe is to receive</b>
	<div id="test">Send me a message!</div>
	<script type="text/javascript">
		window.addEventListener("message", function(e)
		{
			document.getElementById("test").textContent = e.domain+" said: "+e.data;
		},false);

	</script>
</body>
</html>

有关该API的详细信息，https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage

回忆里的褶皱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 Web API:postMessage

postMessage允许每一个window对象向其他窗口发送文本消息，实现跨窗口的消息传递。不受同源策略限制。Mozilla Developer Network这么说：window.postMessage 是一个用于安全的使用跨源通信的方法。通常，不同页面上的脚本只在这种情况下被允许互相访问，当且仅当执行它们的页面所处的位置使用相同的协议（通常都是 http）、相同的端口（http默认使用8
复制链接

扫一扫