0
点赞
收藏
分享

微信扫一扫

7、Electron优雅地加载页面、父子窗口、模态窗口、用代码关闭多个窗口、窗口之间的交互

 

index.js

7、Electron优雅地加载页面、父子窗口、模态窗口、用代码关闭多个窗口、窗口之间的交互_子窗口

7、Electron优雅地加载页面、父子窗口、模态窗口、用代码关闭多个窗口、窗口之间的交互_html_02

/**
* 优雅地加载页面
* 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();
}
});

View Code

index.html

7、Electron优雅地加载页面、父子窗口、模态窗口、用代码关闭多个窗口、窗口之间的交互_子窗口

7、Electron优雅地加载页面、父子窗口、模态窗口、用代码关闭多个窗口、窗口之间的交互_html_02

<!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>

View Code

child.html

7、Electron优雅地加载页面、父子窗口、模态窗口、用代码关闭多个窗口、窗口之间的交互_子窗口

7、Electron优雅地加载页面、父子窗口、模态窗口、用代码关闭多个窗口、窗口之间的交互_html_02

<!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>

View Code

other.html

7、Electron优雅地加载页面、父子窗口、模态窗口、用代码关闭多个窗口、窗口之间的交互_子窗口

7、Electron优雅地加载页面、父子窗口、模态窗口、用代码关闭多个窗口、窗口之间的交互_html_02

<!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>

View Code

event.js

7、Electron优雅地加载页面、父子窗口、模态窗口、用代码关闭多个窗口、窗口之间的交互_子窗口

7、Electron优雅地加载页面、父子窗口、模态窗口、用代码关闭多个窗口、窗口之间的交互_html_02

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();
}

View Code

 



举报

相关推荐

0 条评论