如何在渲染器进程中使用 window.open 在电子中打开新窗口？

Question

我有一个包装为电子应用程序的角度应用程序。现在，当我在渲染器进程中调用 Window.open 以获取内部路由时，我收到一条消息说 Not allowed to load a local resource 并打开一个空白窗口。我该如何解决这个问题？

preload.js

const { contextBridge, ipcRenderer } = require("electron");

const validChannels = ['sample-event-1', 'sample-event-2', 'sample-event-3'];
contextBridge.exposeInMainWorld(
    "api", {
        send: (channel, data) => {
            // whitelist channels To Main Process
            if (validChannels.includes(channel)) {
                ipcRenderer.send(channel, data);
            }
        },
        receive: (channel, func) => {
            // From Main Process
            if (validChannels.includes(channel)) {
                console.log('receive: ' + channel);
                ipcRenderer.on(channel, (event, ...args) => func(...args));
            }
        }
    }
);

ma​​in.js

        mywindow = new BrowserWindow({
            width: 1024,
            height: 768,
            webPreferences: {
                nodeIntegration: false,
                webSecurity: true,
                allowEval: false,
                allowRunningInsecureContent: false,
                contextIsolation: true, // protect against prototype pollution
                enableRemoteModule: false, // turn off remote
                preload: path.join(__dirname, "preload.js") // use a preload script
            },
            title: this._appTitle,
            autoHideMenuBar: true,
            icon: path.join(__dirname, '/../../favicon.ico')
        });

我尝试过的事情

1. 为new-window 添加了一个监听器：没有用

myWindow.webContents.on('new-window', (event, url, frameName, disposition, options) => {
  event.preventDefault()
  const win = new BrowserWindow({
    webContents: options.webContents, // use existing webContents if provided
    show: false
  })
  win.once('ready-to-show', () => win.show())
  if (!options.webContents) {
    win.loadURL(url) // existing webContents will be navigated automatically
  }
  event.newGuest = win
});

1. 在创建主 BrowserWindow 的主进程中添加了 nativeWindowOpen 标志。：不起作用

我不想使用require('electron') 模块或nodeIntegration:true，因为根据可用的在线材料/文档，它会增加安全问题。请推荐！

Answer 1

你在使用secure-electron-template吗？您的代码看起来与此类似。 仅供参考 - 我是那个库的作者。

看起来您从here 获取了示例代码，我猜win 正在被垃圾收集。尝试在.webContents.on('new-window' 调用之外创建win，看看是否可以解决它。否则，我建议在电子存储库中发布一个问题 - 我至少在另一种情况下看到它，他们的文档已过时

Answer 2

如果有人正在寻找答案，这就是我的解决方法。

根据preload.js我添加了以下操作

const { contextBridge, ipcRenderer, remote } = require("electron");

const validChannels = ['sample-event-1', 'sample-event-2', 'sample-event-3'];
contextBridge.exposeInMainWorld(
    "api", {
        send: (channel, data) => {
            // whitelist channels To Main Process
            if (validChannels.includes(channel)) {
                ipcRenderer.send(channel, data);
            }
        },
        receive: (channel, func) => {
            // From Main Process
            if (validChannels.includes(channel)) {
                console.log('receive: ' + channel);
                ipcRenderer.on(channel, (event, ...args) => func(...args));
            }
        },
        openNewWindow: (url) => {
            var BrowserWindow = remote.BrowserWindow;
            var win = new BrowserWindow({
                width: 1024,
                height: 768,
                show: true,
                webPreferences: {
                    nodeIntegration: false,
                    webSecurity: true,
                    allowEval: false,
                    nativeWindowOpen: true,
                    allowRunningInsecureContent: false,
                    contextIsolation: true,
                    enableRemoteModule: true,
                    preload: path.join(__dirname, "preload.js")
                },
                autoHideMenuBar: true,
                icon: path.join(__dirname, 'favicon.ico')
            });

            win.loadURL(url.format({
                pathname: path.join(__dirname, url, 'index.html'),
                protocol: 'file:',
                slashes: true,
            }));
        }
    }
);

来自渲染器进程

(window as any).api.openNewWindow(urlToOpen);