[英]Easy way to load local html file in electron
I've been trying to convert a small webapp into an electron application.我一直在尝试将小型 web 应用程序转换为电子应用程序。 It's working perfectly, except I need to load a bunch of files (.html) into the main DOM.
它运行良好,除了我需要将一堆文件 (.html) 加载到主 DOM 中。 In the webapp, I just used
$.get
, but how can I do it in electron?在 webapp 中,我只使用了
$.get
,但是我怎么能在电子中做到呢? I try looking at the DOC but I cannot find an easy way to do that, beside an IPC pipe (and I don't quite get it).我尝试查看 DOC,但除了 IPC 管道(我不太明白)之外,我找不到一种简单的方法来做到这一点。
Could anyone point me to the right direction?有人能指出我正确的方向吗?
Edit编辑
I'll clarify here.我会在这里澄清。 I have a main process that start a BrowserWindow
我有一个启动 BrowserWindow 的主进程
mainWindow = new BrowserWindow({width: 800, height: 600})
and then, in a js
file imported via a <script>
tag, I want to get load and attach some file inside a dialog:然后,在通过
<script>
标签导入的js
文件中,我想加载并在对话框中附加一些文件:
$('.dialog').load('pages/hello.html', {})
Kind regards亲切的问候
In Electron you can do it with fs.readFile
在 Electron 中,您可以使用
fs.readFile
So :所以 :
const fs = require('fs');
const { promisify } = require('util');
const path = require('path');
const readFile = promisify(fs.readFile);
async function loadHTML(html){
const render = await readFile(path.join(__dirname, html), 'utf-8');
const parser = new DOMParser();
const childrenArray = parser.parseFromString(render,'text/html').querySelector('body').childNodes;
const frag = document.createDocumentFragment();
childrenArray.forEach(item => {
frag.appendChild(item);
});
document.body.appendChild(frag);
};
loadHTML('/path/to/my/index.html');
If I don't have a Typo, it should work.如果我没有打字错误,它应该可以工作。 it reads the file as a string so you need to parse this String with the DOMParser.
它将文件作为字符串读取,因此您需要使用 DOMParser 解析此字符串。
On the Electron side you will have this code starting with the electron
library.在 Electron 方面,您将拥有从
electron
库开始的代码。 With ES6 destructuring you can pull the app
property off.通过 ES6 解构,您可以关闭
app
属性。 The app
object represents the overall running process on your machine. app
对象代表您机器上的整体运行过程。
const electron = require('electron');
const { app } = electron;
Then you want to add on an event handler:然后你想添加一个事件处理程序:
app.on('ready', () => {
console.log('app is ready');
});
Once you have this running successfully.一旦你成功运行了这个。 You have pulled the
app
property which is the underlying process.您已经拉取了作为底层进程的
app
属性。 You have successfully added your event based function using the app
object.您已使用
app
对象成功添加了基于事件的函数。
So you then want to create a new browser window to show content to the user, you pull off another property called BrowserWindow
, pass it an empty object with your configuration.因此,您然后想要创建一个新的浏览器窗口来向用户显示内容,您拉出另一个名为
BrowserWindow
属性,将一个带有您的配置的空对象传递给它。
const electron = require('electron');
const { app, BrowserWindow } = electron;
app.on('ready', () => {
const mainWindow = new BrowserWindow({width: 800, height: 600});
});
You can then load the HTML document by calling the method loadURL()
passing ES6 template string:然后,您可以通过调用传递 ES6 模板字符串的方法
loadURL()
来加载 HTML 文档:
const electron = require('electron');
const { app, BrowserWindow } = electron;
app.on('ready', () => {
const mainWindow = new BrowserWindow({width: 800, height: 600});
mainWindow.loadURL(`file://${__dirname}/index.html`);
});
Load like this:像这样加载:
`file://${path.join(__dirname,"/../../../../../../src/offline.html")}`
Let's try to understand each part:让我们试着理解每个部分:
Reason![]() |
|
---|---|
file |
we will be accessing file protocol, not HTTP directly![]() |
__dirname |
comes with node integration in electron, everyone should set it to true![]() |
path.join |
else navigating up won't happen actually, it will be simple string concatenation![]() |
why all those nav up?![]() |
maybe it's development dependant, for my case I had to log and find that src directory![]() |
About that navigating up, I tried on different OS and PC, most of the cases were the same.关于导航,我尝试了不同的操作系统和PC,大多数情况都是一样的。 Except for one exception.
除了一个例外。 Which also had a different config.
这也有不同的配置。 And I didn't dare to change that, as the config is working.
我不敢改变它,因为配置正在起作用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.