electron 版本号 v15.3.0
嵌入网页
第一步
创建修改main.js
var electron = require('electron')
const {BrowserView} = require('electron')
var app = electron.app
var BrowserWindow = electron.BrowserWindow
var mainWindow = null
app.on('ready',()=>{
mainWindow = new BrowserWindow({
width:1200,
height:1200,
webPreferences: {
nodeIntegration: true, //设置开启nodejs环境
contextIsolation: false,
}
})
require('@electron/remote/main').initialize()
require('@electron/remote/main').enable(mainWindow.webContents)
require('./main/Menu.js')
mainWindow.loadFile('demo3.html')
mainWindow.webContents.openDevTools()
// 使用windowsView 打开子窗口
const view = new BrowserView()
mainWindow.setBrowserView(view)
view.setBounds({
x:0,
y:120,
width:800,
height:800
})
view.webContents.loadURL('https://www.jianshu.com/u/e9a31a3c3bdb')
mainWindow.on('closed',()=>{
mainWindow = null
})
})
第二步
验证测试
输入
electron .
可以展示以下内容代表完成
image.png
红色为本次修改或新增内容
image.png
image.png
问题
我自己的本地环境,如果main.js不加上
mainWindow.webContents.openDevTools() // 启动打开调试器
是不会展示嵌入页面的,暂时也没找到原因,这个坑先留下,以后知道如何解决了再来更新,解决方法
打开子窗口
第一步
修改demo3.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>
<h1>
<a id="aHref" href="https://www.jianshu.com/u/e9a31a3c3bdb">简书地址</a>
</h1>
<button id = "mybtn">打开一个子窗口</button>
<script src="./render/demo3.js"></script>
</body>
</html>
第二步
修改demo3.js
const {shell} = require('electron')
var aHref = document.querySelector('#aHref')
aHref.onclick = function(e){
e.preventDefault()
var href = this.getAttribute('href')
shell.openExternal(href)
}
var mybtn = document.querySelector('#mybtn')
mybtn.onclick = function(){
window.open('https://www.jianshu.com/u/e9a31a3c3bdb')
}
第三步
测试
electron .
执行后展示以下内容则代表完成
image.png
红色为本次修改或新增的内容
image.png
image.png
