HTML5 中的跨文档通信

b)使用

浏览器在不同域下的JS是不能进行通信的，如：

Main.htm部署的地址为http://127.0.0.1:8080/main.htm

SubPage.htm部署地址为http://localhost:8081/subpage.htm

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"  />
<h2></h2>
<iframe ></iframe>
</body>
</html>

>

<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)

Unsafe 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页面代码

>

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

>

<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)，谢谢