6

According to http://blog.teamtreehouse.com/introduction-html-imports

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.

But I can't find it in latest version of Google Chrome flags

Supersharp
  • 29,002
  • 9
  • 92
  • 134
user310291
  • 36,946
  • 82
  • 271
  • 487
  • 2
    It has been deprecated and will never become official. Consider it dead. – Ryan Wheale Dec 22 '15 at 05:21
  • @RyanWheale ok thanks so I search the web on html imports dead I can read "Mozilla and Microsoft argue that further work on HTML Imports should wait until ES6 module loading is finished." http://www.2ality.com/2015/08/web-component-status.html so for me it may be temporary like web components ? – user310291 Dec 22 '15 at 05:27
  • 1
    That is correct - ES6 modules will shape the direction of html imports, for sure. In the mean time, there are plenty of tools which can do it for you. – Ryan Wheale Dec 22 '15 at 05:28

2 Answers2

6

HTML Imports are implemented natively in Chrome, Opera and Android.

It is still a W3C Working Draft.

For other browsers, you can use:

Update 2019

HTML Imports won't be supported natively after Chrome 73. You should then use another solutions:

  • the polyfill,
  • an alternate module loader,
  • JS import combined with template literals,
  • a direct download with fetch().

Update 2020

HTML Imports were definitvely removed.

Supersharp
  • 29,002
  • 9
  • 92
  • 134
0

I found an alternate way to do the same. I put the whole file to be imported,in a string, then call document.write(theString) .for example

//head.js
var s= 
`<meta charset='UTF-8'>
<link rel="stylesheet" href="/Program/assets/css/main.css">
<script src="/Program/assets/js/my.js"></script>
<script src="/Program/libs/highlight/highlight.pack.js"></script>
<link rel='stylesheet' href='/Program/libs/highlight/androidstudio2.css'>
<script src='/Program/assets/js/jquery.3.4.1.js' ></script>
<script>
$('code').each(function() {
   var that = $(this);
   var html = that.html().trim();
   that.empty();
   that.text(html);
 });
 hljs.initHighlightingOnLoad();
</script>
`;

document.write(s);

then I call this newly created script file instead of the main file:

 <script src="/Program/head.js"></script>
nhab
  • 1
  • 2