使用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跨域的方案思想