html5 message和postMessage跨域
2012-02-17 21:34 边缘er 阅读(555) 评论(0) 编辑 收藏 举报设计背景：父页面和子页面(iframe)不同域，进行跨域操作。
实现功能：父页面可以改变子页面的"状态"内容，子页面可以改变父页面的title。
父页面代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>postMessage演示</title>
</head>
<body>
<p><b>父页面源</b>: event51</p>
<input type="text" id="statusText"> <button id="sendButton">改变子页面状态</button>
<div><iframe id="widget" width="600" height="600" src="http://bianyuan.me/postMessageWidget.html"></iframe></div>
<script type="text/javascript">
var targetOrigin = "http://bianyuan.me";
function messageHandler(e) {
if (e.origin == targetOrigin) {
document.title = e.data//此e.data是子页面传送来的数据
} else {
}
}
document.getElementById("sendButton").addEventListener("click",
function(){
var statusText = document.getElementById("statusText").value;
document.getElementById("widget").contentWindow.postMessage(statusText, targetOrigin);//向子页面发送数据
}, true);
window.addEventListener("message", messageHandler, true);//监听message事件
</script>
</body>
</html>
子页面代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>子页面</title>
</head>
<body>
<p><b>子页面源</b>: mjjcss</p>
<p>状态内容（被父页面改变）: <strong id="status"></strong></p>
<div><input type="text" id="messageText"> <button id="actionButton">改变父页面的标题</button></div>
<script type="text/javascript">
var targetOrigin = "http://event51.wanmei.com";
function messageHandler(e) {
if (e.origin === targetOrigin) {
document.getElementById("status").textContent = e.data;//此e.data是父传来的数据
} else {
}
}
document.getElementById("actionButton").addEventListener("click",
function() {
var messageText = document.getElementById("messageText").value;
window.top.postMessage(messageText, targetOrigin);//向父页面发送的数据
}, true);
window.addEventListener("message", messageHandler, true);//监听message事件
</script>
</body>
</html>
"message"事件和"postMessage"方法
1.message是需要给window添加监听的消息事件，用于接收消息，就是如果有消息传来了就会触发message。message事件传入一个消息对象e，e.data就是我们需要的数据（不同源传过来的）；e.origin属性是发送来源。
2.postMessage(msg,targetOrigin)用于发送消息。2个参数分别是要发送的内容和发送的目的地。本例是window窗口调用的postMessage，html5中的workers也可以调用这个方法。
个人疑惑：我觉得发送者不是很好理解，就拿父页面发送数据来说（document.getElementById("widget").contentWindow.postMessage(statusText, targetOrigin);），其实是找到子窗口的window调用的postMessage（个人觉得应该是父窗口本身发送），不知道为什么这么设计...
