Technorati 标签: HTML5,js跨文档通信,js跨域通信,postMessage(a,b)使用 浏览器在不同域下的JS是不能进行通信的，如： Main.htm部署的地址为http://1...
浏览器在不同域下的JS是不能进行通信的，如：
Main.htm部署的地址为http://127.0.0.1:8080/main.htm
SubPage.htm部署地址为http://localhost:8081/subpage.htm
main.html 代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<h2></h2>
<script>
function ResiveMessage(s) {
alert("this is parent page");
document.getElementById('inputParent').value = s
document.title = s;
}
</script>
<input type="text" name="inputParent" id="inputParent" /><input type="button" value="发送" id="btnSend" />
<h2></h2>
<iframe id="iframe1" src="http://localhost:8081/subpage.htm"></iframe>
</body>
</html>
subpage.htm<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<input type="text" name="inputChile" id="inputParent" /><input type="button" value="发送" id="btnSend" onclick="javascript:SendMessage()" />
<script>
function SendMessage() {
var s = document.getElementById("inputParent").value;
alert(s);
window.top.ResiveMessage(s); //调用父窗口的ResiveMessage方法
}
</script>
</body>
</html>
浏览主页面http://127.0.0.1:8080/main.htm，点击子页面的发送按扭会报跨域访问权限错误(用的Google Chrome)
subpage.htmUnsafe JavaScript attempt to access frame with URL http://127.0.0.1:8080/main.htm from frame with URL http://localhost:8081/subpage.htm. Domains, protocols and ports must match.
HTML5中提供了跨域访问的window.postMessage()方法发送消息和监听事件MessageEvent
修改main.htm页面代码
修改后main.htm<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<h2></h2>
<script>
var target = "http://localhost:8081"; //合法的消息来源
function ResiveMessage(s) {
alert("this is parent page");
document.getElementById('inputParent').value = s
document.title = s;
}
function Listener(e) {
if (e.origin == target) { //判断消息来源，如果来源合法，处理消息
ResiveMessage(e.data);
}
else { //消息来源不合法在此处理
// do nothing here
}
}
window.addEventListener("message", Listener, true); //添加消息监听事件
</script>
<input type="text" name="inputParent" id="inputParent" /><input type="button" value="发送" id="btnSend" />
<h2></h2>
<iframe id="iframe1" src="http://localhost:8081/subpage.htm"></iframe>
</body>
</html>
修改后subpage.htm<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<input type="text" name="inputChile" id="inputParent" /><input type="button" value="发送" id="btnSend" onclick="javascript:SendMessage()" />
<script>
var target = "http://127.0.0.1:8080/subpage.htm";
function SendMessage() {
var s = document.getElementById("inputParent").value;
alert(s);
window.top.postMessage(s,target); //使用父页面的postMessage方法发送消息
}
</script>
</body>
</html>
以上Demo在IE9和Google Chrome中测试通过。
在SubPage中使用了main.htm中的postMessage方法发送数据，再通过MessageEvent事件监听
也就是说HTML5提供了一个可以跨域访问的接口postMessage和一个监听跨域消息的事件MessageEvent。由postMessage方法来接收消息，再由MessageEvent处理消息
没有找到Html5的离线版SDK，哪位大神有的话发一份给我(xuf22@126.com)，谢谢
