背景

在Electron打开新窗口的时候,提前加载一段JavaScript脚本,以此内置一些属性或接口给被打开的页面。之所以要以注入方式,而不是页面自己引用,原因是不想麻烦页面自行引用,不想修改旧有的业务逻辑。

方法一

一开始是想在打开BrowserWindow后,执行executeJavaScript方法来给相应的窗口注入脚本。

不过这个方法虽然可以在相应的窗口注入脚本,但是它的执行的顺序太后,无法在页面加载时加载到,就导致了如果页面的在加载时使用了注入接口,就会有调用不到问题。

所以这个方法不可行。

PS:executeJavaScript方法,https://electronjs.org/docs/api/web-contents

方法二

后来我在new BrowserWindow([options])方法,也就是新建窗口的方法找到了一个preload参数。

const { BrowserWindow } = require('electron')
const path = require('path')
const renderProcessApi = path.join(__dirname, './inject.js') let win = new BrowserWindow({
webPreferences: {
preload: renderProcessApi
}
})

这个脚本文件,会在页面加载资源前就加载执行,保证了页面无论是在什么地方、什么时候调用注入接口都能调用到。

特别注意

如果窗口是在主进程创建的,估计有人就会发现注入的脚本文件会在主进程和对应的渲染进程各执行了一遍(我也不清楚为什么会有这样的效果)。

这时有可能会导致打开窗口失败,因为注入脚本中使用的对象或方法是主进程没有的,例如window对象。

解决办法是得判断脚本是在渲染进程时,才执行脚本内容。

inject.js文件:
if (require('electron').remote) {
window.hello = function(){
console.log(‘world')
}
}

可以通过require('electron').remote,来判断是否在渲染进程。

在Electron中最快速预加载脚本的更多相关文章

  1. fakeLoader.js-针对WebApp中的 “假”预加载

    在做移动端网站的时候,前端有时候需要一些过渡效果,当然我们肯定首先想到肯定是用css3做一个过渡动画,nice,那我给大家一个好用的jQuery插件吧,让你三行代码实现这种过渡动画效果. 1.由于该插 ...

  2. spine实现预加载(一)

    前言 本文实现了spine动画的预加载,解决在战斗等大量加载spine动画的时候出现卡顿现象. 这里使用和修改三个类,直接修改的源码,当然你也可以继承LuaSkeletonAnimation,自己封装 ...

  3. viewpager和fragment预加载的解决

    在使用Viewpager和fragment处理中会出现预加载的问题,最近看别人的代码,终于找到了一个很好的处理方法 能有效的解决预加载的问题,在fragment都继承一个重写setUserVisibl ...

  4. 11月26日 用seed,预加载种子文件; Case 条件语句。网址的参数如何传递,; Query--自定义scopes

    在seed文件中输入一些预加载的种子job,注意属性和值都要有:  ❌错误,我输入contact_email的时候value值是空的,这样不能正确生成. 正确✅: for i in 1..10 do ...

  5. 预加载与智能预加载(iOS)

    来源:Draveness(@Draveness) 链接:http://www.jianshu.com/p/1519a5302141 前两次的分享分别介绍了 ASDK 对于渲染的优化以及 ASDK 中使 ...

  6. android Viewpager取消预加载及Fragment方法的学习

    1.在使用ViewPager嵌套Fragment的时候,由于VIewPager的几个Adapter的设置来说,都会有一定的预加载.通过设置setOffscreenPageLimit(int numbe ...

  7. Flex 4 自定义预加载器

    本示例的目的是在Flash Professional里创建自定义预加载器SWC,并扩展SparkDownloadProgressBar类在Flex 4应用程序中使用.    预加载器显示加载进度百分比 ...

  8. 多线程并行请求问题及SplashActivity预加载问题解决方案

    1. 问题描述(一): 现有3个线程thread1, thread2, thread3.这3个线程是并发执行的,当着3个线程都执行完成以后,需要执行一个finish()事件. 1.1 实现方法: /* ...

  9. 通过link的preload进行内容预加载

    Preload 作为一个新的web标准,旨在提高性能和为web开发人员提供更细粒度的加载控制.Preload使开发者能够自定义资源的加载逻辑,且无需忍受基于脚本的资源加载器带来的性能损失. <l ...

随机推荐

  1. 【nodejs原理&源码赏析(3)】欣赏手术级的原型链加工艺术

    [摘要] 学习经典代码中的prototype加工 示例代码托管在:http://www.github.com/dashnowords/blogs 好的代码都差不多,烂的代码却各有各的烂法. 一. 概述 ...

  2. luogu P4408 [NOI2003]逃学的小孩

    题目描述 Chris家的电话铃响起了,里面传出了Chris的老师焦急的声音:"喂,是Chris的家长吗?你们的孩子又没来上课,不想参加考试了吗?"一听说要考试,Chris的父母就心 ...

  3. 17-Python执行JS代码--PyExecJS、PyV8、Js2Py

    一.Python执行JS代码--PyExecJS.PyV8.Js2Py 1.1.PyExecJS PyExecJS的优点是您不需要照顾JavaScript环境.特别是,它可以在Windows环境中运行 ...

  4. python geohash算法逆地址编码原理初探

    1.geohash有什么用途呢?这几天刚好有个测试任务是关于设备信息位置处理的,里面提及到geohash:抱着测试的警觉性,打算研读一下这个geohash到底是什么?Geohash 是一种地理编码系统 ...

  5. ZOJ 3195 Design the city (LCA 模板题)

    Cerror is the mayor of city HangZhou. As you may know, the traffic system of this city is so terribl ...

  6. ceph 网络配置

    ceph 网络配置 9. 分离 public network 和 cluster network 9.1 分离的好处 (1)提高性能:消除副本创建.数据恢复和再平衡对 public network 的 ...

  7. 分布式算法-一致性HASH

    分布式算法 参考: https://blog.51cto.com/alanwu/1431397 https://blog.csdn.net/kojhliang/article/details/8120 ...

  8. ES6语法中的class、extends与super的原理

    class 首先, 在JavaScript中, class类是一种函数 class User {    constructor(name) { this.name = name; }    sayHi ...

  9. 【搞定Jvm面试】 JVM 垃圾回收揭秘附常见面试题解析

    JVM 垃圾回收 写在前面 本节常见面试题 问题答案在文中都有提到 如何判断对象是否死亡(两种方法). 简单的介绍一下强引用.软引用.弱引用.虚引用(虚引用与软引用和弱引用的区别.使用软引用能带来的好 ...

  10. 前台get传递含中文数据到后台出现中文乱码

    博客:(前后台文件编码相同)前台传后台中文乱码 4月4日补充 jsp页面第一句没有下面一句或者页面发布后查看源代码时第一句已经不在了 <%@ page language="java&q ...