在之前的文章我们介绍了一下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. Spring-AOP之工作实践（二）

    案例二.前端页面权限控制 对controllor控制器中的某写方法进行增强,如实现页面的按钮权限控制. /** * 保存session的容器 */ public class SessionContex ...

  2. Flask 的请求与响应

    flask的请求与响应 from flask import Flask,request,make_response,render_template,redirect app = Flask(__nam ...

  3. 1.vue的基础认识

    vue 1.基于MvvM MVC--MVVM,是MVC的改进版      MVVM主要是将视图的状态和行为抽象化,把视图和业务逻辑分开      M:模型--存放状态的容器,是以数据为中心的      ...

  4. 如何在本地搭建微信小程序服务器

    现在开发需要购买服务器,价格还是有点贵的,可以花费小代价就可以搭建一个服务器,可以用来开发小程序,博客等. 1.域名(备案过的) 2.阿里云注册免费的https证书 3.配置本地的nginx 4.内网 ...

  5. 2.使用nexus3配置docker私有仓库

    1,配置走起 1,创建blob存储 登陆之后,先创建一个用于存储镜像的空间. 定义一个name,下边的内容会自动补全. 然后保存. 注意:实际生产中使用,建议服务器存储500G或以上. 2,创建一个h ...

  6. Nested Report_FR

    设置好下面的关系(Mar 18做,copy from MyQ): 1) Customer.Orders.Items 的 MasterSouce.MasterField2) 后面2个的 DataSour ...

  7. os.remove() 删除文件

    概述 os.remove() 方法用于删除指定路径的文件.如果指定的路径是一个目录,将抛出OSError. 在Unix, Windows中有效 语法 remove()方法语法格式如下: os.remo ...

  8. kafka全部数据清空

    kafka全部数据清空的步骤为: 停止每台机器上的kafka: 删除kafka存储目录(server.properties文件log.dirs配置,默认为“/tmp/kafka-logs”)全部top ...

  9. Java容器相关知识点整理

    结合一些文章阅读源码后整理的Java容器常见知识点.对于一些代码细节,本文不展开来讲,有兴趣可以自行阅读参考文献. 1. 思维导图 各个容器的知识点比较分散,没有在思维导图上体现,因此看上去右半部分很 ...

  10. jmeter的参数化

    [4种参数化] 用户参数 适用于参数取值范围很小的时候使用 CSV数据文件设置 适用于参数取值范围较大的时候使用,该方法具有更大的灵活性 用户定义的变量 一般用于测试计划中不需要随请求迭代的参数设置, ...