利用 html5 的 postMessage 进行跨域 - 话题

liuxuean 2016-04-13 10:34:30 2560次浏览 2条回复 0 0 0

b网站的页面

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>B.com</title>
    <script type="text/javascript">
        //检查postMessage 是否可以用：window.postMessage===undefined
        //定义信任的消息源
        var trustedOrigin = "http://test.a11.net";
        function messageHandler(e) {
            if (e.origin === trustedOrigin) {
                showMsg(e.data);
            } else {
                // ignore messages from other origins
            }
        }
        function sendString(s) { window.top.postMessage(s, trustedOrigin); }//第二个参数是消息传送的目的地
        function loadDemo() {
            addEvent(document.getElementById("actionButton"), "click", function () {
                var messageText = document.getElementById("messageText").value+'_'+'1111'; 
				sendString(messageText);
            });
        }
        function showMsg(message) { document.getElementById("status").innerHTML = message;}
        function addEvent(obj, trigger, fun) {
            if (obj.addEventListener) obj.addEventListener(trigger, fun, false);
            else if (obj.attachEvent) obj.attachEvent('on' + trigger, fun);
            else obj['on' + trigger] = fun;
        }
        addEvent(window, "load", loadDemo);
		
        addEvent(window, "message", messageHandler);
		
    </script>
</head>
<body>
    <h3>B</h3>
    <p>接收到来自a的消息: <strong id="status"></strong>.<p>
	<div>
		<input type="text" id="messageText" value="我是b网站">
		<button id="actionButton"> 向a发送一个消息</button>
	</div>
</body>
</html>

a网站的页面

 <html xmlns="http://www.w3.org/1999/xhtml">
 <head runat="server">
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>A.com</title>
    <script>
        var trustedOrigin = "http://test.b11.net";
        function messageHandler(e) {
            if (e.origin == trustedOrigin) {//接收消息的时候，判断消息是否来自可信的源，这个源是否可信则完全看自己的定义了。
			    alert(e.data);
                showMsg(e.data);//e.data才是真实要传递的数据
            } else {
                // ignore messages from other origins
            }
        }//发送消息
        function sendString(s) { document.getElementById("widget").contentWindow.postMessage(s, trustedOrigin); }
        function showMsg(message) { document.getElementById("status").innerHTML = message; }
		function addEvent(obj, trigger, fun) {
            if (obj.addEventListener) obj.addEventListener(trigger, fun, false);
            else if (obj.attachEvent) obj.attachEvent('on' + trigger, fun);
            else obj['on' + trigger] = fun;
        }
		function sendStatus() {
            var statusText = document.getElementById("statusText").value;
            sendString(statusText);
        }
        function loadDemo() {
            addEvent(document.getElementById("sendButton"), "click", sendStatus);
            sendStatus();
        }
        addEvent(window, "load", loadDemo);
        addEvent(window, "message", messageHandler);

    </script>
< /head >
< body >
    < h3 >A< /h3 >
    <input type="text" id="statusText" value="我是a网站">
    <button id="sendButton">向b发送消息</button>
    <p>接收到来自a的消息: <strong id="status"></strong><p>
    <iframe id="widget" width="800" height="400" src="http://test.b11.net/b.html"></iframe>
</body>
< /html >