electron中加载html,electron页面加载函数loadFile

最新推荐文章于 2024-05-27 16:10:53 发布

camsong

最新推荐文章于 2024-05-27 16:10:53 发布

阅读量6.3k

点赞数 1

文章标签： electron中加载html

在electron迎来3.0之际，一些备受诟病的函数和特性，也获得了改善和提升。其中，最显著的莫过于每个electron的一个入口函数了，那就是loadUrl()函数。目前最新的electron3.x系列，支持一个新的函数叫做loadFile()，简直是比原来的loadUrl()加载本地页面不知道要好用多少倍。

低版本electron不支持loadFile

在1.x和2.x的electron中，如果要使用loadFile函数，就会报错unknown function。

Uncaught Exception:

TypeError: mainWindow.loadFile is not a function

at App.createWindow (/Users/sunan/Downloads/electron-quick-start-master/main.js:13:14)

at emitTwo (events.js:130:20)

at App.emit (events.js:213:7)

loadFile 对比 loadUrl

main.js：

mainWindow =

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

camsong

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
electron中加载html,electron页面加载函数loadFile

在electron迎来3.0之际，一些备受诟病的函数和特性，也获得了改善和提升。其中，最显著的莫过于每个electron的一个入口函数了，那就是loadUrl()函数。目前最新的electron3.x系列，支持一个新的函数叫做loadFile()，简直是比原来的loadUrl()加载本地页面不知道要好用多少倍。低版本electron不支持loadFile在1.x和2.x的electron中，如果要...
复制链接

扫一扫

Electron中通过globalShortcut实现监听键盘事件进而实现快捷键功能示例代码.zip

06-03

mainWindow.loadFile('index.html') } app.on('ready', createWindow) ``` 现在，我们可以在应用准备就绪后注册快捷键。例如，我们想要监听`Ctrl+Shift+A`这个组合键，可以这样实现： ```javascript app.on('...

银河麒麟 electron loadURL打不开，loadFile 传参

zcc的博客

08-25

2774

使用electron 开发桌面应用时：以下代码，windows 下 electron（都是10.1.3版本）使用loadURL 可以打开，但麒麟下loadURL 不行，白屏。在麒麟下软件左上角图标icon 要改成 png 格式，512*512 才能显示。内核：Linux 5.4.18-28.23-bj-generic。版本：银河麒麟桌面操作系统V10（SP1）架构： loongarch64。

参与评论您还未登录，请先登录后发表或查看评论

Electron-与Vue合并实现热重载

繁花落幕的博客

02-24

1638

前言 vue 或 ng 项目要在 electron 下运行，通常要先打包，然后将打包后的内容挪到 electron 项目下再运行，流程： build --> 复制 --> electron . 上面的步骤略微麻烦，合并项目可以简化手动步骤，一部到位： build && electron . 缺点是不能实现热重载，肯定有办法可以实现，但是我不会 (￣▽￣)"，暂时...

electron加载第三方网站到自己项目中

最新发布

weixin_43862642的博客

05-27

421

主要用于加载自己的其他项目页面时用iframe和webview等方法无法操作cookie和localstorage等页面缓存，因此用electron来显示并且实现免密登录，主要是免密登录在不同场景下需要用不同的方法来实现。（1）后台通过请求后台接口或者其他方法获取到对应网站的令牌（能调接口的话尽量不要用selenium的方式，非常不稳定）注意：切记在未获取第三方网站前将别人的网站抓过来显示，容易引发不必要的问题。（2）electron实现免密登录（重点来了）a.通过cookie保存令牌的情况。

electron loadFile/loadURL 耗时很长问题分析

m0_37394102的博客

06-16

3458

解决BrowserWindow loadURL 耗时很长问题

electron loadFile使用哈希路由的一个小问题

hihiword的博客

03-20

292

开发环境用loadURL,而生产环境要用loadFile，之前的版本是可以在路径直接写路由的，现在不行了。但是开发环境两种路由都不受影响。生产环境目前只试过用哈希路由成功过，history暂时不晓得咋配置。最近找资料学electron，但有很多坑，因为electron更新实在太快了。生产环境的哈希路由，哈希要写在第二个参数对象里，不能直接拼接在路径上了。

【electron】打包过程中的一些坑

渐墨深的博客

11-09

4453

1.应用白屏本地运行正常，打包后白屏，大概率是loadFile路径不对其中index.html的路径要根据打包后的main.js的相对路径，打包后main.js的层级变了，需要对应修改，renderer和main的目录是并列的 win.loadFile(path.join(__dirname, '../../renderer/index.html')); 2. 整个应用打包后找不到main.js文件 ⨯ Application entry file "main/main.js" in th

electron 一次打包配置多个地址

weixin_47964331的博客

03-30

1145

electron 打包一个壳子配置多个地址上回说到配置应用打开的地址，咱们可以通过修改mainWindow.loadFile或者mainWindow.loadURL改变打包后的访问地址，但是因为收到了一个项目的需求，主要是为了减轻每次打包浪费的时间，让实施能够用一个壳子的情况下，自己配置访问的地址内容。所以翻了许多文档和方法，最后决定用一个最简单的办法解决，具体内容往下看。我们知道打包后，实际可以把壳子看作一个浏览器（Google Chromium），所以我们就知道可以通过修改访问地址直接应用。基础打

使用Webpack/React去打包构建Electron应用

daydream13580130043的博客

07-02

3570

前言 Electron是一个跨平台创建桌面应用程序的框架，允许我们使用HTML/CSS/JS去创建跨平台桌面应用程序。随着大前端的发展，当我们去开发Web UI时，会习惯性的使用Webpack等构建工具以及React等钱的MVVM框架去辅助开发。在开发Electron时也是同理，因此本文将介绍如何使用Webpack/React去打包构建整个Electron应用，并使用Electron-builder构建出App。其实社区提供了很多Electron Webpack的脚手架和模版，比如electron-forg

electron.rar

11-18

win.loadFile('index.html') } app.whenReady().then(() => { createWindow() app.on('activate', function () { if (BrowserWindow.getAllWindows().length === 0) createWindow() }) }) app.on('window-...

js代码-electron生成sha512

07-15

mainWindow.loadFile('index.html'); // 在这里处理用户登录 mainWindow.webContents.on('did-finish-load', () => { mainWindow.webContents.executeJavaScript(` // 假设这是从用户界面获取的密码 const ...

JavaScript-GUI-Electron

05-29

mainWindow.loadFile('index.html') } app.whenReady().then(() => { createWindow() app.on('activate', function () { if (BrowserWindow.getAllWindows().length === 0) createWindow() }) }) app.on('...

My-first-Electron-JS-:这是我的第一个Electron JS脚本

05-04

这段代码首先导入了Electron的`app`和`BrowserWindow`模块，然后定义了一个函数`createWindow`来创建窗口并加载`index.html`文件。 4. **HTML与CSS** `index.html`文件是应用的用户界面，这里你可以使用标准的...

给vue+Electron的项目加一个加载页面loadpage

ddx2019的博客

07-04

3551

主要加了initApp方法；以及有关loading的； background.js: import { app, protocol, BrowserWindow, shell, dialog,Menu } from 'electron' import { createProtocol } from 'vue-cli-plugin-electron-builder/lib' const isDevelopment = process.env.NODE_ENV !== 'production' let w

Electron快速入门

路漫漫其修远兮，吾将上下而求索

06-29

3118

Electron是由GitHub众多开发者开发的一个开源项目，能够使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序。当然了，它也可以与vue和react相结合。前端的小伙伴们，学习它应该很快，是很容易上手的一门技术。文档编写不易，还请各位耐心观看。另外本人能力有限，如有不足之处，还请不吝批评指正！Electron 运行的main脚本的进程被称为主进程。在主进程中运行的脚本通过创建web页面来展示用户界面。一个 Electron 应用总是有且只有一个主进程。

【electron】electron安装过慢和打包报错：Unable to load file:

SunPeng的博客

08-12

1267

【electron】electron安装过慢和打包报错：Unable to load file:

electron使用

一个萝卜一个坑的博客

06-05

436

Electron使用1.下载官方dome;2.打包成桌面应用；3.将.exe文件打包成安装包； 1.下载官方dome; # 克隆这仓库 git clone https://github.com/electron/electron-quick-start # 进入仓库 cd electron-quick-start # 安装依赖库 npm install # 运行应用 npm start 2.打包成桌面应用； //1 安装打包工具，此处安装出问题，需要修改npm 配置文件，详情见下； npm instal

Electron在跨平台时候的小问题

12-14

355

我还真没想到会有这种问题，在win上开发的好好的程序，放到mac上细节就出问题。 win下主进程中加载index.html的语句如下 mainWindow.loadURL(`${__dirname}/index.html`); 注意不是单引号，而是‘·’，就是键盘esc键下面那个东东。而在mac下，electron-quick-start给的加载方式是： mainWindow.lo...

vue项目打包桌面程序

han_xiao_xiao的博客

11-18

944

cnpm run packager 出现问题：13.229.188.59:443 timeout 1.无效（×） npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver 有效 set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/ cnpm run packager ...

electron vue 加载白屏

06-02

在 Electron 项目中，如果使用 Vue.js 作为前端框架，在启动应用程序时可能会遇到加载白屏的问题。这通常是由于 Vue.js 构建后的代码需要在本地运行，而 Electron 默认情况下不会加载本地文件。解决这个问题的方法是在主进程中为 Electron 添加一个本地文件访问协议（file://），并将访问限制设置为允许所有来源。可以在主进程中添加以下代码： ```javascript const {app, BrowserWindow} = require('electron') const path = require('path') app.commandLine.appendSwitch('disable-site-isolation-trials'); app.commandLine.appendSwitch('disable-features', 'OutOfBlinkCors'); function createWindow () { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { webSecurity: false // 允许加载本地文件 } }) // 加载 Vue.js 打包后的 HTML 文件 win.loadFile(path.join(__dirname, 'dist', 'index.html')) // 打开开发者工具 win.webContents.openDevTools() } app.whenReady().then(() => { createWindow() app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow() } }) }) app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) ``` 在这个例子中，我们为 `BrowserWindow` 的 `webPreferences` 添加了 `webSecurity: false`，这样就允许加载本地文件了。同时，在 `createWindow` 函数中，我们使用 `loadFile` 方法加载 Vue.js 打包后的 HTML 文件，该文件位于 `dist/index.html`。最后，我们打开开发者工具（`win.webContents.openDevTools()`）以方便调试。需要注意的是，在生产环境中，应该将 `webSecurity` 设置为 `true`，以避免安全问题。