Question

我一直在尝试将小型Web应用程序转换为电子应用程序。它工作正常，除了我需要将一堆文件（.html）加载到主DOM中。在Web应用程序中，我只使用了$.get，但如何在电子中实现呢？我尝试查看DOC，但是除了IPC管道（我不太了解）之外，我找不到简单的方法。

有人能指出我正确的方向吗？

修改

我会在这里澄清。我有一个启动浏览器窗口的主要过程

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

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

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

亲切的问候

Answer 1

在Electron中，您可以使用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 childernArray = 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解析此字符串。

Answer 2

在电子方面，您将从electron库开始获得此代码。使用ES6解构，您可以拉开app属性。 app对象代表您计算机上的总体运行过程。

const electron = require('electron');
const { app } = electron;

然后您要添加一个事件处理程序：

app.on('ready', () => {
      console.log('app is ready');
});

一旦成功运行此命令。您已经提取了app属性，它是基础过程。您已经使用app对象成功添加了基于事件的函数。

因此，您然后要创建一个新的浏览器窗口以向用户显示内容，请拉出另一个名为BrowserWindow的属性，并使用您的配置将其传递给空对象。

const electron = require('electron');
const { app, BrowserWindow } = electron;

app.on('ready', () => {
  const mainWindow = new BrowserWindow({width: 800, height: 600});
});

然后您可以通过调用方法loadURL()并传递ES6模板字符串来加载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`);
});

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

2 个答案: