允许 Electron 托管的 webapp 调用 window.open 并像使用常规 Chrome window 一样使用结果

Question

我在 Electron 的 webview 标签中托管的网络应用调用 window.open。但是，since window.open 无法从 Electron 中的 iframe 内部调用，我不得不重写 window.open，以便它向托管 webapp 的渲染器进程发送消息并告诉它调用 window.open 并发回结果。

来自我的渲染器：webContents.send("my-channel", myWindow);

但是，我似乎无法简单地将整个 window 发送回网络应用程序。发送到 webapp 的 window 没有 BrowserWindowProxy 应该具有的任何功能（例如 close）。我想如果它确实有一个 close，那将是 st运行ge，因为 close 需要知道逃脱 webapp（通过某种方式）并提醒 Electron 的 renderer/main 一个 window 需要关闭的进程。

我希望发送到 webapp 的 window 表现得或多或少像常规 Chrome window（即，我希望它具有相同的 public api)。所以，我的第一个问题是如何将这样的 window 应用到 webapp。

我想到的解决方案如下。我仍然在渲染器进程中调用 window.open，但我没有传回结果 window，而是传回一个具有 windowId 属性的对象，该对象设置为window 的 ID。当该对象到达 webapp 时，它会通过一个小中介来查看 window 对象并设置一些属性（如 close、focus），这些属性在内部向渲染器进程发送消息执行相关操作（通过预加载脚本公开的函数）。类似于：

myWindow = {
    windowId: 1,
    close: function() {
        sendActionFromWebviewToMain("close", this.windowId);
    }
}

我运行遇到的下一个问题是 Electron 的 window.open 返回的 window 与 new BrowserWindow(...) 返回的不同，它似乎没有 ID . source code 引用了一个 guestId，但我无法访问它。

如何使用 window.open 创建 Web 应用程序可以与之交互的 window？我是否被迫使用 BrowserWindow 构造函数创建 window？

Answer 1

此问题已得到解决。

我现在需要做的就是在我的 webview 标签上设置 nativeWindowOpen 和 allowpopups 属性，然后我就可以使用原生的 window.open.

<webview webpreferences="nativeWindowOpen=yes" allowpopups />

允许 Electron 托管的 webapp 调用 window.open 并像使用常规 Chrome window 一样使用结果

Allowing an Electron-hosted webapp to call window.open and to use the result as if it were a regular Chrome window

javascript

window

node.js

electron