electron 版本号 v15.3.0
第一步
创建popup_page.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>
<h2>我是弹出子窗口</h2>
<button id="popbtn">向父窗口传递信息</button>
</body>
<script>
var popbtn = this.document.querySelector('#popbtn')
popbtn.onclick = function(e){
window.opener.postMessage('我是子窗口传递过来的的信息')
}
</script>
</html>
第二步
修改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></body>
<dev id="mytext"></dev>
<script src="./render/demo3.js"></script>
</body>
</html>
第三步
修改demo3.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)
}
var mybtn = document.querySelector('#mybtn')
mybtn.onclick = function(){
window.open('./popup_page.html')
}
window.addEventListener('message', (msg) => {
let mytext = document.querySelector('#mytext')
mytext.innerHTML = JSON.stringify(msg.data)
})
第四步
验证测试
出现以下结果证明成功
image.png
红色为本次修改或新增的内容
image.png
image.png
image.png
