Directory structure:
Index.js is the main process JS.
Const ELECTRON = require (' electron ') Const App=Electron.appconst Browserwindow=Electron. Browserwindow//Main ProcessConst IPC = require (' electron '). Ipcmain;app.on (' Ready ',function(){ varMainWindow =NewBrowserwindow ({width:800, Height:600}) Mainwindow.loadurl (' file://' + __dirname + '/index.html ')//main WindowMainwindow.opendevtools (); varPreswindow =NewBrowserwindow ({width:300, Height:300, Show:false}) Preswindow.loadurl (' file://' + __dirname + '/preswindow.html ')//New WindowIpc.on (' Zqz-show ',function() {preswindow.show ()}) Ipc.on (' Hide-pres ',function() {preswindow.hide ()})})
Description
The main process here responds to instructions from the index.html (render process Ipcrenderer) through Ipcmain. Zqz-show, open a windowThe main process here responds to instructions from the perswindow.html (render process Ipcrenderer) through Ipcmain. Hide-pres, close a windowindex.html<!DOCTYPE HTML><HTML><Head> <title>Zqz_electron_demo</title></Head><Body>Hi</Body><Scripttype= "Text/javascript">require ('./app.js')</Script></HTML>
App.js
Const REMOTE = require (' electron '). Remote;const Menu=remote. Menu;const MenuItem=remote. MenuItem;//Rendering ProcessConst IPC = require (' electron '). Ipcrenderer;varmenu =NewMenu.buildfromtemplate ([{label:Menu, submenu: [{label:' Open new Window ', click:function() {Ipc.send (' Zqz-show ')//the registered instructions. Send to the main process index.js. } ]}]) Menu.setapplicationmenu (Menu);
preswindow.html (New Window page)
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "Utf-8"> <title>Preswindow</title></Head><Body>New Window</Body><Scripttype= "Text/javascript">Const IPC=require ('Electron'). Ipcrenderer; varButton=Document.createelement ('Button'); Button.textcontent= 'Hide'; Button.addeventlistener ('Click',function() {Ipc.send ('Hide-pres') //the registered instructions. Send to the main process index.js. }) Document.body.appendChild (button)</Script></HTML>
Effect:
Click the Hide window to close.
Electron use and learning-(communication between pages)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
