一、核心代码
app.on('ready', () => { //app初始化参数 mainWindow = new BrowserWindow({ windth: 1200, height: 800, webPreferences: { nodeIntegration: true, //使用node功能 contextIsolation: false, enableRemoteModule: true } }) mainWindow.webContents.openDevTools() //默认打开调试模式 mainWindow.loadFile('index.html') //打开窗口加载的页面 let BrowserView=electron.BrowserView let view=new BrowserView //创建子视图 mainWindow.setBrowserView(view) //将子视图嵌入到父窗口 view.setBounds({ //设置坐标、宽度、长度 x:0, y:50, width:1000, height:600 }) view.webContents.loadURL("https://up.enterdesk.com/photo/2008-6-13/200806131108306030.jpg") //设置子窗口加载的链接 mainWindow.on('close', () => { //窗口关闭时，释放页面 mainWindow = null }) })
二、全部代码
index.js
const electron = require('electron') //引入electron组件 var app = electron.app //引入组件app var BrowserWindow = electron.BrowserWindow //窗口引用 var mainWindow = null //申明打开窗口 app.on('ready', () => { //app初始化参数 mainWindow = new BrowserWindow({ windth: 1200, height: 800, webPreferences: { nodeIntegration: true, //使用node功能 contextIsolation: false, enableRemoteModule: true } }) mainWindow.webContents.openDevTools() //默认打开调试模式 mainWindow.loadFile('index.html') //打开窗口加载的页面 let BrowserView=electron.BrowserView let view=new BrowserView //创建子视图 mainWindow.setBrowserView(view) //将子视图嵌入到父窗口 view.setBounds({ //设置坐标、宽度、长度 x:0, y:50, width:1000, height:600 }) view.webContents.loadURL("https://up.enterdesk.com/photo/2008-6-13/200806131108306030.jpg") //设置子窗口加载的链接 mainWindow.on('close', () => { //窗口关闭时，释放页面 mainWindow = null }) })
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button id="mybtn">打开子窗口</button> <script src="./render/index.js"></script> </body> </html>
/render/index.js
var mybtn = document.querySelector('#mybtn') mybtn.onclick = function (e) { window.open("https://www.baidu.com") }
三、测试
