How do I expect to import text / html content into modern browsers using the link tag?

Question

How do I expect to import text / html content into modern browsers using the link tag?

Navigation

#1 by (4 votes)
#2 by (1 votes)

8

Recently I came across the current documentation of TAG <link> on the W3.org site - link where you specify that you can import content with mime-type text / html, ie HTML files. This would solve a current problem that I have to factorize the content of my application into several HTML files.

I made a small example that worked only on Chromium (the Google Steroid Browser).

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Seres Humanos</title>
    <link id="heart-html" rel="import" href="heart.html">
  </head>
  <body>   
    <p>O que um homem sem um coração ?</p>
    <script>
      var link = document.querySelector('link#heart-html');
      var heart = link.import;
      // Acesso o DOM do documento em heart.html
      var myHeartMsg = heart.querySelector('p#text');
      console.log(myHeartMsg.innerHTML);
    </script>
  </body>
</html>

heart.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>heart</title>
  </head>
  <body>   
    <p id="text">Este é meu coração</p>
  </body>
</html>

I searched extensively on the WEB and did not find information on what support this feature would expect, ie importing text / html content into modern browsers using the link tag?

html5 navegador link

asked by anonymous 19.02.2014 / 18:49

2 answers

What is and what is middleware for? Capture pressed buttons on video game control reliably

score 4 · Answer 1

I just found out that Polyfill exists for the following browsers.

Android Chrome, Chrome, Canary, Firefox, IE 10+, Safari 6+ and Mobile Safari.

It works like this:

function supportsImports() {
  return 'import' in document.createElement('link');
}

if (supportsImports()) {
  // Bom pra proceguir !
} else {
  // Use o "Polymer HTMLImports library" para carregar os arquivos.
}

I have read in link and the author mentions this implementation: link which loads 8 JavaScript files to support this functionality. It is not worth copying the code all over here, so the reference to the sources in GITHUB remains.

score 1 · Answer 2

1

You can check how the implementation of this feature is progressing by the main browsers in the Browser Support section of the link

01.06.2017 / 16:53