电子页面导航：加载内容和附加的 javascript

Question

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

在electron api demo 中，导入用于此目的（据我所知）。关于导入，我发现它已弃用的信息是 2020 年 2 月来自 Chrome 的 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>