HTML5 Web API:postMessage

来源：互联网发布：win7 vb无法读取mdb 编辑：程序博客网时间：2024/05/28 23:10

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.onload=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