6.Electron之BrowserView嵌入子视图

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

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

<!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>

var mybtn = document.querySelector('#mybtn')
mybtn.onclick = function (e) {
    window.open("https://www.baidu.com")
}