zoukankan      html  css  js  c++  java
  • Electron通过 BrowserWindow 和 webContents 模块实现渲染进 程和渲染进程的通信

    ipcmain.js

    var {ipcMain,BrowserWindow} =require('electron');
    
    
    var path=require('path');
    
    var win=null;
    
    //接收到广播
    ipcMain.on('openWindow',function(event,aid){
            
    
    
        //调用 BrowserWindow打开新窗口
        win=new BrowserWindow({
    
            400,
            height:300,
            webPreferences:{
                nodeIntegration: true
            }
        })
        win.loadURL(path.join('file:',__dirname,'../news.html'));
        
        //开启新窗口的调试模式
        win.webContents.openDevTools();
    
    
        //通过win.webContents.send把当前数据广播给 news进程
    
        win.webContents.on('did-finish-load',function(){
    
            win.webContents.send('toNews',aid);
        })
    
    
    
    
    
    
        win.on('closed',()=>{
    
            win=null;
        })
    
    
    })

    new.js

    //获取localStorage的数据
    var {ipcRenderer} =require('electron');
    
    
    ipcRenderer.on('toNews',function(event,aid){
    
        console.log(aid);
    })

    openwidow.js

    var {ipcRenderer} =require('electron');
    
    
    
    var btn=document.querySelector('#btn');
    
    //渲染进程没法直接调用主进程中的模块,但是我们可以通过 electron中的remote模块间接的调用主进程中的模块
    
    
    btn.onclick=function(){
        // alert('点击了');
    
    
    
        var aid='123456';
    
        ipcRenderer.send('openWindow',aid);
    
    
    
    }

    new.js

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
        
            body{
                background: orange;
            }
        </style>
        
    </head>
    <body>
       news页面
    
        <br>
    
        哈哈哈
    
        <script src="renderer/news.js"></script>   
    </body>
    </html>

    index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    
        <style>    
            .content{
    
                width: 100%;
    
                height: 400px;
    
                background: orange;
    
    
                overflow-y: auto;
            }
        </style>
      
    </head>
    <body>
           
        <button id="btn">
            打开新窗口
        </button>
        
    
        <script src="renderer/openWindow.js"></script>   
    
    </body>
    </html>
  • 相关阅读:
    网站开发感悟
    jQuery之字体大小的设置
    jQuery之load方法
    jQuery之get方法
    MongoVUE的使用
    jQuery之ajax删除
    jQuery之选项卡的实现
    jQuery之简单的表单验证
    jQuery滑动效果实例
    jQuery之下拉框左右选择
  • 原文地址:https://www.cnblogs.com/loaderman/p/12149933.html
Copyright © 2011-2022 走看看