問題描述

我一直在嘗試將小型 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.

這篇關于在電子中加載本地 html 文件的簡單方法的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！