当它们不是相同的协议时，如何在子 iframe 的顶部窗口中调用 api？

Question

我正在使用 nwjs。我在应用页面（顶部窗口）中放了一个 iframe：

<iframe src="aaa.com" id="contentFrame"></iframe>

我想告诉应用页面（顶部窗口）在 iframe（域：aaa.com）中运行一些功能：

<!-- code in the iframe-->
<input type="button" value="close" onclick="window.top.close();"></input>
<input type="button" value="window.top._close" onclick="window.top._close();"></input>

当我在 iframe 中单击上面的按钮时，出现错误：

未捕获的安全错误：阻止了来源为“http://localhost:3900”的框架访问来源为“file://”的框架。请求访问的帧具有“http”协议，被访问的帧具有“文件”协议。协议必须匹配。

我尝试在 package.json 中设置这个参数：

"chromium-args": "--disable-web-security",

但它只适用于“window.to.close();”按钮。

我也想用这种方式调用 Native UI API：

require('nw.gui').gui.Window.get().minimize();

最好的问候。

Answer 1

我不知道如何允许这样做，但您可以使用Window.postMessage 进行帧之间的安全通信。

 // in parent window
 window.addEventListener("message", function (event) {
    if (event.data == "closeYourSelf") window.close();
 }, false);

 // in child iframe
 $('button.close').bind('click', function (clickEv) {
   clickEv.preventDefault();
   window.top.postMessage("closeYourSelf", '*');
 });