python - 无法读取 Javascript 文件 Electron JS 中未定义的属性 'join'-6ren

python - 无法读取 Javascript 文件 Electron JS 中未定义的属性 'join'

转载作者：行者123 更新时间：2023-12-03 12:30:58

26

4

我在 Electron JS 中有一个应用程序调用 python 函数来执行 python 脚本。当脚本执行时，它应该将数据发送回 Electron JS GUI 并显示它。

我遇到的问题是它说连接未定义:

weather.js:9 Uncaught TypeError: Cannot read property 'join' of undefined at get_weather (weather.js:9) at HTMLButtonElement.onclick (weather.html:14)

这是我的 JavaScript 文件:

let {PythonShell} = require('python-shell')
var path = require("path")

function get_weather() {

  var city = document.getElementById("city").value

  var options = {
    scriptPath : path.join(__dirname, '/../engine/'),
    args : [city]
  }

  let pyshell = new PythonShell('weatherApp.py', options);


  pyshell.on('message', function(message) {
    swal(message);
  })
  document.getElementById("city").value = "";
}

“scriptPath : path.join(__dirname, '/../engine/')”这一行似乎是有问题的代码。

我的gui.html文件如下:

<html>
  <head>
    <title></title>
    <meta charset="UTF-8">
  </head>
  <body>

    <h1>Get your local weather ...</h1>
    <br>
    <br>
    <label>Enter city name here: <label>
    <input id="city" type = "text" placeholder="City">
    <button type = "button" value="clickme" onclick="get_weather()">Get Weather</button>
    <!--- <button class="btn btn-success" onclick="get_weather();">Go!</button> -->
    <br>
    <br>
    <br>
    <script src="/home/ironmantis7x/Documents/BSSLLC/projects/node_electron/electronDemoApps/guiApp/gui/linkers/weather.js"></script>
    <p><button type="button"><a href="gui.html">Back to Main Page</a></button>

  </body>
</html>

我需要修复哪些错误才能使其正常工作？

谢谢。

最佳答案

问题

自从 Electron 5 nodeIntegration 在窗口中默认被禁用。由于普通浏览器 API 不知道 require 或 join，因此您在尝试时会出错。

重新启用节点集成

您可以再次启用 nodeIntegration，但由于某种原因它被禁用了。请务必阅读并理解 electron security tutorial .

使用预加载脚本

另一种方法是使用预加载脚本。让我们看一下 BrowserWindow documentation .

当创建一个新的 BrowserWindow 时，您可以添加几个选项。对于这种情况，我们需要 webPreferences.preload 选项:

Specifies a script that will be loaded before other scripts run in the page. This script will always have access to node APIs no matter whether node integration is turned on or off. The value should be the absolute file path to the script. When node integration is turned off, the preload script can reintroduce Node global symbols back to the global scope.

请注意，预加载脚本是在渲染器进程中运行的。

示例

以下是一个示例应用程序，它打开一个带有按钮的窗口，该按钮使用 Electron 对话框来选择文件。这不适用于禁用的 nodeIntegration 但由于我们的预加载脚本，我们将 dialog.showOpenDialog() 重新引入了我们的窗口。

main.js

const { app, BrowserWindow } = require("electron");
const { join } = require("path");

let win;

app.on("ready", () => {
  win = new BrowserWindow({
    webPreferences: {
      //this is the default since electron 5
      nodeIntegration: false,
      //here you load your preload script
      preload: join(__dirname, "preload.js")
    }
  });

  win.loadURL(join(__dirname, "index.html"));
});

preload.js

const { dialog } = require("electron").remote;

window.mystuff = {
  selectFile
};

async function selectFile() {
  const files = await dialog.showOpenDialog({
    properties: ["openFile", "multiSelections"]
  });

  return files;
}

index.html

<html>
  <body>
    <main>
      <button onclick="myFunction()">select file</button>
      <ul id="foo"></ul>
    </main>
    <script>
      async function myFunction() {
        //the function provided by the preload script
        const files = await window.mystuff.selectFile();

        const list = document.getElementById("foo");

        for (const file of files) {
          const node = document.createElement("LI");
          const textNode = document.createTextNode(file);
          node.appendChild(textNode);
          list.appendChild(node);
        }
      }
    </script>
  </body>
</html>

通过 IPC 发送事件

如果您不确定您的功能是否应该在窗口中公开，您也可以通过 ipcRenderer 发送事件。

preload.js

const { ipcRenderer } = require("electron");


window.mystuff = {
  selectFile
};


function selectFile() {
  return new Promise(resolve => {
    ipcRenderer.on("selected-files", (e, files) => {
      resolve(files);
    });

    ipcRenderer.send("select-files");
  });
}

main.js 中的附加部分


ipcMain.on("select-files", async () => {
  const files = await dialog.showOpenDialog({
    properties: ["openFile", "multiSelections"]
  });

  win.webContents.send("selected-files", files);
});

关于python - 无法读取 Javascript 文件 Electron JS 中未定义的属性 'join'，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57546385/

26

4

0

文章推荐： windows - Electron OpenItem打开相同路径的新窗口

文章推荐： asp.net-web-api2 - Web API 2中的多个参数

文章推荐： javascript - 在同一图表中堆叠列而不是行

文章推荐： amazon-web-services - 限制对 VPC 的 S3 存储桶访问

join - 从一个“join”表到另一个“join”表的SqlAlchemy关系
我正在测试设置SQLAlchemy以映射现有数据库。这个数据库是很久以前自动建立的，它是由我们不再使用的先前的第三方应用程序创建的，因此 undefined 某些预期的事情，例如外键约束。该软件将管理
mysql - INNER JOIN、LEFT JOIN、RIGHT JOIN 和 FULL JOIN 有什么区别？
这个问题在这里已经有了答案: What is the difference between "INNER JOIN" and "OUTER JOIN"? (28 个答案) 关闭 7 年前。 INNE
mysql - INNER JOIN、LEFT JOIN、RIGHT JOIN 和 FULL JOIN 有什么区别？
这个问题在这里已经有了答案: What is the difference between "INNER JOIN" and "OUTER JOIN"? (29 个回答) 关闭7年前. INNER J
join - Hive:LEFT JOIN 与 JOIN 在 ON 子句中使用过滤器给出不同的结果
假设有两个表: table1.c1 table1.c2 1 1 A 2 1 B 3 1 C 4 2
join - Hive:LEFT JOIN 与 JOIN 在 ON 子句中使用过滤器给出不同的结果
假设有两个表: table1.c1 table1.c2 1 1 A 2 1 B 3 1 C 4 2
数据库Left join , Right Join, Inner Join 的相关内容，非常实用
一.先看一些最简单的例子例子 Table A aid adate 1 a1 2&nb
SQL 外链接操作小结 inner join left join right join
数据库操作语句 7. 外连接——交叉查询 7.1 查询 7.2 等值连接 7.3 右外
ruby-on-rails - :joins | change behavior inner join to left join
我有两个表 'users' 和 'lms_users' class LmsUser belongs_to :user end class User has_one :lms_user
ruby-on-rails - 首先使用 `joins()` 进行 INNER JOIN 然后是下一个表的 LEFT JOIN
我试图避免在 Rails 中对我的 joins 进行字符串插值，因为我注意到将查询器链接在一起时灵活性会降低。也就是说，我觉得 joins(:table1) 比 joins('inner join
ruby-on-rails - Rails ActiveRecord :joins with LEFT JOIN instead of INNER JOIN
我有这个代码 User.find(:all, :limit => 10, :joins => :user_points, :select => "users.*, co
join - Doctrine join 绕过延迟加载
我刚刚开始探索 Symfony2，我很惊讶它拥有如此多的强大功能。我开始做博客教程在: http://tutorial.symblog.co.uk/ 但使用的是 2.1 版而不是 2.0 我的问题是我
SQL JOIN 和不同类型的 JOIN
什么是 SQL JOIN什么是不同的类型？最佳答案插图来自 W3schools : 关于SQL JOIN 和不同类型的 JOIN，我们在Stack Overflow上找到一个类似的问题： http
join - Hive Join 返回零记录
我有两个 Hive 表，我正在尝试加入它们。这些表没有被任何字段聚集或分区。尽管表包含公共(public)键字段的记录，但连接查询始终返回 0 条记录。所有数据类型都是“字符串”数据类型。连接查询很
join - solr join - 返回父子文档
我正在使用 Solr 的(4.0.0-beta)连接功能来查询包含具有父/子关系的文档的索引。连接查询效果很好，但我只能在搜索结果中获得父文档。我相信这是预期的行为。但是，是否有可能在搜索结果中同时
join - 三向关联查询/has_many :through/join
我正在使用可用的指南/api/书籍自学 Rails，但我无法理解通过三种方式/嵌套 has_many :through 关联进行的连接。我有用户与组相关联:通过成员(member)资格。我在多对多
SQL JOIN 和不同类型的 JOIN
什么是 SQL JOIN，有哪些不同的类型？最佳答案插图来自 W3schools : 关于SQL JOIN 和不同类型的 JOIN，我们在Stack Overflow上找到一个类似的问题： htt
Mysql join 使所有 join
我正在尝试访问数据库的两个表。在商店里，我保留了一个事件列表，其中包含 Table Event id, name,datei,houri, dateF,Hourf ,capacity, age ,de
mysql - 复杂连接(Joining Joins)
我有 4 个表:booking、address、search_address 和 search_address_log 表:(相关列) 预订:(pickup_address_id, dropoff_a
Joining after join with yq(在与yq连接之后进行连接)
我在YML中有以下结构：。我正试着创造一个这样的结构：。作业名称和脚本用~分隔，作业用；分隔。。我可以使用以下命令使其正常工作。然而，我想知道是否可以用一个yq表达式来完成，而不是通过管道再次使用yq
Joining after join with yq(在与yq连接之后进行连接)
我在YML中有以下结构：。我正试着创造一个这样的结构：。作业名称和脚本用~分隔，作业用；分隔。。我可以使用以下命令使其正常工作。然而，我想知道是否可以用一个yq表达式来完成，而不是通过管道再次使用yq

首页

博学

6Ren·AI

商城

python - 无法读取 Javascript 文件 Electron JS 中未定义的属性 'join'