关于利用postMessage解决跨域问题的一点小疑问

发布于 2022-09-05 21:42:21 字数 1397 浏览 15 评论 0

今天自己动手做这个小实验的时候，发现了这样一个现象

发送端代码

<body>
  <iframe id="ifr" src="http://182.254.243.216/receive.html"></iframe>
  <script type="text/javascript">
  var i = 1;
  window.onload = function() {
    var ifr = document.getElementById('ifr');
    var targetOrigin = 'http://181.**4.**3.216';  //本人的腾讯云服务器地址
                                        
    setInterval(() => {
      ifr.contentWindow.postMessage(`第${i++}次发送数据`, targetOrigin);
    }, 500)

  };
  </script>
</body>

//接收端代码
<body>
  <h2>接收端</h2>
  <div id="result"></div>
  <script>
  var result = document.getElementById('result');
  window.addEventListener('message', function(event) {
      
      document.write(event.data); //问题的关键在这里
      // result.innerText = event.data;
      // console.log(event.data);
   
  }, false);
  </script>
</body>

问题的关键是，我尝试用了三种方法来实现实时展示数据变化，用result.innerText = event.data和console.log(event.data)都没问题，如下图

但是用document.write(event.data)的时候，页面就只显示'第1次发送数据'然后就不走了（如下图）。不知道为什么

谢谢~

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

烟沫凡尘 2022-09-12 21:42:21

额这是document.write()的问题呀

举个例子，你在接收端中写了如下代码：

document.write();每次执行，文档的内容都没了，脚本自然也就没了。

    var result = document.getElementById('result');
    window.addEventListener('message', function (event) {
      document.write(event.data); //问题的关键在这里
      // result.innerText = event.data;
      console.log(event.data);
    }, false);

下面两个图，第一个是执行一次document.write之后dom结构，可以发现，iframe中的内容只有你输出的第一次请求，script脚本也都没了。document.write()完全重写了文档。

第二个图示使用 innerText 可以看到脚本什么的都在，因此可以一直执行