使用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：

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

tomcat1/webapps/iframe/child.html：

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

2 })

理想狀態-YY中：

parent頁面經過iframe插入child頁面，在輸入框中輸入內容，而後經過postMessage方法將內容做爲信息推送給child，child頁面經過監聽message方法來接收數據，完美啊！

刷新運行

啪！打臉！！！

這什麼鬼？

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

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

試一下：

tomcat/webapps/iframe/parent.html：

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

刷新運行

闊以了！(是的能夠了，就這麼簡單)

接下來實如今parent中獲取到child中傳來的信息：

tomcat/webapps/iframe/parent.html：

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

增長了對message的監聽事件

tomcat1/webapps/iframe/child.html：

 1 <input type="button" name="demoBtn" id="demoBtn" value="click">
 2 <script>
 3     window.addEventListener('message', function (e) {
 4       console.log(e)
 5       if (e.data.type === 'article') {
 6         alert(e.data.msg.success)
 7       } else {
 8         alert(e.data)
 9       }
10     })
11     function showTop () {
12       console.log('你好！')
13     }
14     document.getElementById('demoBtn').onclick = function () {
15       top.postMessage('hedfs', 'http://localhost:8088')
16     }
17 </script>

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

刷新運行

 

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