使用HTML5 API创建子窗口，控制窗口，窗口之间的交互，从子窗口返回数据，页面来源，使用eval方法向子窗口传递数据
index.js
/** * 使用HTML5 API创建子窗口 * window.open方法 * window.open(url[,title][,attributes]) * 1、url:要打开页面的链接（可以是本地的链接，也可以是Web链接） * 2、title:设置要打开页面的标题，如果在页面中已经设置了标题，那么 这个参数将被忽略 * 3、attributes:可以设置与窗口相关的一些属性，例如，窗口的宽度和高度 * window.open方法的返回值 * * BrowserWindowProxy 可以认为是BrowserWindow的代理类 * * 控制窗口 * 1、获取窗口焦点 focus * 2、让窗口失去焦点状态 blur * 3、关闭窗口：close * 4、显示打印对话框:Print * * 窗口之间的交互：最简单的数据传递方式 * B.postMessage(data,‘*‘) * * 从子窗口返回数据 * ipcRenderer.send(...) * ipcMain.on * * 页面来源：“谁”使用url打开的新的子窗口。在本例中，"谁"是指index.html所在的域名 * e.origin * * 使用eval方法向子窗口传递数据 * eval方法用来执行JavaScript代码 */ const {app,BrowserWindow} = require(‘electron‘); function createWindow(){ win = new BrowserWindow({ //show:false, webPreferences:{ nodeIntegration: true, // 是否集成 Nodejs enableRemoteModule: true, contextIsolation: false, } }); win.loadFile(‘index.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; }); } 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>用window.open方法创建子窗口</title> <script src="event.js"></script> <body> <button onclick="onClick_OpenWindow()">打开子窗口</button> <br/> <button onclick="onClick_Focus()">获取焦点</button> <br/> <button onclick="onClick_Blur()">失去焦点</button> <br/> <button onclick="onClick_Close()">关闭窗口</button> <br/> <button onclick="onClick_Print()">显示打印对话框</button> <br/> <input id="data"/> <button onclick="onClick_SendMessage()">将数据传递到子窗口</button> <br/> <button onclick="onClick_Eval()">使用eval方法向子窗口传递数据</button> <br/> <label id="label"></label> </body> </html>
event.js
const remote = window.require(‘electron‘).remote; const dialog =remote.dialog; const {ipcRenderer}=window.require(‘electron‘); const ipcMain=remote.ipcMain; ipcMain.on(‘close‘,(event,str)=>{ alert(str); }); //显示简单的消息对话框 function onClick_OpenWindow() { win=window.open("./child.html","子窗口","width=300,height=200"); //win=window.open("https://wwww.baidu.com"); } //获取窗口焦点 function onClick_Focus() { if(win!=undefined){ win.focus(); } } //让窗口失去焦点状态 function onClick_Blur() { if(win!=undefined) { win.blur(); } } //关闭窗口 function onClick_Close() { if(win!=undefined){ if(win.closed){ alert("子窗口已经关闭！"); } win.close(); } } //显示打印对话框 function onClick_Print() { if(win!=undefined) { win.print(); } } //显示打印对话框 function onClick_SendMessage() { if(win!=undefined) { //win.postMessage(data.value,‘*‘); win.postMessage({"name":data.value},‘*‘); } } function onLoad(){ window.addEventListener("message",function(e){ //data.innerText=e.data; data.innerText=e.data.name; this.alert(e.origin); }); } function closeWindow(){ const win=remote.getCurrentWindow(); ipcRenderer.send(‘close‘,‘窗口已关闭！‘); win.close(); } //显示打印对话框 function onClick_Eval() { if(win!=undefined) { win.eval(‘data.innerText="‘+data.value+‘"‘); } }
child.html
<!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>用window.open方法创建子窗口的子窗口</title> <script src="event.js"></script> <body onload="onLoad()"> <label id="data">用window.open方法创建子窗口的子窗口</label> <br/> <button onclick="closeWindow()">关闭窗口</button> <br/> </body> </html>
10、Electron使用HTML5 API创建子窗口，控制窗口，窗口之间的交互，从子窗口返回数据，页面来源，使用eval方法向子窗口传递数据