# Electron Remote模块
[TOC]
Electron remote 模块提供了一种在渲染进程(网页)和主进程之间进行进程间通讯(IPC)的简便途径。
## 案例Demo
Electron 渲染进程中通过remote模块调用主进程中的BrowserWindow 打开新窗口
- 设置enableRemoteModule
在**Electron 10.x**中,enableRemoteModule的默认值为false,也就是默认情况下是不支持使用remote模块的,因此使用remote模块的应用程序需要将enableRemoteModule显式设置为true。
```
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
enableRemoteModule: true // 使用remote模块
}
})
```
- 创建demo2.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 id="btn">打开Yellow页面窗口</Button><br/>
<script src="demo2.js"></script>
</body>
</html>
~~~
- 创建demo2.js
~~~
const btn = this.document.querySelector('#btn')
const BrowserWindow =require('electron').remote.BrowserWindow
window.onload = function(){
btn.onclick = ()=>{
newWin = new BrowserWindow({
width:500,
height:500,
})
newWin.loadFile('renderer/yellow.html')
newWin.on('close',()=>{win=null})
}
}
~~~
- 创建yellow.html
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Yellow</title>
</head>
<body style="background-color:yellow">
<div>
<h1>Yellow</h1>
</div>
</body>
</html>
- 修改main.js
~~~
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
enableRemoteModule: true // 使用remote模块
}
})
win.loadFile('renderer/demo2.html')
}
~~~
- 运行
![](https://img.kancloud.cn/f9/a2/f9a2745efff6b45fb3ef184e453a57be_785x592.png)
## 源码
链接:https://share.weiyun.com/f7A8MUEn 密码:baufbu