为什么文档没有在 Electron renderer.js 文件中定义？

Question

I am creating a desktop app with Electron.我正在用 Electron 创建一个桌面应用程序。 I am trying to run a Python script when I click a button (made from HTML) on the app.当我单击应用程序上的按钮（由 HTML 制成）时，我试图运行 Python 脚本。 I did this by using child_process and spawn .我通过使用child_process和spawn来做到这一点。 However, when I run npm start with command prompt (Windows 10) in the directory, I am getting that document is not defined from renderer.js .但是，当我在目录中使用命令提示符（Windows 10）运行npm start时，我发现该document is not defined从renderer.js document is not defined 。

I know there is something about using ipcMain and ipcRenderer in Electron but I am not sure how to use that.我知道在 Electron 中使用ipcMain和ipcRenderer有一些ipcRenderer ，但我不确定如何使用它。 Any help is appreciated.任何帮助表示赞赏。

Here is my folder tree:这是我的文件夹树：

.
├── hello.py
├── index.html
├── main.js
├── node_modules
│       // node modules
├── package-lock.json
├── package.json
├── renderer.js
└── require.js

index.html : index.html ：

<!DOCTYPE html>
<html>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="require.js"></script>
    <body>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="require.js"></script>
        <button id="push_me" type="button">Push me</button>
    </body>
</html>

main.js : main.js :

const {app, BrowserWindow} = require('electron');
const path = require('path');
const url = require('url');
require('./renderer.js');

let win;

function createWindow() {
    win = new BrowserWindow({width: 800, height: 600, webPrefences: {nodeIntegration: true}});
    win.loadURL(url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file:',
        slashes: true
    }))

    win.on('closed', () => {
        win = null;
    })
}

app.on('ready', createWindow);
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
})

renderer.js : renderer.js ：

var pushMe = document.getElementById('push_me');
pushMe.addEventListener('click', runPython());

function runPython() {
    var python = require(['child_process']).spawn('python', ['hello.py']);
    python.stdout.on('data', function(data) { console.log(data.toString('utf8')); });
}

hello.py : hello.py ：

print("Hello, world!")

package.json : package.json :

{
  "name": "app_ui",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "electron": "^8.1.1",
    "jquery": "^3.4.1",
    "python-shell": "^1.0.8"
  }
}

Answer 1

You're trying to access document from the main process.您正在尝试从主进程访问document 。 This is wrong.这是错误的。 You can only access DOM APIs inside renderer processes.您只能访问渲染器进程内的 DOM API。 I recommend reading the docs to know the differences between main and renderer processes.我建议阅读文档以了解主进程和渲染器进程之间的区别。

Your index.html should look like this你的 index.html 应该是这样的

<!DOCTYPE html>
<html>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="require.js"></script>
    <body>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="require.js"></script>
        <button id="push_me" type="button">Push me</button>
        <script src="renderer.js"></script> <!-- load renderer.js here -->
    </body>
</html>

and you should remove require('./renderer.js');你应该删除require('./renderer.js'); from main.js来自 main.js

为什么文档没有在 Electron renderer.js 文件中定义？

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-03-17 16:06:12

为什么文档没有在 Electron renderer.js 文件中定义？

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-03-17 16:06:12

解决方案1
1 已采纳 2020-03-17 16:06:12