在电子中加载本地 html 文件的简单方法

2022-01-10 00:00:00 node.js electron javascript

我一直在尝试将小型 webapp 转换为电子应用程序.它工作得很好，除了我需要将一堆文件(.html)加载到主 DOM 中.在 webapp 中，我只是使用了 $.get，但是在 electron 中我该怎么做呢?我尝试查看 DOC，但除了 IPC 管道(我不太明白)之外，我找不到简单的方法.

I've been trying to convert a small webapp into an electron application. It's working perfectly, except I need to load a bunch of files (.html) into the main DOM. In the webapp, I just used $.get, but how can I do it in electron? 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).

谁能指出我正确的方向?

Could anyone point me to the right direction?

编辑

我会在这里澄清.我有一个启动 BrowserWindow 的主进程

I'll clarify here. I have a main process that start a BrowserWindow

mainWindow = new BrowserWindow({width: 800, height: 600})

然后，在通过 <script> 标签导入的 js 文件中，我想在对话框中加载并附加一些文件:

and then, in a js file imported via a <script> tag, I want to get load and attach some file inside a dialog:

$('.dialog').load('pages/hello.html', {})

亲切的问候

推荐答案

在 Electron 中你可以使用 fs.readFile

In Electron you can do it with fs.readFile

所以:

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');

如果我没有错字，它应该可以工作.它将文件作为字符串读取，因此您需要使用 DOMParser 解析此字符串.

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.

相关文章