electron-localstorage渲染程序和渲染程序傳值
阿新 • • 發佈：2020-12-17
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