在之前的文章我们介绍了一下Electron的菜单创建和事件绑定，其中提到了一个remote模块，接下来我们继续说一下Electron的这个remote模块。

官方关于remote模块的地址：https://www.electronjs.org/docs/api/remote

remote 模块为渲染进程（web页面）和主进程通信（IPC）提供了一种简单方法。

在Electron中, GUI 相关的模块 (如  dialog、menu 等) 仅在主进程中可用, 在渲染进程中不可用。 为了在渲染进程中使用它们, ipc 模块是向主进程发送进程间消息所必需的。 使用 remote 模块, 你可以调用 main 进程对象的方法, 而不必显式发送进程间消息, 类似于 Java 的 RMI。
例如：从渲染进程创建浏览器窗口。

上面是官方对remote的基本介绍，之前我们说过package.json中的main乳肉就是Electron的主进程，渲染的index.html页面相当于一个渲染进程，如果我们想要在idnex.html中打开一个页面，如果还用index.js中的方法的话就相当于又开了一个进程，这显然是不可取的，所以Electron就为我们提供了remote模块来解决此问题。

根据上面的解释，我们就来做一个这样的页面中打开另一个页面的功能，先看一下上一章说完之后的目录结构：

我们先在index.html中第一一个button按钮，点击该按钮来行使打开另一个页面的方法：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>hello world</title>

 </head>

 <body>

 <div>

     <button id="btn">点我打开其他页面</button>

     <script>

         let btn = document.getElementById('btn');

         /* 之前在 index.js 中引入 BrowserWindow 的方式 */

         // const {BrowserWindow} = require('electron');

         /* 通过remote模块引入 BrowserWindow 的方式 */

         let {BrowserWindow} = require('electron').remote;

         window.onload = function () {

             btn.onclick = () => {

                 let win = new BrowserWindow({

                     width: 500,

                     height: 500,

                     x: 500, // 相对于电脑桌面向右位移500px

                     y: 500, // 相对于电脑桌面向下位移500px

                 });

                 win.loadFile('other.html')

             }

         }

     </script>

 </div>

 </body>

 </html>

在上面的代码中，我们定义了一个button按钮，并在下面写了一段JS代码，当点击该按钮时，触发一个Electron的打开窗口的方法，和之前写的略有不同的是我们在引入 BrowserWindow 方法时是从electron的一个 remote 模块中添加的，我们在同级目录下创建一个 other.html 的文件，运行起来看一下运行效果：

上面的效果符合我们的预期，如果我们不实用remote模块而直接调用BrowserWindow方法会出现什么结果呢？即把上面的第 14 行注释解开，将第 17 行注释掉，运行一下：

通过控制台可以看出报错了，并没有达到我们打开另一个窗口的预期。

注意: 反过来（如果需要从主进程访问渲染进程），可以使用 webContents. executeJavascript。

注意事项： 因为安全原因，remote 模块能在以下几种情况下被禁用：

  • BrowserWindow - 通过设置 enableRemoteModule 选项为 false。
  • <webview> - 通过把  enableremotemodule属性设置成 false。

remote模块也能反问主进程中的内置模块，主过程中的内置模块被添加为 remote 模块中的获取器，因此可以像 electron 模块一样直接使用它们。

 const app = require('electron').remote.app

 console.log(app)

以上是关于 remote 的简单介绍，在日常开发中我们还会经常使用该模块及它的另一些方法，

从零开始学Electron笔记（三）的更多相关文章

  1. 从零开始学Electron笔记（四）

    在之前的文章我们介绍了一下Electron的这个remote模块,接下来我们继续说一下Electron的右键菜单的制作. 在我们日常我们使用的软件中都会存在右键菜单的情况,比如我们用到的浏览器,开发所 ...

  2. 从零开始学Electron笔记（一）

    前端技术在最近几年迅猛发展,在任何开发领域我们都能看到前端的身影,从PC端到手机端,从APP到小程序,似乎前端已经无所不能,这就要求我们需要不断地去学习来提升自己!前段时间尤大通过直播介绍了一下Vue ...

  3. 从零开始学Electron笔记（六）

    在之前的文章我们介绍了一下Electron如何通过链接打开浏览器和嵌入网页,接下来我们继续说一下Electron中的对话框 Dialog和消息通知 Notification. 在之前的文章中其实我们是 ...

  4. 从零开始学Electron笔记（二）

    在之前的文章我们简单介绍了一下Electron可以用WEB语言开发桌面级应用,接下来我们继续说一下Electron的菜单创建和事件绑定. 我们接上一章的代码继续编写,上一章代码 https://www ...

  5. 从零开始学Electron笔记（五）

    在之前的文章我们介绍了一下Electron的右键菜单的制作,接下来我们继续说一下Electron如何通过链接打开浏览器和嵌入网页. 现在有这样一个需求,我们要在我们的软件中加一个链接,然后点击该链接打 ...

  6. 从零开始学Electron笔记（七）

    在之前的文章我们介绍了一下Electron中的对话框 Dialog和消息通知 Notification,接下来我们继续说一下Electron中的系统快捷键及应用打包. 全局快捷键模块就是 global ...

  7. 从零开始学Xamarin.Forms(三) Android 制作启动画面

    原文:从零开始学Xamarin.Forms(三) Android 制作启动画面     Xamarin.Forms 在启动的时候相当慢,必须添加一个启动界面,步骤如下: 1.将启动画面的图片命名为:s ...

  8. 从零开始学架构（三）UML建模

    文章大纲 1.  文章介绍 2.  UML概述 3.  静态模型 4.  动态模型 5.  UML建模的一般过程 一.文章介绍 1.1为什么学习UML (1)UML是一种软件架构的模型表现方法,用于项 ...

  9. Mysql 5.5从零开始学阅读笔记

    第一章 1.什么是数据库? 数据库包含两层含义:保管数据的“仓库”,以及数据管理的方法和技术. 2.表 行被称为记录,列被称为字段 3.主键 primary key,用于唯一标识表中的每一条记录,主键 ...

随机推荐

  1. Grafana6.4.4 + zabbix 4.2

    环境简介 OS:Centos 7.4 zabbix:4.2.6 Grafana:6.4.4 一.yum 直接安装的方式 官方推荐有几种安装方式我采用yum 直接安装的方式 官方doc: https:/ ...

  2. Error:org.gradle.api.internal.tasks.DefaultTaskInputs$TaskInputUnionFileCollection cannot be cast to...异常处理

    这个是打开Android Studio项目报的错误提示,单纯从上面的提示还是不能太直接的知道什么问题.后来我想这个项目的Gradle版本与我当前AS使用的版本不一致,可能是这个问题. 修改build. ...

  3. [CQOI2007]矩形

    题目   点这里看题目. 分析   插头 DP ,考虑枚举一下两块之间的分割线,本质上就是两个端点都在边界上的路径.    DP 过程中,我们将没有端点在边界上面的路径称为 1 路径,反之叫 2 路径 ...

  4. Uint47 calculator【map数组+快速积+各种取余公式】

    Uint47 calculator 题目链接(点击) In the distant space, there is a technologically advanced planet. One day ...

  5. SUBSTRING / CHARINDEX_函数随手练_2

    SUBSTRING / CHARINDEX_函数随手练_2环境:MSSQL 2014(AdventureWorks2008R2附加到2014中的表 Location) /* Learning SQL ...

  6. 如何在python列表中查找某个元素的索引

    如何在python列表中查找某个元素的索引 2019-03-15 百度上回复别人的问题,几种方式的回答: 1) print('*'*15,'想找出里面有重复数据的索引值','*'*15) listA ...

  7. 【asp.net core 系列】9 实战之 UnitOfWork以及自定义代码生成

    0. 前言 在前一篇中我们创建了一个基于EF的数据查询接口实现基类,这一篇我将带领大家讲一下为这EF补充一些功能,并且提供一个解决避免写大量配置类的方案. 1. SaveChanges的外移 在之前介 ...

  8. charles 破解方法

    1.https://www.charlesproxy.com/latest-release/download.do 官网下载charles 2.傻瓜式安装完成(路径可以默认c盘) 3.安装完成后去c盘 ...

  9. 一行代码让你的python运行速度提高100倍

    转自:https://www.cnblogs.com/xihuineng/p/10630116.html 加上之后运行速度快了十倍,我的天呐. python一直被病垢运行速度太慢,但是实际上pytho ...

  10. 10.实战交付一套dubbo微服务到k8s集群(3)之二进制安装Maven

    maven官网:https://maven.apache.org/ maven二进制下载连接:https://archive.apache.org/dist/maven/maven-3/3.6.1/b ...