HTML 导入在 Electron 应用程序中不起作用

Question

我正在尝试使用 Electron 构建桌面应用程序。我在导入 HTML 模板时遇到问题。

代码

<link rel="import" href="fileLocation/file.html">

文件.html

<template>

  <div>Template html content </div>

</template>

//script in index.html file

<script>

   const links = document.querySelectorAll('link[rel="import"]')

   Array.prototype.forEach.call(links, (link) => {

      let template = link.import.querySelector('template')

      //error: cannot read property "querySelectorAll" of undefined

      //I tried to console.log(link)

      //it gives output: <link rel="import" href="fileLocation/file.html">

      //but in electron demo app it is giving actual template.

   })

</script>

//running below code in my index.html to test html import compatibility

console.log(

    "Native HTML Imports?", 'import' in document.createElement('link'),

    "Native Custom Elements v0?", 'registerElement' in document,

    "Native Shadow DOM v0?", 'createShadowRoot' in document.createElement('div'));

//output: Native HTML Imports? false Native Custom Elements v0? false Native Shadow DOM v0? false

//running the same code in Electron API demo app (example app given on electron github repo)

console.log(

    "Native HTML Imports?", 'import' in document.createElement('link'),

    "Native Custom Elements v0?", 'registerElement' in document,

    "Native Shadow DOM v0?", 'createShadowRoot' in document.createElement('div'));

//output: Native HTML Imports? true Native Custom Elements v0? true Native Shadow DOM v0? true

请告诉我如何配置我的应用程序，以便我的结果与 Electron 演示应用程序匹配。

Answer 1

我遇到了同样的问题，似乎与新版本的电子（10.1.5）有关。恢复到版本 7.2.4 对我有用