electron 父子窗口之间通信和窗口间通信（九）

最新推荐文章于 2023-07-26 17:48:33 发布

胖鹅68

最新推荐文章于 2023-07-26 17:48:33 发布

阅读量5.4k

点赞数

分类专栏： electron、vue-electron、electron-buil

本文链接：https://blog.csdn.net/hbiao68/article/details/108728233

版权

electron、vue-electron、electron-buil 专栏收录该内容

8 篇文章 2 订阅

订阅专栏

文章目录

参考

父子窗口通信

父页面parent.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>first electron</title>
</head>
<body>
  <div>
    <button onclick="openSonWindow()">打开子窗口 window.open</button>
  </div>
  <div id="msgContainer"></div>
</body>
<script src="./js/readFile.js"></script>
<script>
const path = require('path')
// 打开一个子窗口
function openSonWindow () {
  // window.open('https://hbiao68.blog.csdn.net/')
  window.open(path.resolve(__dirname, './html/subPage.html'))
}

// 监听子窗口传递过来的数据，然后在界面上显示出来
window.addEventListener('message', (eventObj) => {
  debugger
  // document.querySelector('#msgContainer').innerHTML = JSON.stringify(eventObj)
  document.querySelector('#msgContainer').innerHTML = eventObj.data
})
  </script>
</html>

需要使用window.open打开页面

子页面 subPage.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button onclick="sendMsgToParent()">向父窗口传递信息</button>
</body>
<script>
function sendMsgToParent () {
  debugger
  window.opener.postMessage('我是子窗口传递过来的信息,oh yeah')
}
</script>
</html>

语法
window.open(URL,windowName,parameters);
参数说明

属性	说明
top	窗口顶部离开屏幕顶部的像素数
left	窗口左端离开屏幕左端的像素数
width	窗口的宽度
height	窗口的高度
menubar	窗口有没有菜单，取值yes或no
toolbar	窗口有没有工具条，取值yes或no
location	窗口有没有地址栏，取值yes或no
directories	窗口有没有连接区，取值yes或no
scrollbars	窗口有没有滚动条，取值yes或no
status	窗口有没有状态栏，取值yes或no
resizable	窗口给不给调整大小，取值yes或no

使用例子

open('','_blank','width=400,height=100,menubar=no,toolbar=no,
location=no,directories=no,status=no,scrollbars=yes,resizable=yes')

electron窗口间通信(渲染进程和主进程事件监听)

主进程

const { app, BrowserWindow, BrowserView, globalShortcut } = require('electron')
const path = require('path')
var mainWindow = null // 声明要打开的主窗口
const { Menu, ipcMain } = require('electron')

app.on('ready', () => {
  // 设置窗口的高度和宽度
  mainWindow = new BrowserWindow({
    width: 800,
    height: 800,
    // frame: false, // 是否有边框
    webPreferences: {
      nodeIntegration: true, // 设置开启nodejs环境
      enableRemoteModule: true // enableRemoteModule保证renderer.js可以可以正常require('electron').remote，此选项默认关闭且网上很多资料没有提到
    }
  })
  // 加载 指定路径的页面
  mainWindow.loadFile('./src/index.html')
  // 开启渲染进程中的调试模式
  mainWindow.webContents.openDevTools()
  // 监听窗口关闭 销毁引用
  mainWindow.on('closed', () => {
    mainWindow = null
  })
})
// 主进程监听事件
ipcMain.on('imgUploadMain', (event, message) => {
  console.log('receive render process msg')
  console.log(JSON.stringify(message))
  // 主进程向渲染进程触发事件
  mainWindow.webContents.send('imgUploadMsgFromMain', message)
})

渲染进程

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button onclick="sendToMainProcess()">
      渲染进程给主进程发送消息
    </button>
</body>
<script>
const {remote, clipboard, ipcRenderer } = require('electron');
// 渲染进程给主进程发送消息
function sendToMainProcess () {
  // 向主进程发送 imgUploadMain 事件
  ipcRenderer.send('imgUploadMain', {
    username: 'huangbiao',
    age: 18
  })
}
// 渲染进程监听 imgUploadMsgFromMain 事件
ipcRenderer.on('imgUploadMsgFromMain', (event, message) => {
  console.log('receive main process msg')
  console.log(JSON.stringify(message))
})

</script>

胖鹅68

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
electron 父子窗口之间通信和窗口间通信（九）

文章目录参考父子窗口通信electron窗口间通信(渲染进程和主进程事件监听)参考总结：子窗口创建及父窗口与子窗口之间通信electron窗口间通信父子窗口通信父页面parent.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial
复制链接

扫一扫