电子浏览器javascript错误答案

【问题标题】：electron browser javascript error电子浏览器javascript错误
【发布时间】：2017-11-05 03:36:28
【问题描述】：

我对节点、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 对象模型的某些集成？很抱歉缺乏理解。提前感谢您的帮助。

【问题讨论】：

失败的是网站上的 tiddlywiki 代码：(tiddlywiki.com/:27506) 在查看堆栈跟踪中引用的行之后，看起来 tiddlywiki 无法识别它启动的浏览器，因此假设它从命令行启动。

标签： javascript node.js electron tiddlywiki tiddlywiki5

【解决方案1】：

你把webPreferences放错地方了。

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

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

【讨论】：

这实际上非常适合我的要求。我还找到了另一种方法，将 webView 标记用于本地 HTML 文件。这实际上可能更好地满足我的需求，因为它允许我注入一些 js 作为页面的预加载——允许我保留一些 tiddlywiki 控制（我认为）。

【解决方案2】：

你在正确的轨道上。另一种方法是将 nodeIntegration 设置为 false 并预加载一个 js 文件，该文件将在 BrowserWindow 上下文中运行，并能够在进程加载事件触发后访问窗口对象。预加载的 javascript 文件本身就具有完整的节点集成。

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

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

如果您想将 TiddlyWiki 数据文件夹直接加载到 Electron 中，您可以尝试加载此 HTML 文件。节点集成需要在new BrowserWindow(...)中设置为true

<!doctype html>
<html>
<head></head>
<body class="tc-body">
<script>
global.$tw = global.require("./boot/bootprefix.js").bootprefix();
global.$tw.boot.argv = ['./editions/server'];
global.$tw = require("./boot/boot.js").TiddlyWiki(global.$tw);
</script>
</body>
</html>

【讨论】：

这是很好的信息@ArlenBeiler。我正在开发一个 Electron 版本的 TiddlyDesktop 作为个人项目来学习 Javascript、node 和 electron。通过添加一个可以利用“fs”的保存功能，我实际上能够通过我的 preload.js 获得保存功能。 -- $tw.saverHandler.savers.push(new MyTempSaver($tw.saverHandler.wiki));

【解决方案3】：

我最终解决这个问题的方法是在 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 的本地 file:empty.html 进行了测试，结果正常。我认为这使我能够预加载 .js 文件来控制一些 tiddlywiki 事件。必须了解更多信息才能对此进行测试。

【讨论】：