Electron学习第八章

梅子酱~

已于 2022-01-27 15:38:47 修改

阅读量808

点赞数

文章标签： electron javascript 前端

于 2022-01-27 14:45:57 首次发布

本文链接：https://blog.csdn.net/mm_0123456789/article/details/122716792

版权

系列文章目录

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

文章目录

系列文章目录
一、创建窗口页面
二、实现效果
- 1. 打开子窗口
- 2. 子窗口向父窗口传递信息

一、创建窗口页面

1、主窗口页面 index.html
代码如下（示例）：

通过连接打开浏览器百度点击打开子窗口

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. 子窗口向父窗口传递信息

在这里插入图片描述

梅子酱~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Electron学习第八章

系列文章目录创建子窗口，并通过子窗口向父窗口传递信息文章目录系列文章目录一、创建窗口页面二、实现效果1. 打开子窗口2. 子窗口向父窗口传递信息一、创建窗口页面1、主窗口页面 index.html代码如下（示例）：通过连接打开浏览器百度点击打开子窗口 div <script src="../js/demo03.js"></script&
复制链接

扫一扫