javascript - Cordova跨域文件://iframe contentwindow communication

Question

我发现我可以通过 file:// 上的页面和远程主机上托管的 iframe 使用 iframe 的 contentWindow 属性进行跨域通信。

例如，在设备上，我在 url 文件中有一个 html 页面://.../index.html 加载 cordova 并包含一个 iframe:

<script type="text/javascript" src="cordova.js"></script>
<iframe id="appframe"></iframe>

在此页面上，我可以执行加载 iframe 的 javascript 并在 iframed 页面中保存对象的引用，如下所示:

var iframe = document.getElementById("appframe");
iframe.onload = function(){
    iframe.contentWindow.cordova = window.cordova;
}
iframe.src = "http://www.example.com/appframe.html";

现在在 iframe 内的页面上，http://www.example.com/appframe.html ，我可以执行 cordova 调用，例如:

cordova.exec(null, null, "StatusBar", "hide", []);

这出乎意料地有效，调用了 StatusBar cordova 插件的原生层并隐藏了状态栏。

我的问题是:

这是否可以安全使用，或者是一种在未来版本的浏览器中不起作用的 hack？

我在 iOS 9 和 Android 5 设备上对其进行了测试。

Answer 1

我相信在框架之间进行通信的更安全的方法是 postMessage，如 MDN 中所述。 , 以不同的方式执行可能会导致设备之间的不一致(请记住 android 是多么的碎片化以及与 4.3 及更低版本的向后兼容性是多么痛苦)

因此，您可以获取 iFrame 元素，然后发布类似这样的消息

otherWindow.postMessage(InfoToSend, "*");

以同样的方式，您可以在框架内收听该事件:

window.addEventListener("消息", receiveMessage, false);

这不会导致跨框架问题，这将是更安全的信息传递方式，坏消息是您将无法传递 window.cordova 实例，因此您将需要在 iFrame 和 window.top 框架之间建立对话。