Search code examples
javascripthtmlvisual-studioimporthtml-imports

html import not working

I've been coding a new intranet for my company and wanted to be able to import lots of files onto the same page, so that the information is still easily edited. However when I tried to open the file directly rather than through Visual Studios, the files do not import.

Is there something wrong with the way I have written this or is it not working for another reason?

<link rel="import" href="/Example.html">
<script>
    var link = document.querySelector('link[rel="import"][href="/Example.html"]');
    var content = link.import;
    var el = content.querySelector('#Example');
    document.body.appendChild(el.cloneNode(true));
</script>

Edit: To anyone who is facing the same issue with html imports, after further research I would suggest using an MVC Framework as this has a much simpler and effective method for importing.

Solution

  • For starters, you should know that browser support for HTML imports is still pretty limited. Google Chrome has had support since version 31, but you still need to enable the feature manually. To enable HTML imports in Chrome, go to chrome://flags and enable the Enable HTML Imports flag. Once you’re done, click the Relaunch Now button at the bottom of the screen to restart Chrome with support for HTML imports.

    Now that you’re browser is all set up, let’s take a look at how you use imports within your web pages.

    HTML imports use the element to reference the file that you wish to import; this works in a similar way to how you include stylesheets. Make sure that you set the rel attribute to import to indicate to the browser that the referenced file should be imported into the document.

    enter image description here

    For more Information..Go to this link