从电子应用程序的 webview 中选择应允许哪些弹出窗口

Question

我没有使用 allowpopups 属性来允许从电子应用程序中的 webview 打开弹出窗口，而是根据具体情况处理“新窗口”。

这是我的事件处理程序

content.addEventListener('new-window', function (e) {
  var url = e.url;
  var hostname = (new URL(url)).hostname.toLowerCase();

  if (hostname.indexOf('dropbox.com') !== -1 && url.indexOf('chooser') !== -1) {
    // this should open window but it doesnt
    return true;

  } else {
    content.loadURL(url);
    e.preventDefault();
  }  
});

如您所见，触发此处理程序的事件是否具有保管箱的 url（例如）我希望电子允许按预期打开该窗口。

如果不是这样，我应该在电子应用程序中打开该网址。

... 但这不起作用，当使用保管箱 url 时，我什么也得不到。关于我做错了什么的任何建议？

谢谢

Answer 1

感谢蒂姆，我设法找到了解决这个问题的方法。

如果我们试图阻止打开新窗口或允许它们打开，如果我们试图在渲染器进程中处理它，'new-window' 对我们没有用处。如果我们尝试在渲染器进程中处理该事件，无论我们在该偶数处理程序中做什么，弹出窗口/窗口都会打开。

解决方案是在主进程中处理该事件，但在此之前，我们需要将allowpopups 和webpreferences="nativeWindowOpen=true" 添加到我们的webview 中。

allowpopups 显然首先允许弹出窗口，webpreferences="nativeWindowOpen=true" 使用原生 Chromium window.open，另外还有一个好处是窗口打开和new-window 事件按顺序发生，而不是异步发生。

webview 的代码应如下所示：

<webview src="page.html" webpreferences="nativeWindowOpen=true" allowpopups></webview>

之后在主进程（通常是main.js）中，我们可以处理我们想要在电子弹出窗口中打开的内容以及不允许打开的内容。首先，我们必须正确处理 webview，然后我们才能处理 new-window 事件：

app.on('web-contents-created', function (webContentsCreatedEvent, contents) {
  if (contents.getType() === 'webview') {
    contents.on('new-window', function (newWindowEvent, url) {
      console.log('block');
      newWindowEvent.preventDefault();
    });
  }
});

在 Tim 的帮助下，我设法通过在此处https://github.com/electron/electron/pull/9568#issuecomment-306339926 阅读 cmet

希望这对某人有所帮助。

Answer 2

您应该在您的BrowserWindow webContents 上挂钩new-window 事件：

myBrowserWindow.webContents.on('new-window', (event, url) => {
  var hostname = (new URL(url)).hostname.toLowerCase();

  if (hostname.indexOf('dropbox.com') !== -1 && url.indexOf('chooser') !== -1) {
    // this should allow open window
  } else {

    event.preventDefault();
  } 
})