博客

Electron学习 第八章

  • Post author:
  • Post category:其他




系列文章目录


创建子窗口，并通过子窗口向父窗口传递信息

文章目录



一、创建窗口页面

1、主窗口页面 index.html


代码如下（示例）：

<br /> 通过连接打开浏览器<br />

百度

点击打开子窗口

div 
<!-- 引入对应的js文件 -->
<script src="../js/demo03.js"></script>

2、子窗口页面 poppage.html


代码如下（示例）：
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PopPage</title>
</head>
<body>
    <h2>弹出的子窗口</h2>
    <button id="popbtn">向父窗口传递信息</button>

    <script>
        var popbtn = this.document.querySelector('#popbtn')
        popbtn.onclick = function(e){
        // popbtn.onclick = ()=>{
            window.opener.postMessage('我是子窗口传递过来的的信息')
        }
    </script>
</body>
</html>

3、主进程代码 main.js


代码如下（示例）：
 

// main.js
const electron = require("electron")
const app = electron.app
const BrowserWindow = electron.BrowserWindow

// 声明要打开的窗口
let mainWindow = null

app.on("ready",()=>{
    mainWindow = new BrowserWindow({
        width:800,
        height:800,
        webPreferences:{
            nodeIntegration:true, //开启node接口
            contextIsolation:false,
            webviewTag:true,
            worldSafeExecuteJavaScript: false,
            nodeIntegrationInWorker: true,
            webSecurity: false,
            enableRemoteModule: true
        }
    });

    // 打开新窗口 BrosweWindow 初始化
    require('@electron/remote/main').initialize();
       require("@electron/remote/main").enable(mainWindow.webContents);  
    // 打开调试工具
    mainWindow.webContents.openDevTools();
    mainWindow.loadFile("./index.html"); 
})

// 当所有窗口被关闭了，退出。
app.on('window-all-closed', function() {
    if (process.platform != 'darwin') {
      app.quit();
    }
});

4、渲染进程代码 render.js


代码如下（示例）：
 

const {shell} = require("electron");
// 打开子窗口，相当于创建新窗口
// window.open 打开子窗口
let mybtn =  document.querySelector("#mybtn")
mybtn.onclick = () =>{
    // 打开网页
    // window.open("https://www.bilibili.com")
    // 打开指定的 html 文件
    window.open("../html/poppage.html")
}


window.addEventListener('message',(msg)=>{
    let mytext =document.querySelector('#mytext')//渲染层中的id为text的div组件现在名字叫text
    mytext.innerHTML=JSON.stringify(msg.data)//只把msg中的data字段赋值给text，传回给div
})



二、实现效果



1. 打开子窗口

在这里插入图片描述



2. 子窗口向父窗口传递信息

在这里插入图片描述


版权声明：本文为mm_0123456789原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。