index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .content{ width: 100%; height: 400px; background: orange; overflow-y: auto; } </style> </head> <body> <button id="btn"> 打开新窗口 </button> <script src="renderer/openWindow.js"></script> </body> </html>
openWindow.js
var {ipcRenderer} =require(‘electron‘); var btn=document.querySelector(‘#btn‘); //渲染进程没法直接调用主进程中的模块，但是我们可以通过 electron中的remote模块间接的调用主进程中的模块 btn.onclick=function(){ // alert(‘点击了‘); ipcRenderer.send(‘openWindow‘); //通过localStorage实现页面传值 var aid=123; localStorage.setItem(‘aid‘,aid); }
new.js
//获取localStorage的数据 var aid=localStorage.getItem(‘aid‘); console.log(aid);
引入到new.html
ipcmain.js
var {ipcMain,BrowserWindow} =require(‘electron‘); var path=require(‘path‘); var win=null; //接收到广播 ipcMain.on(‘openWindow‘,function(){ //调用 BrowserWindow打开新窗口 win=new BrowserWindow({ width:400, height:300, // frame:false, // fullscreen:true }) win.loadURL(path.join(‘file:‘,__dirname,‘../news.html‘)); //开启新窗口的调试模式 win.webContents.openDevTools(); win.on(‘closed‘,()=>{ win=null; }) })
new.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
background: orange;
}
</style>
</head>
<body>
news页面
<br>
哈哈哈
<script src="renderer/news.js"></script>
</body>
</html>
引入ipcmain.js到index.js
require(‘./main/ipcMain.js‘);
运行项目：
npm run start