CODEWITHSUNDEEP
javascripthtmlvisual-studioimporthtml-imports
Riley
Riley

Reputation: 17

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.

Upvotes: 0

Views: 4052

Answers (4)

Mohammad Ayoub Khan
Mohammad Ayoub Khan

Reputation: 2970

Obsolete since Google Chrome 73
This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.


Use alternative methods

  • Server-side imports in PHP
  • Client-side import using templating engines or HTML preprocessors or using Task runners like Gulp or Grunt.

source MDN

Upvotes: 1

Madhav Sharma
Madhav Sharma

Reputation: 56

You can simply use jQuery to include another HTML page to yours. The <link> tag is used to link an external CSS stylesheet to your HTML document.

Suppose your HTML page is named example.html, then add this code:

<html> 
  <head> 
    <script src="/path/to/your/jquery.js"></script> 
    <script> 
    $(function(){
      $("#includemyHTML").load("Example.html"); 
    });
    </script> 
  </head> 

  <body> 
     <div id="includemyHTML"></div>
  </body> 
</html>

Upvotes: 1

Vikas Gupta
Vikas Gupta

Reputation: 1231

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

Upvotes: 0

Jan Wilts
Jan Wilts

Reputation: 82

Most browsers don't yet support HTML imports, only Chrome since version 36 and Opera since version 23.

Source: http://caniuse.com/#feat=imports

Upvotes: 0

Related Questions