Electron 页面导航：正在加载内容并附加 javascript

Question

我正在尝试在 electron 中创建一个基本的页面导航。

在 2020 年 2 月 Chrome 的 electron api demo import is used for that purpose(as far as I can understand it). Regarding the import I found the information that its deprecated and was removed 中。
作为替代方案，可以使用 Node-module fs。我的问题：脚本未加载。

加载内容并将 javascript 附加到 div 中的最佳方式是什么？

Github Code:

感谢@Entertain，问题得以解决。我已经更新了 Git-Repo。

Answer 1

好的，首先，我们正在处理动态 DOM 元素。这意味着 addEventListener 被评估一次，并且在您将新元素动态添加到 DOM 后，它不会被应用。 winController.js 中的解决方法将有助于：

// Hello.addEventListener("click", function () {
//   loadPage("./assets/html/Hello.html", "content");
// });

// Info.addEventListener("click", function () {
//   loadPage("./assets/html/Info.html", "content");
// });

// This implementation doesn't care whether an element with the given id exists
document.addEventListener('click', function (e) {
  if (e.target && e.target.id == 'Hello') {
    loadPage('./assets/html/Hello.html', 'content');
  } else if (e.target && e.target.id == 'Info') {
    loadPage('./assets/html/Info.html', 'content');
  }
});

接下来删除 functions.js 文件中的 export，不需要它：

function thanks() {
  alert('Thanks');
}

唯一剩下的，也是最重要的，就是更新我们如何动态加载 functions.js 文件：

<!-- <script type="module" src="../js/functions.js"></script> -->
<script type="module">
  let script = document.createElement('script');
  script.src = './assets/js/functions.js';
  document.head.append(script);
  
  // function thanks() {
  //     alert("Thanks");
  //   }
  Say.addEventListener('click', function () {
    thanks();
  });
</script>

就是这样，在更改之后您的警报应该会触发！

编辑： 请将您的 Hello.Html 重命名为 Hello.html，否则以后最好将所有内容都写成小写，以防止出现更多错误：hello.html 和 info.html.

注意： 在您的 Info.html 文件中，您的按钮 ID 错误：

<!-- <button type="submit" class="btn btn-success btn-lg mt-2" id="Info"> -->
<button type="submit" class="btn btn-success btn-lg mt-2" id="Hello">
  Jump to Hello
</button>

Electron 页面导航：正在加载内容并附加 javascript

Electron page navigation: Loading content and attached javascript

html

javascript

fs

node.js

electron

我正在尝试在 electron 中创建一个基本的页面导航。