8

Recentemente eu me deparei com a documentação atual da TAG <link> no site W3.org - http://www.w3.org/TR/html-imports onde especifica que é possível importar conteúdo com mime-type text/html, ou seja arquivos HTML. Isto solucionaria um problema atual que tenho de fatorar o conteúdo de minha aplicação em vários arquivos HTML.

Fiz um pequeno exemplo que funcionou apenas no Chromium (o Browser com Esteroides do Google).

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>

Procurei exaustivamente na WEB e não encontrei informações sobre qual seria a previsão de suporte a esta feature, ou seja, importar conteúdo text/html nos Browsers modernos usando a tag link ?

4
  • 1
    O HTML5 Rocks tem uma postagem incrível (em inglês) sobre o assunto... pena que não há compatibilidade ainda nos browsers. Commented 19/02/2014 às 18:23
  • 1
    Outro artigo interessante sobre o assunto: robdodson.me/blog/2013/08/20/exploring-html-imports
    – bfavaretto
    Commented 19/02/2014 às 18:36
  • Obrigado @bfavaretto por compartilhar esse link. Vou olhar com carinho. Commented 19/02/2014 às 18:39
  • Obrigado @miguel-angelo por compartilhar esse link. Vou olhar com carinho Commented 19/02/2014 às 18:41

2 Respostas 2

4

Acabei de descobrir que existe Polyfill para os seguintes Browsers.

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

Funciona Assim:

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

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

Li em http://www.html5rocks.com/en/tutorials/webcomponents/imports/ e o autor menciona esta implementação : https://github.com/polymer/HTMLImports que carrega 8 arquivos JavaScript para suportar esta funcionalidade. Não vale a pena copiar o código todo pra cá, fica então a referencia aos fontes no GITHUB.

1

Você pode verificar como está o andamento da implementação dessa funcionalidade pelos principais navegadores na seção Browser Support do site https://www.webcomponents.org

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .