electron 版本號(hào) v15.3.0
嵌入網(wǎng)頁
第一步
創(chuàng)建修改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, //設(shè)置開啟nodejs環(huán)境
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('http://www.itdecent.cn/u/e9a31a3c3bdb')
mainWindow.on('closed',()=>{
mainWindow = null
})
})
第二步
驗(yàn)證測(cè)試
輸入
electron .
可以展示以下內(nèi)容代表完成
image.png
紅色為本次修改或新增內(nèi)容
image.png
image.png
問題
我自己的本地環(huán)境,如果main.js不加上
mainWindow.webContents.openDevTools() // 啟動(dòng)打開調(diào)試器
是不會(huì)展示嵌入頁面的,暫時(shí)也沒找到原因,這個(gè)坑先留下,以后知道如何解決了再來更新,解決方法
打開子窗口
第一步
修改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="http://www.itdecent.cn/u/e9a31a3c3bdb">簡書地址</a>
</h1>
<button id = "mybtn">打開一個(gè)子窗口</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('http://www.itdecent.cn/u/e9a31a3c3bdb')
}
第三步
測(cè)試
electron .
執(zhí)行后展示以下內(nèi)容則代表完成
image.png
紅色為本次修改或新增的內(nèi)容
image.png
image.png
