CODEWITHSUNDEEP
htmlgoogle-chromepolymer
seraph
seraph

Reputation: 45

HTML Import not working in Chrome

According to this article, it is possible to use HTML Imports via Polymer on browsers other than the latest version of Chrome (which might be the only one enabling HTML Imports at the moment). However, with the following html, adapted from the same article:

1.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Basic HTML Imports</title>
    <!-- Pull in our blog post example -->
    <link rel="import" href="2.html">

  </head>
<body>
  <p>Hello World!</p>
<script src="platform.js"></script>
<script>
      window.addEventListener('HTMLImportsLoaded', function() {
        var link = document.querySelector('link[rel=import]');
        var content = link.import.querySelector('#test');
        document.body.appendChild(document.importNode(content, true));
      });
    </script>
</body>
</html>

2.html

<div id="test">
  <h1>Here is the Import </h1>
</div>

I am getting the following result.

It appears that the <div id="test"> is imported successfully in Firefox but not in Chrome. Note that I tried to enable experimental Web Platform features in about:flags.

Is there any way to make it work for Chrome as well? I am looking for any solution that would enable me to use basic imports with the latest build of both Firefox and Chrome. (My project won't go live until early 2016, so I am hoping that standard support will be provided across every platform by then, but a workaround would be great in the meantime.) Thanks.

Upvotes: 2

Views: 7126

Answers (1)

Leo
Leo

Reputation: 13858

It seems you were using file: protocol, which is blocked by Cross-Origin Resource Sharing policy.

W3C spec on HTML Imports:

All imports linked from documents that is the master document or the one in the import map must be loaded using potentially CORS-enabled fetch with mode set to "Anonymous".

You could try to run a server on localhost, that would help.

Upvotes: 7

Related Questions