Question

我对节点，javascript和电子都很陌生。我只是想编写一个在浏览器窗口中打开本地HTML文件的简单应用程序。本地文件有一些复杂的嵌入式javascript（tiddlywiki）。这是一些示例代码（我没有在这一个中使用本地文件，但结果是相同的）：

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

let win

function createWindow () {
// Create the browser window.
win = new BrowserWindow({width: 800, height: 600})


// and load the index.html of the app.
win.loadURL(url.format({
    pathname: 'tiddlywiki.com',
    protocol: 'http:',
    slashes: true,
    webPreferences: {
      nodeIntegration: false,
 }
 }))

当电子应用程序启动时，我在浏览器开发工具中收到以下错误。

Uncaught TypeError: Cannot read property 'length' of undefined
    at Object.$tw.boot.startup (tiddlywiki.com/:27506)
    at tiddlywiki.com/:27765
    at Object.$tw.boot.decryptEncryptedTiddlers (tiddlywiki.com/:27053)
    at Object.$tw.boot.boot (tiddlywiki.com/:27763)
    at _boot (tiddlywiki.com/:27772)
    at tiddlywiki.com/:27782

我认为这是因为node.js对象模型的某些集成？抱歉缺乏了解。在此先感谢您的帮助。

Answer 1

您将webPreferences放入了错误的位置。

你必须把它放在BrowserWindow的初始化中，而不是在url.format中：

win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
        nodeIntegration: false
    }
})

Answer 2

我最终解决这个问题的方法是在main.js中使用以下代码：

 win.loadURL(url.format({
    pathname: path.join(__dirname, 'index2.html'),
    protocol: 'file:',
    slashes: true
}))

然后index2包含以下内容：

<html>
  <body>
    <webview id="webView" src="http://tiddlywiki.com" style="display:inline-flex; width:100%; height:100%" </webview>
  </body>    
</html>

还使用来自tiddlywiki.com的本地文件：empty.html 进行了测试，并且运行正常。我认为这使我能够预先加载一个.js文件来控制一些tiddlywiki事件。将不得不学习更多来测试它。

Answer 3

你走在正确的轨道上。另一种方法是将nodeIntegration设置为false并预加载一个js文件，该文件将在BrowserWindow上下文中运行，并且一旦加载了进程加载事件就能够访问窗口对象。 preload javascript文件只为自己进行完整的节点集成。

我用它来制作一个TiddlyFox处理程序，这样我就可以在我的Electron应用程序中使用TiddlyWiki中的TiddlyFox保护程序。这是它的代码。它实际上很简单。

https://github.com/Arlen22/TiddlyWiki-Electron

如果要将TiddlyWiki数据文件夹直接加载到Electron中，可以尝试加载此HTML文件。需要在ss -tunlp

中将节点集成设置为true

new BrowserWindow(...)

电子浏览器javascript错误

3 个答案: