javascript - Electron :webview 没有从新创建的窗口接收回调代码

Question

我有一个可以作为简单浏览器工作的桌面应用程序。它有带有显示网页的网页 View 的标签。

有些网站有social sign-in选项。我真的需要它可供我的用户使用。

在一般浏览器(例如 chrome)中，当您通过 Facebook 登录时，它会创建带有社交授权表单的新窗口。提交此表单后，新窗口关闭，父窗口接收回调代码，重新加载并登录。

在我的应用程序中，当您尝试执行相同操作时，包含网页的 webview 会创建具有相同身份验证表单的新 BrowserWindow。此时一切正常。当您提交表单时，新窗口会关闭，但之后没有任何 react 。父窗口没有收到任何回调，应该运行的代码根本没有被触发。或者可能它已收到，但未触发，因为如果我重新加载页面，它表明我已登录。

根据electron documentation 在与渲染器进程不同的进程中运行。所以我认为当新窗口关闭时，回调由父 BrowserWindow (渲染器进程)接收，而不是完全在 webview 框架中运行。

在寻找不同的解决方案时，我发现这个问题也与 window.opener 有关，这在 Electron 的最早版本中并不完全支持。但是根据 issue#1865如果我通过 window.open 方法打开窗口，现在可以在 github 上获得完整的 window.opener 支持。

为了完成这项工作，我应该阻止 webview to open new BrowserWindow并由我自己创建。

以下代码失败:

// in renderer process
webview.addEventListener('new-window', function(event) {
    event.preventDefault();
    // I also tried 'event.defaultPrevented = true;'
    // or 'return false;'
});

监听器被触发，但我无法阻止新窗口打开。

有人写道，只能在主进程中阻止新窗口。

因此，我在 main.js 中添加了以下代码:

// in main process
var electron      = require('electron');
var BrowserWindow = electron.BrowserWindow;

mainWindow = new BrowserWindow({
    "width": 970,
    "height": 500,
    "center": true,
    'title': 'Main window',
    "autoHideMenuBar": true
});

mainWindow.loadURL('file://' + root + '/index.html');

mainWindow.webContents.on('new-window', function(event) {
    console.log(event);
});

这次 event 'new-window'根本没有触发。我认为这是因为该事件仅在渲染器进程请求通过 window.open 打开一个新窗口时才起作用。但在我的情况下，新窗口是由 标签打开的，而不是由渲染器进程打开的。所以我没能阻止新窗口打开，因为这是两个独立的进程。

所以我决定在新窗口打开后获取它。

// in renderer process
var electron = require("electron");
var remote   = electron.remote;

webview.addEventListener('new-window', function(event) {
    var win      = remote.BrowserWindow.getFocusedWindow();
    var contents = win.webContents;

    win.setIcon(root+"/img/favicon.ico");
    win.setMenuBarVisibility(false);

    contents.on('dom-ready', function() {
        contents.openDevTools();
    })
});

在那之后我真的不知道下一步该怎么做......如何附加window.opener并解决我的问题

我在 github 上发现了很多类似的问题。但都合并为一期 #1865到目前为止还没有明确的答案。

我知道解决方案存在。勇敢的开发人员解决了这个问题。 Brave browser用 Electron 制作的也可以正常工作，与一般浏览器一样。但是我在浏览它的 sources时找不到答案.

他们甚至进行了测试以检查 window.opener 是否正常工作。但我未能从 git 存储库安装 Brave。在“npm-start”之后，它显示“错误:%1 不是有效的 Win32 应用程序”。我有 Windows 10。(只是另一个原因让我切换到 Linux。希望尽快实现。)

所以，我的问题是:如何将回调数据从新窗口发送回创建此窗口的 webview。提前致谢。

Answer 1

首先，要自己处理新窗口弹出窗口，您必须禁用 allowpopups (即从 webview 中删除 allowpopups 属性)
这样，新窗口事件将被触发，但在您明确编码之前不会打开任何弹出窗口。

对于某些社交或 sso 登录所需的 window.opener 功能，Electron 没有足够的支持。见 issue 1865

Brave 团队在他们的 Electron 分支中以受限的方式实现了它。见 issue 4175 .
您可以尝试:

使用 fork of electron来自 Brave(不确定它是否符合您的需求，因为他们进行了一些重大更改)

对 electron 做一个 PR 以集成来自 fork 的 window.opener 的支持。

通过注入(inject)实现缺少的 window.opener 方法的脚本，为您需要的方法制作自己的 polyfill。您可以使用 window.opener.send与渲染器进程通信)