Electron拦截window.open，重新设置窗口配置

一、当我们在渲染进程使用window.open打开新窗口时，如何拦截window.open的操作，重新设置该窗口的配置呢？

二、解决方案

方案一

需要拦截具体某个窗口中使用window.open打开新窗口的操作，则只需要设置该窗口的webContents.setWindowOpenHandler(handler)，监听是否有新窗口创建。

webContents.setWindowOpenHandler(handler)：渲染进程中请求创建一个新窗口之前被调用，例如 window.open()， 带 target=“_blank” 的链接，按shift 点击链接，或使用 提交一个表单

注意：此方法无法拦截window.open创建的新窗口里的window.open，只能拦截当前窗口的window.open。若想拦截应用中渲染进程的所有window.open请使用方案二。

实现代码

//创建主窗口
const createMainWindow = () => {
    //创建并控制浏览器窗口。
    windows.mainWindow = new BrowserWindow({
        width: 1200,
        height: 900,
        minWidth: 900,
        minHeight: 600,
        icon: iconPath,// 窗口图标
		autoHideMenuBar: true,//自动隐藏菜单栏
        webPreferences: {//网页功能设置。
            preload: path.join(__dirname, 'preload.js'),//在页面运行其他脚本之前预先加载指定的脚本 无论页面是否集成Node, 此脚本都可以访问所有Node API 脚本路径为文件的绝对路径。
            webSecurity: false,//禁用同源策略
            nodeIntegration: true,
            nodeIntegrationInWorker: true
        }
    });
    //加载路径
    windows.mainWindow.loadURL(indexHtml);
	
	//渲染进程中请求创建一个新窗口之前被调用
	windows.mainWindow.webContents.setWindowOpenHandler((details) => {
		if (details.url) {
			return { 
				action: 'allow',//允许新窗口被创建
				overrideBrowserWindowOptions: {//允许自定义创建的窗口参数
					title: "新窗口",//若新窗口设置了title，则优先使用新窗口的title，若没有设置则使用此title配置
					width: 1400,
					minWidth: 1400,
					minHeight: 800,
					height: 800,
					autoHideMenuBar: true,//自动隐藏菜单栏
					icon: iconPath,// 窗口图标
					parent: null ,//指定父窗口
					x: 0,
					y: 0,
					resizable: true,
					webPreferences: {//网页功能设置。
						preload: path.join(__dirname, 'preload.js'),//在页面运行其他脚本之前预先加载指定的脚本 无论页面是否集成Node, 此脚本都可以访问所有Node API 脚本路径为文件的绝对路径。
						webSecurity: false,//禁用同源策略
						nodeIntegration: true,
						nodeIntegrationInWorker: true,
					},
				}
				
			}
		}
		return { action: 'deny' }//取消创建新窗口
	})
};

效果如下图

方案二

实现代码

只要程序内有新的webContents创建，都会被触发。给每个webContents都设置新窗口拦截。这样无论哪个webContents使用了window.open创建新窗口都会被拦截到，进行统一配置窗口属性。

//当一个新的 webContents 被创建时触发。
app.on('web-contents-created',function(event,webContents){
	//当渲染器使用 window.open 打开子窗口 进行拦截配置
	webContents.setWindowOpenHandler((details) => {
		if (details.url) {
			return { 
				action: 'allow',//允许新窗口被创建
				overrideBrowserWindowOptions: {//允许自定义创建的窗口参数
					title: "安信",
					width: 1400,
					minWidth: 1400,
					minHeight: 800,
					height: 800,
					autoHideMenuBar: true,//自动隐藏菜单栏
					icon: iconPath,// 窗口图标
					parent: null ,//指定父窗口
					x: 0,
					y: 0,
					resizable: true,
					webPreferences: {//网页功能设置。
						preload: path.join(__dirname, 'preload.js'),//在页面运行其他脚本之前预先加载指定的脚本 无论页面是否集成Node, 此脚本都可以访问所有Node API 脚本路径为文件的绝对路径。
						webSecurity: false,//禁用同源策略
						nodeIntegration: true,
						nodeIntegrationInWorker: true,
					},
				}
				
			}
	    }
	    return { action: 'deny' }//取消创建新窗口
	})
})

实现效果