HTML5 Web API:postMessage

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
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值