getting error link.import is null in 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>

I saprated header and footer, and i have to call in all pages, am using HTML5, but header and footer shown in only Google Chrome browser, FireFox and safari dosen't shows header and footer and gives error like TypeError: link.import is null

Answer 1

Only Chromium/Blink-based browsers have shipped <link rel=import> HTML Imports support. Firefox doesn’t support HTML Imports unless you enable the dom.webcomponents.enabled flag:

Firefox will not ship HTML Imports. See this Hacks blog post 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.

The current HTML Imports spec is basically dead at this point, stalled since February 2016 at just Working Draft status, and won’t be advancing any further along the W3C standardization track.

So no other browsers will ever be implementing that old HTML Imports spec. Instead at some point a new spec will be developed—one that hooks into ES6 Modules and the underlying machinery of <script type=module> “module scripts” as now defined in the HTML spec.

Answer 2

I would recommend to use the file html-imports.min.js from the HTML Imports polyfill rather that the firefox flag that is not enabled on your users' browsers and whose implementation is outdated (and may cause conficts with other polyfills for custom elements or shadow DOM).

Also, with the polyfill, keep in mind that the HTML imports will always be async, so you'll have to wait for the HTMLImportsLoaded event before using the content of the 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>