What is the forecast to support importing text/html content into modern browsers using the link tag?

Asked

Viewed 176 times

8

Recently I came across the current TAG documentation <link> on the website W3.org - http://www.w3.org/TR/html-imports 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 factor the contents 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 could not find information about what would be the support forecast for this Feature, i.e., importing text/html content into modern browsers using the link tag ?

html5 browser link
  • 1

    The HTML5 Rocks has an amazing posting (in English) on the subject... too bad there is compatibility yet in browsers.

  • 1

    Another interesting article on the subject: http://robdodson.me/blog/2013/08/20/exploring-html-imports/

  • Thank you @bfavaretto for sharing this link. I will look fondly.

  • Thank you @miguel-Angelo for sharing this link. I’ll look kindly

2 answers

4

I just discovered that there is Polyfill for the following Browsers.

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

Works That way:

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

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

Li in http://www.html5rocks.com/en/tutorials/webcomponents/imports/ and the author mentions this implementation : https://github.com/polymer/HTMLImports that loads 8 Javascript files to support this functionality. It is not worth copying all the code here, so the reference to the sources in GITHUB.

1

You can check the progress of the implementation of this functionality by the main browsers in the section Browser Support of the site https://www.webcomponents.org

Browser other questions tagged html5 browser link

You are not signed in. Login or sign up in order to post.