javascript-在Firefox中获取错误link.import为空

<link rel="import" href="header.html">
 <link rel="import" href="footer.html">

 <script>
          var link = document.querySelector('link[href*="header"]');
          var template = link.import.querySelector('template');
          var clone = document.importNode(template.content, true);
          document.querySelector('#nav').appendChild(clone);
 </script>
 <script>
          var link = document.querySelector('link[href*="footer"]');
          var template = link.import.querySelector('template');
          var clone = document.importNode(template.content, true);
          document.querySelector('.footer').appendChild(clone);
</script>

我分隔了页眉和页脚,并且必须在所有页面中调用,使用的是HTML5,但是仅在Google Chrome浏览器中显示的页眉和页脚,FireFox和safari并没有显示页眉和页脚,并给出了类似TypeError：link.import的错误空值

解决方法:

仅基于Chromium / Blink的浏览器提供了< link rel = import> HTML导入支持. Firefox不支持HTML导入unless you enable the dom.webcomponents.enabled flag：

Firefox will not ship HTML Imports. See this 07001 for more information. You can still use HTML Imports in Firefox by enabling the dom.webcomponents.enabled flag. If you don’t want to enable the flag, you can use a polyfill such as Google’s webcomponents.js.

目前的HTML Imports spec目前已经死亡,自2016年2月以来一直处于停滞状态,仅处于工作草案状态,并且不会在W3C标准化进程中进一步推进.

因此,没有其他浏览器会实现旧的HTML Imports规范.取而代之的是,将开发一个新的规范,该规范将与ES6 Modules和基础机械<script type=module> “module scripts” as now defined in the HTML spec挂钩.

标签：html-imports,firefox,web-component,html5-template,javascript
来源： https://codeday.me/bug/20191026/1935069.html