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

Question

<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 is无效的

Answer 1

我建议使用HTML Imports polyfill中的html-imports.min.js文件，而不是在您的用户浏览器上未启用且其实现已过时的 firefox 标志（并且可能会导致与自定义元素的其他 polyfill 或阴影 DOM）。

此外，使用 polyfill，请记住 HTML 导入将始终为，因此您必须在使用属性内容之前async等待事件。HTMLImportsLoadedlink.import

<script src="html-imports.min.js"></script>
<link rel="import" href="header.html">
<link rel="import" href="footer.html">

<script>
    document.addEventListener( 'HTMLImportsLoaded', function () 
    {
        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);

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

Answer 2

只有基于 Chromium/Blink 的浏览器提供了<link rel=import>HTML 导入支持。除非您启用该dom.webcomponents.enabled标志，否则Firefox 不支持 HTML 导入：

Firefox 不会提供 HTML 导入。有关更多信息，请参阅此Hacks 博客文章。您仍然可以通过启用 dom.webcomponents.enabled 标志在 Firefox 中使用 HTML 导入。如果您不想启用该标志，则可以使用诸如 Google 的 webcomponents.js 之类的 polyfill。

当前的HTML 导入规范在这一点上基本上已经死了，自 2016 年 2 月以来一直处于工作草案状态，并且不会沿着 W3C 标准化轨道进一步推进。

所以没有其他浏览器会实现旧的 HTML 导入规范。取而代之的是，在某个时候将开发一个新规范——一个挂钩到ES6 模块和<script type=module>HTML 规范中定义的“模块脚本”的底层机制。