Question

我没有使用 allowpopups 属性来允许在电子应用中打开来自webview的弹出窗口，而是根据每个案例处理'new-window'。

这是我的事件处理程序

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();
  }  
});

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

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

...但这不起作用，当使用Dropbox网址时，我什么都没得到。对我做错了什么建议？

由于

Answer 1

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

如果我们尝试阻止打开新窗口或允许它们打开，则可以使用新窗口＆＃39;如果我们尝试在渲染过程中处理它，对我们无用。如果我们尝试在渲染器进程中处理该事件，则无论我们在该处理程序中执行什么操作，弹出/窗口都将打开。

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

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

希望这会对某人有所帮助。

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();
  } 
})

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

2 个答案: