javascript - Electron 页面导航: Loading content and attached javascript

Question

我正在尝试在 Electron 中创建一个基本的页面导航。
在 electron api demo import 用于该目的(据我所知)。关于导入，我发现它已弃用的信息是 removed 2020 年 2 月来自 Chrome。
作为替代方案， Node 模块 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');
  }
});

接下来删除 export在您的 functions.js文件，它不是必需的:

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>