Блог

Я пытаюсь создать базовую навигацию по страницам в electron.

В electron api для этой цели используется демонстрационный импорт (насколько я понимаю). Что касается импорта, я обнаружил информацию о том, что он устарел и был удален из Chrome в феврале 2020 года.
В качестве альтернативы можно использовать fs-модуль узла. Моя проблема: скрипты не загружаются.

Каков наилучший способ загрузки содержимого и прикрепленного javascript в div?

Код на Github:

Благодаря @Entertain проблема может быть решена. Я обновил Git-репозиторий.

Хорошо, прежде всего, мы работаем с динамическими элементами 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 amp;amp; e.target.id == 'Hello') {
    loadPage('./assets/html/Hello.html', 'content');
  } else if (e.target amp;amp; 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 файле у вашей кнопки неправильный идентификатор:

 <!-- <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>