时间戳

首页 > 解决方案 > 电子页面导航：加载内容和附加的 javascript

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

问题描述

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

在电子 api 演示中，导入用于该目的（据我所知）。关于导入，我发现它已于 2020 年 2 月从 Chrome 中删除
并已弃用的信息。 作为替代方案，可以使用Node-module fs 。我的问题：脚本没有加载。

将内容和附加的 javascript 加载到 div 的最佳方法是什么？

Github代码：

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

标签： javascripthtmlnode.jselectronfs

解决方案

好的，首先，我们正在使用动态 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>

推荐阅读