即使在使用'backtick‘之后，mainWindow.loadFile(`file://${__dirname}/index.html`)-也不工作

在使用backtick之后，mainWindow.loadFile(file://${__dirname}/index.html)不工作的可能原因是路径拼接的问题。在使用backtick时，${}可以用来插入变量或表达式，但是在拼接路径时需要注意转义字符的使用。

正确的路径拼接方式应该是：

mainWindow.loadFile(`file://\${__dirname}/index.html`);

这样可以确保路径正确拼接，并加载指定的HTML文件。

关于mainWindow.loadFile的详细说明和使用示例，可以参考腾讯云的相关文档：

mainWindow.loadFile - 腾讯云文档

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

学透 Electron 自定义 Dock 图标

使用 Electron 开发时我们也会发现有一个默认的图标，但总感觉这个图标不够酷。那么，我们要如何自定义 Dock 图标呢？...通常，我们会把比较常用的软件锁定在 Dock 下，便于快速找到和使用它们。 ? 1 Dock 图标 Dock 图标在 UI 上总共包括两方面的内容：图标 Logo 和消息条数。..., 'assets/images/facetime.png') }); mainWindow.loadFile('index.html'); mainWindow.on('close..., 'assets/images/facetime.png')); ++ } mainWindow.loadFile('index.html'); mainWindow.on('close..., 'assets/images/facetime.png')); } mainWindow.loadFile('index.html'); mainWindow.on('close

3.3K2 0

Electron入门教程3 ——进程通信

, 'preload.js') } }) mainWindow.loadFile('index.html') } app.whenReady().then(() => { ipcMain.handle...在应用准备好之后，里面调用ipcMain.handle()来监听渲染进程里的ipcRenderer.invoke('openFileDialog')里定义的openFileDialog。...3. ipcRenderer.invoke的替代 ipcRenderer.invoke()有两种替代方式：（1）ipcRenderer.send() ：我们所使用的单向通信也可以用来执行双向通信。...这个WebContents实例包含一个sent方法，可以像ipcReender .send那样使用它。为了演示这个通信模式，将构建一个由菜单栏控制的数字计数器。 index.html <!...中，没有直接的方法在渲染进程之间使用ipcMain和ipRenderer模块发送消息,而且这种通信方式其实也非常少用。

1K4 0

客户端开发（Electron）URL远程启动

本篇说明：我们在使用一些客户端应用的时候，尤其是用的最多的微信，你在微信客户端打开一些页面的时一般都会默认在微信的浏览器打开，并且在右上角提供了按钮支持在你电脑上装的浏览器里打开。...://", __dirname, "index.html"); shell.openExternal(pagePath); }); 浏览器操作时：在客户端打开：第一步：注册处理协议关键API：setAsDefaultProtocolClient..., "preload.js"), nativeWindowOpen: true, }, }); mainWindow.loadFile("index.html"); };...== "darwin") app.quit(); }); ipcMain.on("shell:open", () => { const pagePath = path.join("file://"..., __dirname, "index.html"); shell.openExternal(pagePath); }); 复制代码总结：本篇涉及到了以下2点： windows中第二个窗口实例处理

1.7K3 0

自定义协议 | Electron 安全

当你设置partition:'persist:name'时，Electron 会为该窗口创建一个持久化的分区，即使应用重启，这个分区中的数据（如Cookie）也会被保留。...如果不指定或者使用partition:''（空字符串），则使用一个临时的、匿名的分区，关闭窗口后相关数据会被清除 Session: 会话（Session）在 Electron 中是一个更高级的概念，它代表了一组配置和行为...例如, http 和 https 是标准协议, 而 file 不是按标准将一个scheme注册, 将保证相对和绝对资源在使用时能够得到正确的解析。..., 'preload.js') } }) mainWindow.loadFile(path.join(__dirname, 'index.html')) } app.on('window-all-closed...== 'darwin') app.quit() }) 运行一次后，就会注册全局协议 nopteam ，之后在浏览器里输入 nopteam://index?

1301 0

webSecurity | Electron 安全

这种利用是不会成功的，因为有同源策略的限制，但是后来我们发现老版本的 Goby 显式地将 webSecurity 设置为了 false ，不然利用的话还会再难一些我们公众号开启了留言功能，欢迎大家留言讨论～这篇文章也提供了...本地加载测试同源策略 index.html <!..., 'preload.js') } }) mainWindow.loadFile('index.html') } app.whenReady().then(() => { createWindow...JavaScript 代码 webSecurity: true 在 Electron 5.0、10.0、30.0 版本中均可以成功执行远程 JavaScript 代码小结在本地加载 index.html...') 创建窗口时，webSecurity 选项并没有用，可以加载 file:// 和 http:// 这种本地或远程的 JavaScript 当通过 loadURL 加载远程页面创建窗口时，webSecurity

2051 0

Electron

窗口位置 x: 0, y: 0, //设置窗口宽高 width: 400, height: 600, frame: false, // 无边框页面(同时菜单栏也不会显示...，只是不会显示，可以通过快捷键操作) }); mainWindow.removeMenu(); //去掉菜单栏 mainWindow.loadFile("....webPreferences: { backgroundThrottling: false, //设置应用在后台正常运行 nodeIntegration: true, //设置能在页面使用.../preload.js"), }, }); mainWindow.removeMenu(); //去掉菜单栏（菜单栏的快捷键） // mainWindow.loadURL(`file...://${__dirname}/src/main.html`); mainWindow.loadFile(".

1091 0

contextIsolation | Electron 安全

npm 进行安装，之后在 Electron 进行指定使用 Deepin Linux 作为测试环境操作系统 Electron 5.0 环境准备好后，直接使用默认的配置进行测试可以看到，在 Electron...mainWindow.loadFile('index.html') // Open the DevTools....mainWindow.loadFile('index.html') // Open the DevTools....mainWindow.loadFile('index.html') app.whenReady().then(() => { createWindow() app.on('activate...mainWindow.loadFile('index.html') } app.whenReady().then(() => { createWindow() app.on('activate

1941 0

shell.openExternal | Electron 安全

其他系统注册的协议 0x04 漏洞案例 0x05 总结 0x06 PDF 版 & Github 往期文章 0x02 效果展示我们假设让用户输入一个 url ，之后传递给主进程，让主进程使用 shell.openExternal...mainWindow.loadFile('index.html') // Open the DevTools....、路径名等地方进行命令执行的方式，也不是很奏效 2....，还很懂 smb 这类服务怎么用，所以即使用户点击了客人并连接以后会跳出这个窗口，并不会执行，这个步骤就是连接 smb 服务器，此时我们再次回到程序，再次点击按钮还是仅仅会打开目录，并不会执行，即使会执行...其他系统注册的协议除了 file:// 和 smb:// 以外，系统注册的其他协议也是可以被利用的，参考文章中的作者还给出了在 Windows 上的几个案例 ms-msdt: Microsoft支持诊断工具

2211 0

nodeIntegrationInSubFrames | Electron 安全

，在 web 技术中也包含，大家了解得可能已经比较透彻了通过 iframe 的内容本身有自己独立的上下文(context)，而嵌入它的网页被称为父级浏览上下文，当然这是可以嵌套的，就像物理机里装虚拟机...大家有些时候在使用应用程序的时候，点击某个功能会跳出来一个新的窗口，这个就叫做子窗口举个例子，我们在电脑版微信中查看公众号文章时，点击文章，会出现一个新的窗口来显示文章内容，而不是在原本的窗口呢，这样原本的窗口可以继续聊天等...mainWindow.loadFile('index.html') // Open the DevTools. // mainWindow.webContents.openDevTools()..., 'preload.js') } }) // and load the index.html of the app. // mainWindow.loadFile('index.html...www.electronjs.org/zh/docs/latest/api/webview-tag https://www.electronjs.org/zh/docs/latest/api/web-contents-view 官方是不建议使用

1211 0

Electron 快速入门，顺便聊聊 IPC 通信

在 Electron 中，只有在 app 模块的 ready 事件被激发后才能创建浏览器窗口。可以通过使用 app.whenReady() API 来监听此事件。...主进程在 Node.js 环境中运行，这意味着它具有 require 模块和使用所有 Node.js API 的能力。...（比如有些人会把 ipcRenderer.send 的方法暴露给 web 端，这将允许网站发送任意的 IPC 消息）我们也可以关闭 contextIsolation，不过不建议这么做。...你可以使用它提供的一些方法从渲染进程 (web 页面) 发送同步或异步的消息到主进程。也可以接收主进程回复的消息。 5.1. 渲染进程给主线程发送消息，主线程回复 5.1.1....以上的通信方式均为异步，不过 Electron 也提供了同步的通信方式，但是同步的方式会阻塞代码的执行，最好都使用异步通信。同步用法在这里不多作介绍。

1.3K1 0

Electron快速上手并将网站直接生成桌面应用

-- index.html --> Hello World!...new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: path.join(__dirname..., 'preload.js') } }) mainWindow.loadFile('index.html') // 打开开发工具 mainWindow.webContents.openDevTools...() } // 在 Electron 中，只有在 app 模块的 ready 事件被激发后才能创建浏览器窗口 // 类似vue 的生命周期将会在 Electron 结束后初始化 app.whenReady...因此，您可以导入Chrome应用程序中不容易使用的许多模块 Electron文档要好得多缺点不适合开发轻量级的应用。即使一个electron的项目框架，也包含chromium内核。

2.4K12 2

Electron框架介绍

请使用为你平台预构建的 Node.js 安装器来进行安装，否则，您可能会遇到与不同开发工具不兼容的问题。...在 Electron 中，每个窗口中无论是本地的HTML文件还是远程URL都可以被加载显示。此教程中，您将采用本地HTML的方式。在您的项目根目录下创建一个名为index.html的文件： <!...如果没有窗口打开则打开一个窗口 (macOS) 当 Linux 和 Windows 应用在没有窗口打开时退出了，macOS 应用通常即使在没有打开任何窗口的情况下也继续运行，并且在没有窗口可用的情况下激活应用时会打开新的窗口...这里使用了两个Node.js概念： __dirname 字符串指向当前正在执行脚本的路径 (在本例中，它指向你的项目的根文件夹)。..., 'preload.js') } }) // 加载 index.html mainWindow.loadFile('index.html') // 加载 url /

4460 0

初识 Electron

('https://github.com') 加载远程 URL 或 mainWindow.loadFile(urlLocation) 加载本地 HTML 文件。...即 npm start 命令，并重新运行该命令才能看到修改后的效果，这对我们日常开发是非常不方便的，在这里建议大家下载 nodemon 来完成这部分工作，它可以监控文件的变化来完成相应的命令，这样就省去手动操作的过程...npm i nodemon -D 安装完毕之后，我们需要修改一下 start 的命令 "start": "nodemon --watch main.js --exec 'electron .'"...，例如点击按钮，需要调用到主进程上的特定 API 时，就需要进程之间进行通讯，Electron 使用 IPC (interprocess communication) 在进程之间进行通讯，这跟我们所熟悉的...('index.html') ipcMain.on('message', (event, arg) => { console.log(arg) }) }) [运行结果] 主进程在接收到渲染进程传递的信息后

1.6K8 2

Electron加载插件支持Flash

如果使用的是webview,在标签里添加 plugins 属性。 <!...display:flex; 来确保 iframe在传统和 flex 布局一起使用的情况下填充其 webview 容器的全部高度和宽度。...mainWindow.loadFile('index.html') // Open the DevTools....这时候，我们就可以在 will-navigate 事件中使用 e.preventDefault() 阻止导航至其他网页了代码如下： mainWindow.webContents.on...mainWindow.loadFile('index.html') // Open the DevTools.

3.6K4 0

内容劫持 | Electron 安全

，之后施行攻击，这将成为一场大型的攻击因此官方建议：使用 https 而不是 http；使用 wss 而不是 ws，使用 ftps 而不是 ftp 今天的内容就以 http 和 https 为例 0x02..., 'preload.js') } }) // and load the index.html of the app. // mainWindow.loadFile('index.html...建立 HTTP 服务器使用 Python3 来进行模拟，页面内容保持和原本的内容一致，之后添加恶意的标签 wget http://mirror.datamossa.io/ubuntu.../ -O index.html 4....使用 HTTPS 必须使用有效证书，不然和 HTTP 没有太大区别看起来使用 HTTPS 远程加载资源是完全安全的，但实则也不是，这里也不光是 loadURL 这种方式远程加载内容的问题，本地加载，如果被加载内容远程加载了

1571 0

nodeIntegrationInWorker | Electron 安全

通过使用 Web Worker，开发者能够有效地解决JavaScript单线程环境下可能出现的性能瓶颈问题，确保即使在执行繁重任务时，Web应用仍能保持流畅的用户界面和良好的响应速度。...共享 Worker 一对多关联，一个共享 Worker 可以被多个页面（主线程）访问和通信，适用于跨页面共享资源或协同工作从 Electron 的官方描述来看，nodeIntegrationInWorker...mainWindow.loadFile('index.html') // mainWindow.loadURL('https://iqinban.com/') // Open the DevTools...== 'darwin') app.quit() }) index.html <!...，如果没有显式的设置 sandbox:true ，即使是 Electron 20.0 版本以后，也不会对 nodeIntegration、nodeIntegrationInWorker、preload

1241 0

webpack介绍、配置、使用

…… 4、拓展说明 (1) CommonJS、AMD、CMD是用于JavaScript模块管理的三大规范，CommonJS定义的是模块的同步加载，是一个更偏向于服务器端的规范（也可以在浏览器中使用），...('path'); // 首先要引入node.js中path 模块，用于处理文件与目录的路径 // const 命令声明一个只读的常量，一旦声明，值不可以改变，改变会报错；只声明不赋值也会报错 //.../less/less1.less'); 7、实现打包url资源（图片、gif、图标等）功能在src 目录中新建imgs目录，放入两张不同大小的图片在index.html中新增 <div id="bg1...url-loader不依赖于file-loader，即使用url-loader时，只需要安装url-loader即可，不需要安装file-loader，因为url-loader内置了file-loader...file-loader进行处理，参数也会直接传给file-loader。

2.5K1 0

(824) 图片跳坑大战--css中的图片处理

5.配置url-loader 安装之后，开始使用loader，此时在loader使用时不需要用require引入，在plugins才需要使用require引入。...此处只是其中一种配置方式，其余可参考为什么只使用了url-loader？在配置loader时，我们并没有在webpack.config.js中使用file-loader，但是依然打包成功了。...简单的说，url-loader封装了file-loader，url-loader不依赖于file-loader，即使用url-loader时，只需要安装url-loader即可，不需要安装file-loader...进行处理，参数也会直接传给file-loader。...但是为了以后的操作方便，这里就顺便安装上file-loader。 6.打包在终端使用webpack命令进行打包。 webpack ?

8094 0

基于ElectronEgg&Python，从零开始打造一款免费的PDF桌面工具

前言我们经常在使用一些好用的工具上，体验不是特别友好，很多采用命令行的方式。想有一个 GUI 界面，这样操作更方便，也便于其他不懂技术的同事使用。...当然有条件有能力的朋友也可以使用纯Python独有的GUI库实现，比如近期文章中介绍的nicegui 开发一个界面很方便，不依赖ElectronEgg框架也是可以的。...使用Python实现功能之后，然后通过 nuitka 将 Python 文件打包成一个可执行文件，通过 ElectronEgg 进行调用。..., 'preload.js') } }) mainWindow.loadFile('index.html') } const openLocalPath...electron-updater，主要的逻辑代码，在打包的配置文件中设置自己的更新服务器,将打包之后的文件放在自己的服务器中。

4621 0

Electron实战之环境搭建

创建完成之后，目录结构如下所示。...vue add electron-builder 在安装的时候，只提供了 Electron v11、v12、v13 这 3 个版本选择，这里我们先选 v13。安装完成之后，目录结构如下所示。...可以看到，整体目录结构还是比较规范和清晰的，我们几乎不需要进行任何调整就可以直接使用了。在我们安装好相关的依赖后，我们可以使用下面的命令运行项目。 npm run dev 最终的效果如下图。...(join(__dirname, '.....== 'darwin') { app.quit() } }) 这和 windows 平台的操作习惯是一样的，在windows平台上，通常我们把应用的窗口都关了之后也就默认把这个应用给退出了。

900 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云