7、Electron优雅地加载页面、父子窗口、模态窗口、用代码关闭多个窗口、窗口之间的交互
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了7、Electron优雅地加载页面、父子窗口、模态窗口、用代码关闭多个窗口、窗口之间的交互，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5678字，纯文字阅读大概需要9分钟。
内容图文
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(); }
原文：https://www.cnblogs.com/xiaoruilin/p/14799594.html
内容总结
以上是互联网集市为您收集整理的7、Electron优雅地加载页面、父子窗口、模态窗口、用代码关闭多个窗口、窗口之间的交互全部内容，希望文章能够帮你解决7、Electron优雅地加载页面、父子窗口、模态窗口、用代码关闭多个窗口、窗口之间的交互所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】