electron injection js 时机

2024-10-05

在Electron中最快速预加载脚本

背景在Electron打开新窗口的时候,提前加载一段JavaScript脚本,以此内置一些属性或接口给被打开的页面.之所以要以注入方式,而不是页面自己引用,原因是不想麻烦页面自行引用,不想修改旧有的业务逻辑. 方法一一开始是想在打开BrowserWindow后,执行executeJavaScript方法来给相应的窗口注入脚本. 不过这个方法虽然可以在相应的窗口注入脚本,但是它的执行的顺序太后,无法在页面加载时加载到,就导致了如果页面的在加载时使用了注入接口,就会有调用不到问题. 所以这个方法

electron node.js 在 vscode 设置调试 Debug

在当前工程下,添加一个 .vscode/launch.json 文件 { // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.

electron node.js 实现文件拖动读取文件

css/styles.css .for_file_drop { width: 100%; height: 100px; background-color: blueviolet; } index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World!</title> <link rel="styles

electron photobooth.js

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>欢迎系统</title> <link type="text/css" rel="stylesheet" media="screen" href="page.css" /> <title>Phot

electron中JS报错：require is not defined的问题解决方法

Electron已经发布了6.0正式版,升级后发现原来能运行的代码报错提示require is not defined 解决办法: 修改创建BrowserWindow部分的相关代码,设置属性webPreferences.nodeIntegration为 true let win = new BrowserWindow({ webPreferences: { nodeIntegration: true } }) 在原有的new BrowserWindow基础上加入 webPreferences:

（译）通过 HTML、JS 和 Electron 创建你的第一个桌面应用

原文:Creating Your First Desktop App With HTML, JS and Electron 作者:Danny Markov 近年来 web 应用变得越来越强大,但是桌面应用仍然有充分利用硬件的优势. 今天,我们可以通过我们熟悉的 HTML.JS 和 Node.js 来创建桌面应用,打包成一个可执行文件,并且发布在 Windows, OS X 和 Linux 上. 有两个受欢迎的开源项目,能够帮助我们实现这个目的.一个是几个月前我们讨论到的 NW.js,另一个是今天

记一次使用Node.js electron打包网站的记录

具体步骤请参考:http://blog.csdn.net/a727911438/article/details/70834467 打包时出现了不少问题,逐一记录下来以供其他人参考. package.json文件内容 { "name": "appname", "version": "0.1.0", "main": "./main.js", "scripts": { &q

如何用Electron Js创建第一个应用Hello World

什么是Electron Node.js和Chromium的结合品.允许只使用HTML,CSS和JavaScript来开发跨平台桌面应用. 编写第一个Electron程序(Hello World) 在开始之前确保Node.js和Electron已经正确安装,可以用node -v,electron -v来看看有没有输出版号信息确定必要环境都安装好之后就可以开始首先创建一个新的文件夹,可以叫做Hello World 在该文件夹下创建三个文件,分别是index.html,main.js,packag

electron-vue：Vue.js 开发 Electron 桌面应用

相信很多同学都知道 Electron 可以帮助开发人员使用前端技术开发桌面客户端应用,今天介绍的 electron-vue 框架是一套基于 Vue.js 开发 Electron 桌面应用的脚手架,该项目的目的,是为了要避免使用 vue 手动建立起 electron 应用程序. 您可能感兴趣的相关文章网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果[源码下载

Electron使用与学习--(基本使用与菜单操作)

对于electron是个新手,下面纯属个人理解.如有错误,欢迎指出. 一.安装如果你本地按照github上的 # Install the `electron` command globally in your $PATH npm install electron-prebuilt -g 安装不起来的话,没事.按照这个博友的方法来安装即可.Electron安装二.Electron是什么类似NW.js.但是好像比它强大很多.而且社区很活跃,很有前途. 三.废话不多说,直接上实例.

electron 入门小白贴

electron 入门小白贴 electron demo 跑起来! 毕设准备是做个跨平台的做题的客户端,打算用 electron 来弄. 然而今天折腾了半天才终于吧demo给跑起来了.经历了许多的问题,果真是应了那句"万事开头难啊" 先是吧官网的demo electron-quick-start 下载下来运行,官网说是只需要三部: # Clone the Quick Start repository $ git clone https://github.com/electron/el

electron + vue 实践项目

github地址本地安装环境准备安装node: * https://nodejs.org/en/download/ 配置webpack: npm install -g webpack(sudo权限) windows配置cnpm: npm install -g cnpm --registry=https://registry.npm.taobao.org 因为npm的默认仓库在国外,下载很慢,国内淘宝搞了个CNPM,每10分钟同步一次,完全够用了当然也可以使用yarn下载 npm insta

Electron 桌面应用打包（npm run build）简述(windows + mac)

最近一段时间在用electron+vue做内部项目的一键构建发布系统的桌面应用,现就其中打包流程写个备注,以示记录. Windows环境打包:1.首先贴一下package.json. { "name": "******",//隐藏项目名 "version": "**.**.**",//隐藏版本号 "author": "*** <***>",//隐藏作者信息 "des

electron 使用中的注意事项

一.ELECTRON引用JQUERY.JS electron不能像正常的html文件引用jq.js那样(为嘛不造),elecron引用jq.js的方式为: <script>window.$ = window.jQuery = require('jquery.js');</script> 二.ELECTRON跟JS之间的通信他们之间不能直接通信,需要使用ipc来实现通讯.例: //发信方 var ipc = require('ipc'); ipc.send('isMessage')

Electron的介绍

1.1 Electron是什么? 引用官网的一句话: Build cross platform desktop apps with JavaScript, HTML, and CSS 1.2 诞生技术背景: JavaScript近几年的全领域发展,个人理解JavaScript是思想对java的前进,从compile once,run everywhere转变为code once,run everywhere,由于JavaScript本身的是一门解释性的脚本语言,这让它逐渐的成为全宇宙使用最广泛

electron初探问题总结

使用electron时间不是很久,随着使用的深入慢慢的也遇到一些问题,下面总结一下遇到的问题与大家分享,避免趟坑. 主要问题汇总如下: webview与渲染进程renderer间通信 BrowserWindow加载第三方网站,集成node模块时导致第三方模块不可用预加载脚本preload的问题渲染线程renderer中引入Electron报错渲染进程使用require报Uncaught ReferenceError: require is not defined错 1.webview与渲染

第一章 Electron介绍 | Electron in Action(中译)

Github 官方地址代表作: Visual Studio Code Atom - Code editor. Github开源的代码编辑器,Electron起源地 Visual Studio Code - Cross-platform IDE. 近几年最火的代码IDE Hyper - Terminal. 3万多星的命令行窗口,慌了! 其他本章主要内容理解Electron是什么学习Electron基于什么技术了解使用Electron和传统Web应用程序有什么不同构建Electron应用

使用electron开发桌面级小程序自动部署系统

那一天我二十一岁,在我一生的黄金时代,我有好多奢望.我想爱,想吃,还想在一瞬间变成天上半明半暗的云,后来我才知道,生活就是个缓慢受锤的过程,人一天天老下去,奢望也一天天消逝,最后变得像挨了锤的牛一样.可是我过二十一岁生日时没有预见到这一点.我觉得自己会永远生猛下去,什么也锤不了我. 前言现在是凌晨一点,可能是在夜里的时候人会变得比较感性,所以突然想到了王小波在黄金时代中写下的这段话,没有理由的在这篇技术文章中将它作为引言.希望大家在自己的黄金时代永远的生猛下去,什么也锤不了你. 书归正传,咱们

安装ELectron失败解决方案

npm安装Electron解决方案 Electron使用npm安装时,因为是国外的镜像源,所以速度会非常慢.而使用cnpm如下命令进行安装时,又会出现安装失败的问题: npm install electron -g execute post install 1 scripts... [1/1] scripts.postinstall electron@6.0.3 run "node install.js", root: "C:\\Users\\94012\\AppData\\

npm run dev启动项目，electron提示throw new Error('Electron failed to install correctly, please delete node_modules/electron and try installing again')

npm run dev 项目,提示 throw new Error('Electron failed to install correctly, please delete node_modules/electron and try installing again') 根据提示删除electron包,重新安装一次,还是提示错误单独安装electron npm install electron -g C:\Users\pxm\AppData\Roaming\npm\electron -> C:

Electron 初识-搭建一个简易桌面应用

Electron 快速入门简介 Electron 可以让你使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用.你可以把它看作是专注于桌面应用而不是 web 服务器的,io.js 的一个变体. 这不意味着 Electron 是绑定了 GUI 库的 JavaScript.相反,Electron 使用 web 页面作为它的 GUI,所以你能把它看作成一个被 JavaScript 控制的,精简版的 Chromium 浏览器. 应用的入口在 Electron 中,入口是一个 J

electron injection js 时机

热门专题