使用postMessage實現跨域 解決'Failed to execute 'postMessage' on 'DOMWindow''

使用iframe+postMessage解決跨域問題，首先來過一遍其中的原理咯

原理：

發送方使用postMessage方法向接收方推送消息，第一個參數為推送的內容，第二個參數是允許被訪問的域名；

接收方通過監聽message的方法接收數據。

實現跨域就需要有兩個不同源的服務器咯

我在本地開啟了兩個不同端口的tomcat；(以下是我的文件路勁)

①tomcat/webapps/iframe/parent.html(端口號8088)

②tomcat1/webapps/iframe/child.html(端口號8089)

接下來開始編碼

tomcat/webapps/iframe/parent.html：

<iframe src="localhost:8089/iframe/iframe.html" frameborder="1" id="ifr1" name="ifr1" scrolling="yes">
    <p>Your Browser dose not support iframes</p>
</iframe>
<input type="text" id="message">
<input type="button" value="this is message" onclick="sendIt()">
<script>
    var myIframe = document.getElementById('ifr1')
    function sendIt () {
      myIframe.contentWindow.postMessage(document.getElementById('message').value, 'localhost:8089')
    }11 </script>

tomcat1/webapps/iframe/child.html：

window.addEventListener('message', function (e) {
      alert(e.data)

})

理想狀態-YY中：

parent頁面通過iframe插入child頁面，在輸入框中輸入內容，然后通過postMessage方法將內容作為信息推送給child，child頁面通過監聽message方法來接收數據，完美啊！

刷新運行

啪！打臉！！！

這什么鬼？

“提供的來源('localhost://')”與接收方('http://localhost:8088')的來源不匹配

不懂啊，這怎么搞，找一找茬，難道是少了http開頭的協議？

試一下：

tomcat/webapps/iframe/parent.html：

<iframe src="http://localhost:8089/iframe/iframe.html" frameborder="1" id="ifr1" name="ifr1" scrolling="yes">
    <p>Your Browser dose not support iframes</p>
</iframe>
<input type="text" id="message">
<input type="button" value="this is message" onclick="sendIt()">
<script>
    var myIframe = document.getElementById('ifr1')
    function sendIt () {
      myIframe.contentWindow.postMessage(document.getElementById('message').value, 'http://localhost:8089')
    }
    window.addEventListener('message', function (e) {
      alert(e.data)
    })
</script>

刷新運行

闊以了！(是的可以了，就這么簡單)

接下來實現在parent中獲取到child中傳來的信息：

tomcat/webapps/iframe/parent.html：

<iframe src="http://localhost:8089/iframe/iframe.html" frameborder="1" id="ifr1" name="ifr1" scrolling="yes">
    <p>Your Browser dose not support iframes</p>
</iframe>
<input type="text" id="message">
<input type="button" value="this is message" onclick="sendIt()">
<script>
    var myIframe = document.getElementById('ifr1')
    function sendIt () {
      myIframe.contentWindow.postMessage(document.getElementById('message').value, 'http://localhost:8089')
    }
    window.addEventListener('message', function (e) {
      alert(e.data)
    })
</script>

增加了對message的監聽事件

tomcat1/webapps/iframe/child.html：

<input type="button" name="demoBtn" id="demoBtn" value="click">
<script>
    window.addEventListener('message', function (e) {
      console.log(e)
      if (e.data.type === 'article') {
        alert(e.data.msg.success)
      } else {
        alert(e.data)
      }
    })
    function showTop () {
      console.log('你好！')
    }
    document.getElementById('demoBtn').onclick = function () {
      top.postMessage('hedfs', 'http://localhost:8088')
    }
</script>

向'http://localhost:8088'域下的文件傳參'hedfs'

刷新運行

 

OK！完成了，以上便是postMessage配合iframe跨域的方案思想