IE11 中的 postMessage 处理答案

【问题标题】：postMessage handling in IE11IE11 中的 postMessage 处理
【发布时间】：2019-10-10 19:24:31
【问题描述】：

假设我有三个网址：

<html>
<body>
  <iframe id="i1"></iframe>
  <script>
     var contentWindow = document.getElementById('i1').contentWindow;
     var oScript = contentWindow.document.createElement('script');
     oScript.src = "http://loader.com";
     contentWindow.document.childNodes[0].childNodes[1].appendChild(oScript);
  </script>
</body>
</html>

2.http://loader.com

var oFrame = document.createElement("iframe");
oFrame.src = "http://www.sf.com";
oFrame.onload = function() {
   oFrame.contentWindow.postMessage({ msg: 'hi'}, 'http://sf.com');
}
document.childNodes[0].childNodes[1].appendChild(oFrame);

3.http://sf.com

<html>
<head>
<script>
  window.addEventListener('message', function(event) {
    document.getElementById('h4').innerHTML = event.origin;
  });
</script>
</head>
<body>
  <h4 id="h4"></h4>
</body>
</html>

现在在任何“普通”浏览器（edge/firefox/chrome）中加载 http://home.com - 链会将脚本从“http://loader.com”加载到 iframe 中，该 iframe 将加载另一个带有“http://sf.com”的 iframe 和最后一个 iframe 将显示“http://home.com”作为事件来源。然而，在 Internet Explorer 11 中，事件来源设置为“关于：”。有没有办法绕过这个特殊的怪癖？我还没有找到任何关于这个特殊怪癖的文档（参考：https://caniuse.com/#search=postMessage）

【问题讨论】：

标签： javascript internet-explorer-11 postmessage

【解决方案1】：

我自己进行了测试并重现了同样的问题。我也搜索了很多信息，但没有找到任何线索。我想如果使用两个 iframe 会导致问题。所以我只使用一个 iframe 进行了另一项测试，event.origin 可以在 IE 中获取正确的 url。我使用如下代码：

http://home.com

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
</head>
<body id="i1">
    <script>
       var contentWindow = document.getElementById('i1').contentWindow;
       var oScript = document.createElement('script');
       oScript.src = "http://loader.com";
       document.childNodes[1].childNodes[2].appendChild(oScript);
    </script>
</body>
</html>

http://loader.com

var oFrame = document.createElement("iframe");
oFrame.src = "http://sf.com";
oFrame.onload = function () {
    oFrame.contentWindow.postMessage({ msg: 'hi' }, 'http://sf.com');
}
document.childNodes[1].childNodes[2].appendChild(oFrame);

http://sf.com

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
    <script>
       window.addEventListener('message', function(event) {
           document.getElementById('h4').innerHTML = event.origin;
       });
    </script>
</head>
<body>
   <h4 id="h4"></h4>
</body>
</html>

虽然没有找到任何文档证明，但测试结果让我觉得在使用 embed iframe 时，IE 中可能存在一些限制。作为一种解决方法，您可以尝试仅使用一个 iframe。

【讨论】：