index.js
/** * 優雅地加載頁面 * show:false,創建一個隱蔽的窗口 * win.on("ready-to-show",()=>{ win.show(); });//加載完才顯示 */ /** * 父子窗口（Mac OS X和Windows有一定差異） * 1、子窗口總是在父窗口之上 * 2、如果父窗口關閉，子窗口自動關閉 * * 子窗口相當於父窗口的懸浮窗口 * Mac OS X和Windows的父子窗口的區別是： * 在Mac OS X下，移動父窗口，子窗口會隨着父窗口移動 * 在Windows下子窗口不會移動 */ /** * 模態窗口（Mac OS X和Windows差異比較大） * 模態窗口是指禁用父窗口的子窗口，也就是說，處於模態的子窗口顯示后，無法使用父窗口，直到子窗口關閉 * 1、模態窗口需要是另外一個窗口的子窗口 * 2、一旦模態窗口顯示，父窗口將無法使用 * * modal=true * * Mac OS X 和Windows的模態窗口差異 * 1、模態窗口在Mac OS X下會隱藏的標題欄,只能通過close方法關閉模態子窗口 * 在Windows下，模態子窗口仍然會顯示菜單和標題欄 * 2、在Mac OS X下，模態子窗口顯示后，父窗口仍然可以拖動，但無法關閉，在Windows下，模態子窗口顯示后父窗口無法拖動 * 應用：主要用於桌面應用的對話框顯示，如設置對話框、打開對話框。 */ /**用代碼關閉多個窗口 * BrowserWindow對象的close方法用於關閉當前窗口 * 關閉多窗口的基本原理：將所有窗口的BrowserWindow對象保存起來，只需要調用指定窗口的close方法，就可以關閉指定的一些窗口 * * global:全局變量，將所有窗口的BrowserWindow對象保存到windows數組中，將該數組保存到global中 */ /**窗口之間的交互（傳遞數據） * window1和windw2,window1<->window2 * 窗口之間的交互就是兩個窗口之間的雙向數據傳遞 * * 使用ipc(interProcess Communication，進程間通迅)方式在窗口間傳遞數據 * ipcMain和ipcRenderer * ipcMain用於主窗口中 * ipcRenderer可用於其他窗口 * * 主窗口：window1,其他窗口：window2 * * 在Window2中會通過ipcRenderer觸發一個事件，用於接收window1傳遞過來的數據， * 在window2關閉時，會通過ipcRenderer給window1發送一個消息，window1通過ipcMain觸發一個事件，用於獲取window2發過來的數據。 */ const {app,BrowserWindow} = require('electron'); function createWindow(){ win = new BrowserWindow({ //show:false, webPreferences:{ nodeIntegration: true, // 是否集成 Nodejs enableRemoteModule: true, contextIsolation: false, } }); childWin=new BrowserWindow({ parent:win,width:400,height:300, //module:true }); win.loadFile('index.html'); childWin.loadFile('child.html'); win.on("ready-to-show",()=>{ win.show(); }); if(process.platform!="darwin"){ win.setIcon("images\\logn.jpg"); } win.on('closed',()=>{ console.log('closed') win=null; }); childWin.on('closed',()=>{ console.log('closed') childWin=null; }); } app.on('ready',createWindow); app.on('window-all-closed',()=>{ console.log('window-all-closed'); if(process.platform!='darwin'){ } }); app.on('activate',()=>{ console.log('activate'); if(win==null){ createWindow(); } });
index.html
<!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>父窗口</title> <script src="event.js"></script> <body> <img src="./images/shj8.jpg"> <h1>書名：<i>山海經</i></h1> <br/> <br/> 出版社：<u>大地出版社</u> <br/> <br/> 原價：<strike>69</strike>元 促銷價：59 <br/> <br/> <button id="idInLock" onclick="onClick_close()">關閉窗口</button> <br/> <button onclick="onClick_CreateMultiWindos()">創建多個窗口</button> <br/> <button onclick="onClick_CloseAllWindows()">關閉所有窗口</button> <br/> <button onclick="onclick_SendData()">向新窗口發送數據</button> <br/> <label id="label_return"></label> </body> </html>
child.html
<!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>子窗口</title> <script src="event.js"></script> <body> <img src="./images/shj8.jpg"> <h1>書名：<i>子不語</i></h1> <br/> <br/> 出版社：<u>大地出版社</u> <br/> <br/> 原價：<strike>69</strike>元 促銷價：59 <br/> <br/> <button id="idInLock" onclick="onClick()">進入鎖定模式</button> </body> </html>
other.html
<!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>接受</title> <script src="event.js"></script> <body onload="onLoad()"> <h1>姓名：<label id="label_name"></label></h1> <h1>薪水：<label id="label_salary"></label></h1> <button id="idInLock" onclick="onClick_Close()">關閉當前窗口，並返回數據</button> </body> </html>
event.js
const remote = window.require('electron').remote;
const BrowserWindow= remote.BrowserWindow;
//關閉當前窗口
function onClick_close()
{
win =remote.getCurrentWindow();
win.close();
}
//創建多個窗口
function onClick_CreateMultiWindos()
{
if(global.windows==undefined){
global.windows=[];
}
var win=new BrowserWindow({show:false,x:10,y:20,width:400,height:300});
global.windows.push(win);
win.loadFile('child.html');
win.on("ready-to-show",()=>{
win.show();
});
}
//關閉除主窗口的所有窗口
function onClick_CloseAllWindows()
{
if(global.windows!=undefined){
for(var i=0;i<global.windows.length;i++)
{
global.windows[i].close();
}
global.windows.length=0;
global.windows=undefined;
}
}
//獲取ipcMain對象
const ipcMain=remote.ipcMain;
const {ipcRenderer}=window.require('electron');
ipcMain.on("other",(event,str)=>{
const lableReturn=document.getElementById("label_return");
lableReturn.innerText=str;
})
//主窗口向other窗口發送數據
function onclick_SendData()
{
var win=new BrowserWindow({show:false,x:10,y:20,width:400,height:300,
webPreferences:{
nodeIntegration: true, // 是否集成 Nodejs
enableRemoteModule: true,
contextIsolation: false,
}
});
win.loadFile('./other.html');
win.on("ready-to-show",()=>{
win.show();
win.webContents.send("data",{name:'xxx',salary:300000});
});
}
//other窗口裝載頁面時顯示主窗口傳過來的數據
function onLoad(){
ipcRenderer.on("data",(event,obj)=>{
debugger;
const lableName=document.getElementById("label_name");
const lableSalary=document.getElementById("label_salary");
lableName.innerText=obj.name;
lableSalary.innerText=obj.salary;
});
}
//關閉other窗口
function onClick_Close(){
const win=remote.getCurrentWindow();
ipcRenderer.send("other","窗口已關閉");
win.close();
}