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的错误：链接.import为null

Answer 1

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

Firefox不会发送HTML Imports。有关详细信息，请参阅此Hacks blog post。您仍然可以通过启用dom.webcomponents.enabled标志在Firefox中使用HTML Imports。如果您不想启用该标记，则可以使用Google的webcomponents.js之类的polyfill。

目前HTML Imports spec基本上已经死亡，自2016年2月以来仅处于工作草案状态时停滞不前，并且不会在W3C标准化轨道上进一步推进。

因此没有其他浏览器会实现旧的HTML Imports规范。相反，在某些时候，将开发一个新的规范 - 一个挂钩到ES6 Modules和<script type=module> “module scripts” as now defined in the HTML spec的基础机制。

Answer 2

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

此外，使用polyfill时，请注意HTML导入始终为async，因此在使用HTMLImportsLoaded的内容之前，您必须等待link.import事件} property。

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

获取错误link.import在firefox中为null

2 个答案: