window.postMessage實現跨域

一、發送消息

otherWindow.postMessage(message, targetOrigin, [transfer]);
  • otherWindow:其他窗口的一個引用,如iframe的contentWindow屬性、Window.open、Window.opener、Window.parent、Window.frames +索引值。

  • message:將要發送到其他 window的數據。

  • targetOrigin:指定目標窗口的來源,必須與消息發送目標相一致,可以是字符串“*”或URI。 *表示任何目標窗口都可接收,爲安全起見,請一定要明確提定接收方的URI。

  • transfer :可選。

二、接收消息

window.addEventListener("message", receiveMessage, false);
function receiveMessage(event){
  if (event.origin !== "http://www.42du.cn")
    return;
}

event對象有三個屬性,分別是origin,data和source

  • event.origin表示postMessage的發送來源,包括協議,域名和端口;

  • event.data表示接收到的消息;

  • event.source表示發送消息的窗口對象的引用;

我們可以用這個引用來建立兩個不同來源的窗口之間的雙向通信。

發送程序:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>發送程序</title>
</head>
<body>
<div>
    <input id="val" type="text" value="易安_小葵坤" />
    <button id="sendbtn" >發送消息</button>
</div>
<iframe id="receiver" src="http://res.42du.cn/static/html/receiver.html" width="500" height="500"><p>你的瀏覽器不支持IFrame。</p></iframe>
<script>
    window.onload = function() {
        var receiver = document.getElementById("receiver").contentWindow;
        var sendbtn = document.getElementById("sendbtn");
        sendbtn.addEventListener("click", function (e) {
            e.preventDefault();
            var val = document.getElementById("val").value;
            receiver.postMessage("Hello "+val+"!", "http://res.42du.cn");
        });
    }
</script>
</body>
</html>

接收程序:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>接收程序</title>
</head>
<body>
<div id="message">Hello World!</div>
<script>
    window.onload = function() {
        var receiveMsg = document.getElementById("message");
        window.addEventListener("message", function (e) {
            if (e.origin !== "http://www.42du.cn") {
                return;
            }
            receiveMsg.innerHTML = "從"+ e.origin +"收到消息: " + e.data;
        });
    }
</script>
</body>
</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章