electron 版本号 v15.3.0
第一步
创建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="//www.greatytc.com/u/e9a31a3c3bdb">简书地址</a>
</h1>
<script src="./render/demo3.js"></script>
</body>
</html>
第二步
修改main.js
var electron = require('electron') // 加载全局electron
const {ipcMain, Menu} = require('electron')
var app = electron.app // 引用 app
var BrowserWindow = electron.BrowserWindow // 窗口引用
var mainWindow = null // 声明要打开的主窗口
app.on('ready',()=>{
mainWindow = new BrowserWindow({
width:800,
height:800,
webPreferences: {
nodeIntegration: true, //设置开启nodejs环境
contextIsolation: false,
enableRemoteModule:true
}
}); // 设置主窗口大小
require('@electron/remote/main').initialize()
require('@electron/remote/main').enable(mainWindow.webContents)
require('./main/Menu.js')
mainWindow.webContents.openDevTools() // 启动打开调试器
mainWindow.loadFile('demo3.html') //加载html 页面
mainWindow.on('closed',()=>{
mainWindow = null
})
})
// main show-menu 自定义名称，与demo2.js中的名称保持一致
ipcMain.on('show-menu', (event) => {
const template = [
{
label: '复制',
// type: 'checkbox', checked: true 选中的菜单前面会有√
type: 'checkbox', checked: true,
// 点击事件 调用方法 menu-method1 与 demo2.js 中 ipcRenderer.on('menu-method1') 为对应关系
click: () => { event.sender.send('menu-method1', '123213') }
},
// type: 'separator' 分割线 加上之后两个按钮之间有一条分割线
{ type: 'separator' },
{ label: '粘贴'}
]
const menu = Menu.buildFromTemplate(template)
menu.popup(BrowserWindow.fromWebContents(event.sender))
})
第三步
创建demo.js
const { shell } = require('electron')
// 获取html 中id是aHref的元素
var aHref = document.querySelector('#aHref')
aHref.onclick = function(e){
// 阻止默认行为
e.preventDefault()
// 获取href中的内容
var href = this.getAttribute('href')
// 打开外部浏览器
shell.openExternal(href)
}
第四步
启动测试
点击简书地址
浏览器打开新的页面并跳转至对应地址
electron .
image.png
红色为本次新增或修改的内容
image.png
