跨文檔通信postMessage

跨文檔通信 postMessage

  1. window.postMessage(message, origin, [transfer])
  2. message: 最好是傳遞字符串
  3. origin:域信息,指定框架中文檔來源的域,如果域匹配纔會傳遞消息
  4. transfer:不常使用,是一串課message同時傳遞的Transferable對象,這些對象的所有權將被轉移給消息的接收方,而發送一方不在保留所有權

demo

  1. A.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>這是A頁面</p>
    <div id="boxa"></div>
<!--A頁面引入B頁面,向B頁面發送消息-->
    <iframe id="iframe" src="http://127.0.0.1:3001/B.html" frameborder="0"></iframe>
    <script>
        iframe.onload = function () {
            //向B頁面發送消息
            //如果不寫 '*' 會提示跨域,但是不推薦寫 '*',因爲不安全
            iframe.contentWindow.postMessage('hello b頁面,我是A', '*')
        }

        window.onmessage = function (ev) {
            var h2 = document.createElement('h2')
            h2.innerHTML = ev.data
            document.getElementById('boxa').appendChild(h2)
        }


    </script>
</body>
</html>
  1. B.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>這是B頁面</p>
    <div id="box"></div>
    <script>
        // 監聽a
        window.onmessage = function (ev) {
            var h1 = document.createElement('h1')
            h1.innerHTML = '這是b,收到了a的消息:' + ev.data
            document.getElementById('box').appendChild(h1)
        //   B發送給a
            ev.source.postMessage('hello a, i am b, i receiver your message', ev.origin)
        }
    </script>
</body>
</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章