iframe引入页面跨域数据访问

前提：父页面和子页面不同域

首先是父页面传数据给子页面

parent.html

<iframe src="http://IP:8018/child.html" frameborder="1" id="ifr1" name="ifr1" scrolling="yes">
     <p>Your Browser dose not support iframes</p>
 </iframe>


<script>

 var myIframe = document.getElementById('ifr1')

  myIframe.contentWindow.postMessage(document.getElementById('message').value, 'http://IP:8018')

</script>

child.html

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

})

</script>

需要注意的是一定要加上http://,同时统一用IP都用IP，用域名都用域名，用localhost都用localhost。

还有这里容易出现一个bug，因为我是需要在页面加载时就传值，所以有可能存在子页面还没有加载完成，父页面已经向子页面传值，子页面接收不到。

这个时候解决方式：

（1）可以考虑 监听iframe是否加载完成，然后再触发。

（2）我采用的方式是：首先在父页面同一个服务器地址建一个页面fchild.html,在child子页面创建一个iframe将跟父页面同源的fchild引入，通过新建的这个iframe获取父页面的数据，然后利用子页面给父页面传值的方式，用fchild将值传给child页面

子页面给父页面传值：

 

parent.html

<script>
  window.addEventListener('message', function (e) {
      alert("拿到儿子"+e.data)
    })
</script>

 

child.html

<script>
window.parent.postMessage('给爸爸', 'http://10.0.40.76:8080');
</script>