`document` 未定义 Electron答案

【问题标题】：`document` is not defined Electron`document` 未定义 Electron
【发布时间】：2017-11-11 07:52:03
【问题描述】：

我正在尝试使用 fs 模块从文件中读取 JSON，并将其显示在 Electron 应用程序中 ID 为 list 的 div 中。我在index.js 中的代码如下所示：

dialog.showOpenDialog((filenames) => {
  if (!filenames) return;
      
  fs.readFile(filenames[0], (err, data) => {
    if (err) {
      alert('Could not read file.\n\nDetails:\n' + err.message);
      return;
    }

    let json = JSON.parse(data).en;
    for (let i = 0; i < json.length; ++i) {
      let html = "<div class='entry'><b>";
      // Add more to html variable from json data
          
      $('list').html(html); 
    }
  });
});

我收到一条错误消息：

未捕获的异常：

错误：jQuery 需要一个带有文档的窗口

如何从 JS 中修改 DOM，为什么会出现这个错误？

【问题讨论】：

可能相关：stackoverflow.com/questions/32780726/… webContents.executeJavaScript 可用于此类目的
我确实看到了建议的答案，但我希望这将是最后的手段，并且会有更好的东西。不过，这样做确实应该更容易。
第二个答案暗示了这一点，而不是被接受的答案。对于更复杂的事情，您最好使用 ipc 通信

标签： javascript jquery electron

【解决方案1】：

您可以使用 BrowserWindow 的 webContents 的 executeJavascript 方法直接在 Renderer 进程中执行代码。

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

app.once('ready', () => {
  var mainWindow = new BrowserWindow()
  mainWindow.loadURL(path.join(__dirname, 'index.html'))

  fs.readFile(path.join(__dirname, 'test.json'), 'utf8', (err, data) => {
    if (err) {
      alert('Could not read file.\n\nDetails:\n' + err.message)
      return
    }
    let json = JSON.parse(data)
    for (let i in json) {
      mainWindow.webContents.executeJavaScript(`
        document.getElementById("list").innerHTML += '<br> ${i}: ${json[i]}'
      `)
      // can be replaced with
      // $('#list').append('<br> ${i}: ${json[i]}')
      // if html have jquery support
    }
  })
})

要在电子中使用 jquery，您应该安装 jquery 模块并在您的 HTML 中引用它

<script>window.$ = window.jQuery = require('jquery');</script>

详细说明可以看here

【讨论】：

成功了，谢谢！我之前使用了 jQuery 方法，但没有意识到要在周围范围内使用变量，我必须将其包含在 ${} 中。

【解决方案2】：

你可以试试这个

window.$ = require('jquery')(window);

它为我纠正了这个错误

【讨论】：

我将此添加到index.js，但现在它抛出：App 在加载期间抛出错误 ReferenceError: 窗口未定义似乎window 和document 由于某种原因都未定义。