Incluir outro arquivo HTML em um arquivo HTML

627

Eu tenho 2 arquivos HTML, suponha a.htmle b.html. Em a.htmleu quero incluir b.html.

No JSF eu posso fazer assim:

<ui:include src="b.xhtml" />

Isso significa que dentro do a.xhtmlarquivo, eu posso incluir b.xhtml.

Como podemos fazer isso em *.htmlarquivo?

javascript html include lolo
fonte

5

possível duplicata de Equivalente de include () em HTML

Wesley Murch

32

NÃO! suas 2 coisas diferentes!

lolo

relacionado, mas para localhost: stackoverflow.com/questions/7542872/…

cregox 12/15

MarMarAba

Consulte os Módulos HTML github.com/w3c/webcomponents/blob/gh-pages/proposals/… e groups.google.com/a/chromium.org/forum/#!msg/blink-dev/… e github.com/w3c / webcomponents / blob / gh-pages / propostas /… e discussões em segundo plano em github.com/w3c/webcomponents/issues/645 e algumas discussões sobre questões

sideshowbarker

687

Na minha opinião, a melhor solução usa jQuery:

a.html:

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#includedContent").load("b.html"); 
    });
    </script> 
  </head> 

  <body> 
     <div id="includedContent"></div>
  </body> 
</html>

b.html:

<p>This is my include file</p>

Este método é uma solução simples e limpa para o meu problema.

A .load()documentação do jQuery está aqui .

lolo
fonte

5

Qual é a diferença de fazer exatamente isso `<script> $ (" # includedContent "). Load (" b.html "); </script>?

Rodrigo Ruiz

10

O @RodrigoRuiz $(function(){})será executado somente após o carregamento do documento.

ProfK

8

Se o arquivo HTML incluído tiver CSS anexado, ele poderá atrapalhar o estilo da sua página.

Omar Jaafor

6

Eu sou exatamente como você mencionou. Estou usando o bootstrap e tenho sobrescrições de css para B.html. Quando eu uso B.html em A.html para que ele acabe como cabeçalho do A.html, posso ver que o css perdeu sua prioridade e tem um layout diferente. Alguma solução para isso?

Pavan Dittakavi

38

Isso requer um servidor . Ao usá-lo em um arquivo local:

XMLHttpRequest cannot load file:///.../b.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Basj

155

Expandindo a resposta de lolo a partir de cima, aqui está um pouco mais de automação se você precisar incluir muitos arquivos:

<script>
  $(function(){
    var includes = $('[data-include]');
    jQuery.each(includes, function(){
      var file = 'views/' + $(this).data('include') + '.html';
      $(this).load(file);
    });
  });
</script>

E depois incluir algo no html:

<div data-include="header"></div>
<div data-include="footer"></div>

O que incluiria as visualizações de arquivo / header.html e views / footer.html

Shanisch
fonte

Muito útil. Existe uma maneira de passar um argumento por outro parâmetro de dados, curtir data-argumente recuperá-lo no arquivo incluído?

chris

@ Chris Você pode usar GET params por exemplo$("#postdiv").load('posts.php?name=Test&age=25');

Nam G VU

5

Sugestão pequena - você não precisa do class="include"- basta fazer o seu seletor jQuery #var includes = $('[data-include]');

jbyrd 08/12/16

não trabalhando em cromo com arquivos locais "solicitações de origem cruzada são suportados apenas por esquemas de protocolo: htt"

Artem Bernatskyi

2

@ArtemBernatskyi Isso ajuda quando você executa um servidor local? Aqui está um tutorial fácil: developer.mozilla.org/pt-BR/docs/Learn/Common_questions/…

mhanisch

146

Minha solução é semelhante à do lolo acima. No entanto, insiro o código HTML via document.write do JavaScript, em vez de usar o jQuery:

a.html:

<html> 
  <body>
  <h1>Put your HTML content before insertion of b.js.</h1>
      ...

  <script src="b.js"></script>

      ...

  <p>And whatever content you want afterwards.</p>
  </body>
</html>

b.js:

document.write('\
\
    <h1>Add your HTML code here</h1>\
\
     <p>Notice however, that you have to escape LF's with a '\', just like\
        demonstrated in this code listing.\
    </p>\
\
');

O motivo para não usar o jQuery é que o jQuery.js tem aproximadamente 90kb de tamanho e quero manter a quantidade de dados a carregar o menor possível.

Para obter o arquivo JavaScript com escape apropriado sem muito trabalho, você pode usar o seguinte comando sed:

sed 's/\\/\\\\/g;s/^.*$/&\\/g;s/'\''/\\'\''/g' b.html > escapedB.html

Ou simplesmente use o seguinte script bash publicado como um Gist no Github, que automatiza todo o trabalho necessário, convertendo b.htmlpara b.js: https://gist.github.com/Tafkadasoh/334881e18cbb7fc2a5c033bfa03f6ee6

Créditos a Greg Minshall pelo melhor comando sed que também escapa barras e aspas simples, que o meu comando sed original não considerou.

Como alternativa, para navegadores que suportam literais de modelo, o seguinte também funciona:

b.js:

document.write(`

    <h1>Add your HTML code here</h1>

     <p>Notice, you do not have to escape LF's with a '\',
        like demonstrated in the above code listing.
    </p>

`);

Tafkadasoh
fonte

4

@TrevorHickey Sim, você está certo, essa é a desvantagem da minha solução, e isso não é muito elegante. No entanto, como você pode inserir um '\' com uma regex simples no final de cada linha, isso funciona melhor para mim. Hmm ... talvez eu deva acrescentar a minha resposta como fazer a inserção via regex ...

Tafkadasoh

2

Oh sheesh, isso é feio - não, obrigado. Prefiro escrever meu html como html. Não me importo se posso usar o sed na linha de comando - não quero depender disso toda vez que altero o conteúdo do modelo.

Jbyrd 08/12/16

1

@ Goodra Ele deve funcionar em qualquer HTML sem 'marcas. Se você apenas encontrar / substituir para substituir ` with \ `ENTÃO, encontrar / substituir para substituir 'por \'e novas linhas com` `novas linhas, funcionará bem.

precisa saber é o seguinte

1

@ wizzwizz4: Graças a Greg, o comando sed agora também escapa aspas simples e barras invertidas. Além disso, adicionei um script bash que faz todo o trabalho para você. :-)

Tafkadasoh 15/01/2019

1

Você pode usar acentos graves `- então você é capaz de inserir expressões como ${var}- então você só precisa escapar \`e\$

inetphantom

85

Importação de HTML5 do checkout via tutorial Html5rocks e no projeto-polímero

Por exemplo:

<head>
  <link rel="import" href="/path/to/imports/stuff.html">
</head>

user1587439
fonte

27

As importações de HTML não devem incluir o conteúdo diretamente na página. O código nesta resposta é stuff.htmldisponibilizado apenas como modelo na página pai, mas você precisa usar scripts para criar clones de seu DOM na página pai, para que fiquem visíveis para o usuário.

waldyrious

1

As instruções em html5rocks.com para inserir o conteúdo de uma página HTML em outra ainda não parecem funcionar em muitos navegadores por aí. Eu tentei no Opera 12.16 e Superbird versão 32.0.1700.7 (233448) sem efeito (no Xubuntu 15.04). Ouvi dizer que ele não funciona no Firefox (devido a um bug que foi corrigido) ou em muitas versões do Chrome. Portanto, embora pareça ser uma solução ideal no futuro, não é uma solução entre navegadores.

Brōtsyorfuzthrāx 27/08/2015

1

Aparentemente, não está pronto no final de 2016 no FireFox (45.5.1 ESR). JS consola diz: TypeError: ... .import is undefined. O MDN diz que "esse recurso não está implementado em nenhum navegador nativo no momento". Alguém sabe se é possível criar FF com esse recurso?

Sphakka

3

O Firefox não suporta. Para habilitá-lo, tente definir "dom.webcomponents.enabled". Ele funcionará apenas no Chrome e Opera, Android com exibição da Web atualizável (início 4.4.3). Os navegadores da Apple não são compatíveis. Parece uma boa idéia para componentes da Web, mas ainda não foi implementada amplamente.

Maxim

9

Atualize final de 2018: as importações HTML são aparentemente sendo preterido por alguma razão

V. Rubinetti

60

Plug vergonhoso de uma biblioteca que eu escrevi a resolver isso.

https://github.com/LexmarkWeb/csi.js

<div data-include="/path/to/include.html"></div>

O texto acima pega o conteúdo /path/to/include.htmle o substitui divpor ele.

Michael Marr
fonte

4

Isso avaliará o JavaScript se include.html o incorporar?

Seth

1

@ Seth não parece. Vou brincar com o src e ver se consigo fazê-lo. Obrigado a Michael-marr

xandout

2

Brilhante!!!! A sua parece a única solução que substitui a tag div usada como um token para onde inserir. Vou estudar a fonte cuidadosamente mais tarde !! :-)

kpollock

1

Graças a isso, ele inclui o HTML / CSS, mas não o Javascript dos arquivos de origem. Você apenas precisa incluí-lo novamente sempre que usar o <div data-include="/path/to/include.html"></div>. Essa ferramenta facilita a criação de uma maquete simples de várias páginas sem plug-ins de maneira limpa.

Vincent Tang

1

posso usar esta lib em qualquer aplicativo? Quero dizer, como pode creditar o autor? O W3School tem uma solução semelhante, apenas a diferença é que o seu código também serve para chamadas recursivas no carregamento da janela .... w3schools.com/howto/tryit.asp?filename=tryhow_html_include_1

yeppe

43

Uma diretiva de inclusão simples do lado do servidor para incluir outro arquivo encontrado na mesma pasta é assim:

<!--#include virtual="a.html" -->

Webdesign7 London
fonte

21

Você precisa config seu servidor para usar SSI

lolo

7

Aqui está uma referência para configurar o SSI do seu servidor: httpd.apache.org/docs/2.4/howto/ssi.html#configuring

shasi kanth

Pode valer a pena tentar também

jimmyjudas

A inclusão de SSI torna o servidor da Web um pouco mais lento (isso deve ser evitado até a necessidade absoluta).

Amit Verma

36

Não há necessidade de scripts. Não há necessidade de fazer coisas sofisticadas do lado do servidor (que provavelmente seria uma opção melhor)

<iframe src="/path/to/file.html" seamless></iframe>

Como os navegadores antigos não oferecem suporte contínuo, você deve adicionar alguns css para corrigi-lo:

iframe[seamless] {
    border: none;
}

Lembre-se de que, para navegadores que não oferecem suporte contínuo, se você clicar em um link no iframe, o quadro será direcionado para esse URL, não para a janela inteira. Uma maneira de contornar isso é ter todos os links target="_parent", embora o suporte ao navegador seja "bom o suficiente".

bjb568
fonte

7

parece não aplicar estilos css da página pai, por exemplo.

Randy

5

@ Randy Então? Isso pode ser contado como uma vantagem (especialmente para conteúdo gerado pelo usuário e similares). Você pode facilmente incluir os arquivos css novamente de qualquer maneira, sem fazer outra solicitação devido ao cache.

bjb568

Respondeu às minhas necessidades para a resposta a esta pergunta - como incluir um arquivo HTML em outro arquivo html ...

Grimxn

2

Essa é a melhor resposta SEM JQuery ou scripts. Nice bjb568 obrigado!

DBS

12

O seamlessatributo foi removido do rascunho HTML de onde veio. Não use.

Mitja

33

Uma solução muito antiga que atendi às minhas necessidades naquela época, mas eis como fazer isso em conformidade com o código:

<!--[if IE]>
<object classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13" data="some.html">
<p>backup content</p>
</object>
<![endif]-->

<!--[if !IE]> <-->
<object type="text/html" data="some.html">
<p>backup content</p>
</object>
<!--> <![endif]-->

Aleksandar Vacić
fonte

9

Parece que <object>, <embed>e <iframe>todos trabalham para isso, mas nos três casos eles criam documentos separados com seus próprios contextos de estilo e script (iframe inclui particularmente bordas e barras de rolagem feias) e, por exemplo, qualquer link por padrão é aberto dentro deles e não no página pai (embora isso possa ser substituído por target = "_ parent"). De tudo isso, o iframe é o único que tem alguma esperança de se tornar mais integrado por meio do seamlessatributo HTML5 (mencionado por bjb568), mas ainda não é bem suportado: caniuse.com/#feat=iframe-seamless

waldyrious

2

O iframe-seamless foi retirado do padrão HTML: github.com/whatwg/html/issues/331 . Comentário Então @waldyrious não é mais correto (mente para atualizá-lo o seu comentário?)

Tomáš Pospisek

1

Obrigado pelo alerta, @ TomášPospíšek. Não consigo mais editar meu comentário, mas espero que sua resposta forneça a advertência necessária aos leitores. Para deixar claro, a última frase (sobre o seamlessatributo) é a única parte desatualizada - o restante ainda se aplica.

waldyrious

17

Como alternativa, se você tiver acesso ao arquivo .htaccess no seu servidor, poderá adicionar uma diretiva simples que permita que o php seja interpretado nos arquivos que terminam na extensão .html.

RemoveHandler .html
AddType application/x-httpd-php .php .html

Agora você pode usar um script php simples para incluir outros arquivos, como:

<?php include('b.html'); ?>

rtd1123
fonte

28

Sim, esse é um péssimo conselho. Os arquivos HTML são estáticos e são servidos pelo apache muito rapidamente. Se você adicionar todos os arquivos html ao analisador php apenas para incluir arquivos, você terá muitos problemas de desempenho em seus servidores. A maneira javascript (jQuery ou JS simples) não é uma solução muito boa, mas ainda é muito mais eficiente e menos perigosa que essa.

Gfra54

@ Gfra54 Você quer dizer que teremos problemas de desempenho se usarmos o Apache apenas para isso e não trabalharmos com php no site? Ou vai desacelerar se eu usar php e essa coisa juntos?

User3459110

1

Cuidado: A adição dessas linhas .htaccesspode fazer com que as htmlpáginas tentem fazer o download como arquivos, em vez de visualizar no navegador. Teste primeiro. Isenção de responsabilidade: Isso aconteceu comigo agora quando tentei a solução acima. Meu .htaccessestava vazio, exceto por duas linhas acima. Cuidado recomendado. Tente loloa solução jQuery (abaixo).

Cssyphus

cara, eu estava me complicando mesmo que eu já fiz isso antes. Obrigado pela lembrança. Para o propósito de que preciso, isso realmente não afeta o desempenho, por isso sou legal.

Gman

Ha esta resposta esmagadora de desempenho é um exemplo impressionante de pensamento pronto para uso. Eu nunca sugeriria isso, mas talvez um salva-vidas quando você precisar de um pouco de marreta php. :-)

moodboom 07/01

14

A seguir, funciona se o conteúdo html de algum arquivo precisar ser incluído: Por exemplo, a linha a seguir incluirá o conteúdo de piece_to_include.html no local em que a definição OBJECT ocorre.

...text before...
<OBJECT data="file_to_include.html">
Warning: file_to_include.html could not be included.
</OBJECT>
...text after...

Referência: http://www.w3.org/TR/WD-html40-970708/struct/includes.html#h-7.7.4

Legal cara
fonte

2

Funciona como um encanto e é a solução mais limpa. Essa deve ser a resposta aceita.

vbocan

Aceita. Apenas uma observação: não tente fazer uma tag de objeto com fechamento automático. O texto depois será apagado.

Sridhar Sarnobat

Parece criar um novo "#document" que contém automaticamente novas tags <html> e <body> aninhadas. Isso não funcionou para o meu propósito; meu arquivo .html contém tags <script src = "..." type = "text / javascript">; mas o JS recebeu novos erros de referência.

IAM_AL_X 28/11

12

Aqui está a minha solução no local:

(() => {
    const includes = document.getElementsByTagName('include');
    [].forEach.call(includes, i => {
        let filePath = i.getAttribute('src');
        fetch(filePath).then(file => {
            file.text().then(content => {
                i.insertAdjacentHTML('afterend', content);
                i.remove();
            });
        });
    });
})();

<p>FOO</p>

<include src="a.html">Loading...</include>

<p>BAR</p>

<include src="b.html">Loading...</include>

<p>TEE</p>

Expandir snippet

Mustafa Burak Kalkan
fonte

1

woow, é mais simples

saputra Arian

Solução realmente agradável e simples, obrigado ^^

Remling 07/03

11

No w3.js, inclua trabalhos como este:

<body>
<div w3-include-HTML="h1.html"></div>
<div w3-include-HTML="content.html"></div>
<script>w3.includeHTML();</script>
</body>

Para obter uma descrição adequada, consulte: https://www.w3schools.com/howto/howto_html_include.asp

Kaj Risberg
fonte

Se você quiser saber quando o documento foi carregado, coloque-o no final do documento: <img src = "thisimagedoesnotexist.dmy" onerror = 'initDocument ()' style = 'display: none;'> Truque inteligente , eh?

Kaj Risberg

2

não está funcionando com o google chrome.

deepcell

9

Foi isso que me ajudou. Para adicionar um bloco de código html de b.htmlpara a.html, isso deve ir para a headtag de a.html:

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

Em seguida, na tag body, um contêiner é criado com um ID exclusivo e um bloco javascript para carregá- b.htmllo no contêiner, da seguinte maneira:

<div id="b-placeholder">

</div>

<script>
$(function(){
  $("#b-placeholder").load("b.html");
});
</script>

Ramtin
fonte

6

Como essa resposta é diferente da resposta aceita dessa pergunta?

Mohammad Usman

2

@MohammadUsman Aqui o contêiner e o código javascript estão na tag body, enquanto a resposta aceita os coloca na tag head e deixando o contêiner somente na tag body.

Ramtin

Isso não vale a pena uma nova resposta ... é um comentário #

Kennet Celeste

8

Eu sei que este é um post muito antigo, então alguns métodos não estavam disponíveis na época. Mas aqui está minha opinião muito simples (com base na resposta de Lolo).

Ele se baseia nos atributos data- * do HTML5 e, portanto, é muito genérico, pois usa a função for-each do jQuery para obter todas as classes correspondentes a "load-html" e usa seu respectivo atributo 'data-source' para carregar o conteúdo:

<div class="container-fluid">
    <div class="load-html" id="NavigationMenu" data-source="header.html"></div>
    <div class="load-html" id="MainBody" data-source="body.html"></div>
    <div class="load-html" id="Footer" data-source="footer.html"></div>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function () {
    $(".load-html").each(function () {
        $(this).load(this.dataset.source);
    });
});
</script>

Ben Mc
fonte

7

Você pode usar um polyfill de importações de HTML ( https://www.html5rocks.com/en/tutorials/webcomponents/imports/ ) ou essa solução simplificada https://github.com/dsheiko/html-import

Por exemplo, na página você importa um bloco HTML assim:

<link rel="html-import" href="./some-path/block.html" >

O bloco pode ter importações próprias:

<link rel="html-import" href="./some-other-path/other-block.html" >

O importador substitui a diretiva pelo HTML carregado, praticamente como o SSI

Essas diretivas serão veiculadas automaticamente assim que você carregar este pequeno JavaScript:

<script async src="./src/html-import.js"></script>

Ele processará as importações quando o DOM estiver pronto automaticamente. Além disso, expõe uma API que você pode usar para executar manualmente, obter logs e assim por diante. Desfrutar :)

Dmitry Sheiko
fonte

Onde a linha de script deve ir no arquivo html?

Andrew Truckle

Em qualquer lugar dentro do CORPO. Pode ser colocado de forma recursiva no conteúdo dos arquivos incluídos

Dmitry Sheiko

Você testou isso?

Bhikkhu Subhuti 29/02

Certamente eu fiz. Eu tenho usado isso há anos. Por que perguntar? Quaisquer problemas?

Dmitry Sheiko

Portanto, a "chave" para isso é a script async srcque parece. Experimentando!

javadba 6/06

6

A maioria das soluções funciona, mas elas têm problemas com o jquery :

O problema é seguir $(document).ready(function () { alert($("#includedContent").text()); }nada de alertas de código, em vez de alertar o conteúdo incluído.

Eu escrevo o código abaixo, na minha solução, você pode acessar o conteúdo incluído na $(document).readyfunção:

(A chave está carregando o conteúdo incluído de forma síncrona).

index.htm :

<html>
    <head>
        <script src="jquery.js"></script>

        <script>
            (function ($) {
                $.include = function (url) {
                    $.ajax({
                        url: url,
                        async: false,
                        success: function (result) {
                            document.write(result);
                        }
                    });
                };
            }(jQuery));
        </script>

        <script>
            $(document).ready(function () {
                alert($("#test").text());
            });
        </script>
    </head>

    <body>
        <script>$.include("include.inc");</script>
    </body>

</html>

include.inc :

<div id="test">
    There is no issue between this solution and jquery.
</div>

jquery inclui plugin no github

Amir Saniyan
fonte

Ao usar isso e depois visualizar a fonte da página em um navegador, você vê apenas o script. Isso não afeta a capacidade dos mecanismos de pesquisa de analisar seu site, acabando com os esforços de SEO?

Hmcclungiii

Sim, este método destruir qualquer SEO :)

Amir Saniyan

Então, novamente, todo método baseado em JavaScript faz isso.

precisa saber é o seguinte

5

Para inserir o conteúdo do arquivo nomeado:

<!--#include virtual="filename.htm"-->

St.Eve
fonte

1

usando colchetes angulares para []: [! - # include virtual = "include_omega.htm" -]

StEve

4

A resposta do Athari (a primeira!) Foi muito conclusiva! Muito bom!

Mas se você deseja passar o nome da página a ser incluída como parâmetro de URL , esta postagem possui uma solução muito boa para ser usada combinada com:

http://www.jquerybyexample.net/2012/06/get-url-parameters-using-jquery.html

Então, torna-se algo assim:

O seu URL:

www.yoursite.com/a.html?p=b.html

O código a.html agora se torna:

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    function GetURLParameter(sParam)
    {
      var sPageURL = window.location.search.substring(1);
      var sURLVariables = sPageURL.split('&');
      for (var i = 0; i < sURLVariables.length; i++) 
      {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) 
        {
            return sParameterName[1];
        }
      }
    }
    $(function(){
      var pinc = GetURLParameter('p');
      $("#includedContent").load(pinc); 
    });
    </script> 
  </head> 

  <body> 
     <div id="includedContent"></div>
  </body> 
</html>

Funcionou muito bem para mim! Espero ter ajudado :)

Massa
fonte

Problema de segurança, porque você pode enviar a alguém este link: www.yoursite.com/a.html?p=htttp://www.linktovir.us/here.html

JoostS

4

html5rocks.com tem um tutorial muito bom sobre esse assunto, e isso pode ser um pouco tarde, mas eu mesmo não sabia que isso existia. O w3schools também tem uma maneira de fazer isso usando sua nova biblioteca chamada w3.js. O fato é que isso requer o uso de um servidor da web e um objeto HTTPRequest. Você não pode carregá-los localmente e testá-los em sua máquina. O que você pode fazer é usar os polyfills fornecidos no link html5rocks na parte superior ou seguir o tutorial. Com um pouco de magia JS, você pode fazer algo assim:

 var link = document.createElement('link');
 if('import' in link){
     //Run import code
     link.setAttribute('rel','import');
     link.setAttribute('href',importPath);
     document.getElementsByTagName('head')[0].appendChild(link);
     //Create a phantom element to append the import document text to
     link = document.querySelector('link[rel="import"]');
     var docText = document.createElement('div');
     docText.innerHTML = link.import;
     element.appendChild(docText.cloneNode(true));
 } else {
     //Imports aren't supported, so call polyfill
     importPolyfill(importPath);
 }

Isso criará o link (pode mudar para ser o elemento de link desejado, se já estiver definido), definir a importação (a menos que você já o tenha) e depois anexá-lo. A partir daí, ele pega e analisa o arquivo em HTML e depois o anexa ao elemento desejado em uma div. Tudo isso pode ser alterado para atender às suas necessidades, do elemento anexado ao link que você está usando. Espero que isso tenha ajudado, pode ser irrelevante agora se novas e mais rápidas formas surgirem sem o uso de bibliotecas e estruturas como jQuery ou W3.js.

UPDATE: Isso gerará um erro dizendo que a importação local foi bloqueada pela política do CORS. Pode ser necessário acessar a deep web para poder usá-la devido às propriedades da deep web. (Significando nenhum uso prático)

SubLock69
fonte

4

Aqui está minha abordagem usando a API Fetch e a função assíncrona

<div class="js-component" data-name="header" data-ext="html"></div>
<div class="js-component" data-name="footer" data-ext="html"></div>

<script>
    const components = document.querySelectorAll('.js-component')

    const loadComponent = async c => {
        const { name, ext } = c.dataset
        const response = await fetch(`${name}.${ext}`)
        const html = await response.text()
        c.innerHTML = html
    }

    [...components].forEach(loadComponent)
</script>

barro32
fonte

3

Por enquanto, não há solução HTML direta para a tarefa. Mesmo as importações de HTML (que estão permanentemente em rascunho ) não farão isso, porque Import! = Include e alguma mágica de JS serão necessárias de qualquer maneira.
Eu escrevi recentemente um script VanillaJS que é apenas para incluir HTML no HTML, sem complicações.

Basta colocar no seu a.html

<link data-wi-src="b.html" />
<!-- ... and somewhere below is ref to the script ... -->
<script src="wm-html-include.js"> </script>

É open-sourcee pode dar uma ideia (espero)

al.scvorets
fonte

3

Você pode fazer isso com a biblioteca jQuery do JavaScript, assim:

HTML:

<div class="banner" title="banner.html"></div>

JS:

$(".banner").each(function(){
    var inc=$(this);
    $.get(inc.attr("title"), function(data){
        inc.replaceWith(data);
    });
});

Observe que banner.htmldeve estar localizado no mesmo domínio em que as outras páginas estão; caso contrário, suas páginas da Web recusarão obanner.html arquivo devido às políticas de compartilhamento de recursos de várias origens.

Além disso, observe que, se você carregar seu conteúdo com JavaScript, o Google não poderá indexá-lo, por isso não é exatamente um bom método por razões de SEO.

AndrewL64
fonte

2

Você tentou uma injeção de iFrame?

Ele injeta o iFrame no documento e se exclui (deveria estar no HTML DOM)

<iframe src="header.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()"></iframe>

Saudações

Alban Lusitanae
fonte

1

Cheguei a esse tópico procurando algo semelhante, mas um pouco diferente do problema apresentado por lolo. Eu queria construir uma página HTML contendo um menu alfabético de links para outras páginas, e cada uma das outras páginas pode ou não existir, e a ordem em que foram criadas pode não ser alfabética (nem mesmo numérica). Além disso, como o Tafkadasoh, eu não queria inchar a página da web com o jQuery. Depois de pesquisar o problema e experimentar por várias horas, eis o que funcionou para mim, com comentários relevantes adicionados:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/application/html; charset=iso-8859-1">
  <meta name="Author" content="me">
  <meta copyright="Copyright" content= "(C) 2013-present by me" />
  <title>Menu</title>

<script type="text/javascript">
<!--
var F000, F001, F002, F003, F004, F005, F006, F007, F008, F009,
    F010, F011, F012, F013, F014, F015, F016, F017, F018, F019;
var dat = new Array();
var form, script, write, str, tmp, dtno, indx, unde;

/*
The "F000" and similar variables need to exist/be-declared.
Each one will be associated with a different menu item,
so decide on how many items maximum you are likely to need,
when constructing that listing of them.  Here, there are 20.
*/


function initialize()
{ window.name="Menu";
  form = document.getElementById('MENU');
  for(indx=0; indx<20; indx++)
  { str = "00" + indx;
    tmp = str.length - 3;
    str = str.substr(tmp);
    script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = str + ".js";
    form.appendChild(script);
  }

/*
The for() loop constructs some <script> objects
and associates each one with a different simple file name,
starting with "000.js" and, here, going up to "019.js".
It won't matter which of those files exist or not.
However, for each menu item you want to display on this
page, you will need to ensure that its .js file does exist.

The short function below (inside HTML comment-block) is,
generically, what the content of each one of the .js files looks like:
<!--
function F000()
{ return ["Menu Item Name", "./URLofFile.htm", "Description string"];
}
-->

(Continuing the remarks in the main menu.htm file)
It happens that each call of the form.appendChild() function
will cause the specified .js script-file to be loaded at that time.
However, it takes a bit of time for the JavaScript in the file
to be fully integrated into the web page, so one thing that I tried,
but it didn't work, was to write an "onload" event handler.
The handler was apparently being called before the just-loaded
JavaScript had actually become accessible.

Note that the name of the function in the .js file is the same as one
of the the pre-defined variables like "F000".  When I tried to access
that function without declaring the variable, attempting to use an
"onload" event handler, the JavaScript debugger claimed that the item
was "not available".  This is not something that can be tested-for!
However, "undefined" IS something that CAN be tested-for.  Simply
declaring them to exist automatically makes all of them "undefined".
When the system finishes integrating a just-loaded .js script file,
the appropriate variable, like "F000", will become something other
than "undefined".  Thus it doesn't matter which .js files exist or
not, because we can simply test all the "F000"-type variables, and
ignore the ones that are "undefined".  More on that later.

The line below specifies a delay of 2 seconds, before any attempt
is made to access the scripts that were loaded.  That DOES give the
system enough time to fully integrate them into the web page.
(If you have a really long list of menu items, or expect the page
to be loaded by an old/slow computer, a longer delay may be needed.)
*/

  window.setTimeout("BuildMenu();", 2000);
  return;
}


//So here is the function that gets called after the 2-second delay  
function BuildMenu()
{ dtno = 0;    //index-counter for the "dat" array
  for(indx=0; indx<20; indx++)
  { str = "00" + indx;
    tmp = str.length - 3;
    str = "F" + str.substr(tmp);
    tmp = eval(str);
    if(tmp != unde) // "unde" is deliberately undefined, for this test
      dat[dtno++] = eval(str + "()");
  }

/*
The loop above simply tests each one of the "F000"-type variables, to
see if it is "undefined" or not.  Any actually-defined variable holds
a short function (from the ".js" script-file as previously indicated).
We call the function to get some data for one menu item, and put that
data into an array named "dat".

Below, the array is sorted alphabetically (the default), and the
"dtno" variable lets us know exactly how many menu items we will
be working with.  The loop that follows creates some "<span>" tags,
and the the "innerHTML" property of each one is set to become an
"anchor" or "<a>" tag, for a link to some other web page.  A description
and a "<br />" tag gets included for each link.  Finally, each new
<span> object is appended to the menu-page's "form" object, and thereby
ends up being inserted into the middle of the overall text on the page.
(For finer control of where you want to put text in a page, consider
placing something like this in the web page at an appropriate place,
as preparation:
<div id="InsertHere"></div>
You could then use document.getElementById("InsertHere") to get it into
a variable, for appending of <span> elements, the way a variable named
"form" was used in this example menu page.

Note: You don't have to specify the link in the same way I did
(the type of link specified here only works if JavaScript is enabled).
You are free to use the more-standard "<a>" tag with the "href"
property defined, if you wish.  But whichever way you go,
you need to make sure that any pages being linked actually exist!
*/

  dat.sort();
  for(indx=0; indx<dtno; indx++)
  { write = document.createElement('span');
    write.innerHTML = "<a onclick=\"window.open('" + dat[indx][1] +
                      "', 'Menu');\" style=\"color:#0000ff;" + 
                      "text-decoration:underline;cursor:pointer;\">" +
                      dat[indx][0] + "</a> " + dat[indx][2] + "<br />";
    form.appendChild(write);
  }
  return;
}

// -->
</script>
</head>

<body onload="initialize();" style="background-color:#a0a0a0; color:#000000; 

font-family:sans-serif; font-size:11pt;">
<h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;MENU
<noscript><br /><span style="color:#ff0000;">
Links here only work if<br />
your browser's JavaScript<br />
support is enabled.</span><br /></noscript></h2>
These are the menu items you currently have available:<br />
<br />
<form id="MENU" action="" onsubmit="return false;">
<!-- Yes, the <form> object starts out completely empty -->
</form>
Click any link, and enjoy it as much as you like.<br />
Then use your browser's BACK button to return to this Menu,<br />
so you can click a different link for a different thing.<br />
<br />
<br />
<small>This file (web page) Copyright (c) 2013-present by me</small>
</body>
</html>

vernonner3voltazim
fonte

1

Aqui está um ótimo artigo : Você pode implementar uma biblioteca comum e apenas usar o código abaixo para importar qualquer arquivo HTML em uma linha.

<head>
   <link rel="import" href="warnings.html">
</head>

Você também pode experimentar o Google Polymer

Dhiral Pandya
fonte

6

"basta usar o código abaixo para importar arquivos HTML em uma linha" é bastante falso. Você precisa escrever algumas JS para usar qualquer conteúdo importado, para que acabe sendo muito mais que "uma linha".

precisa saber é o seguinte

1

Usando backticks ES6 ``: literais de modelo !

let nick = "Castor", name = "Moon", nuts = 1

more.innerHTML = `

<h1>Hello ${nick} ${name}!</h1>

You collected ${nuts} nuts so far!

<hr>

Double it and get ${nuts + nuts} nuts!!

`

<div id="more"></div>

Expandir snippet

Dessa forma, podemos incluir html sem aspas de codificação, incluir variáveis do DOM e assim por diante.

É um mecanismo de modelagem poderoso, podemos usar arquivos js separados e usar eventos para carregar o conteúdo no local ou até separar tudo em partes e chamar sob demanda:

let inject = document.createElement('script');
inject.src= '//....com/template/panel45.js';
more.appendChild(inject);

https://caniuse.com/#feat=template-literals

NVRM
fonte

1

Belo exemplo - por que não houve votos positivos (até agora)?

javadba 6/06

Ei, você está certo, em 2018 o exposto acima foi um sinal claro de um bom RTFM;) Eu esmaguei amplamente esse javascriptdistintivo como programador de hobby até então.

NVRM

1

Para que o Solution funcione, é necessário incluir o arquivo csi.min.js, que você pode localizar aqui .

Conforme o exemplo mostrado no GitHub, para usar esta biblioteca, você deve incluir o arquivo csi.js no cabeçalho da página e adicionar o atributo data-include com seu valor definido no arquivo que você deseja incluir no contêiner elemento.

Ocultar código de cópia

<html>
  <head>
    <script src="csi.js"></script>
  </head>
  <body>
    <div data-include="Test.html"></div>
  </body>
</html>

... espero que ajude.

Hamza Ali
fonte

0

PHP é uma linguagem de script no nível do servidor. Pode fazer muitas coisas, mas um uso popular é incluir documentos HTML em suas páginas, da mesma forma que o SSI. Como o SSI, essa é uma tecnologia no nível do servidor. Se você não tiver certeza se possui a funcionalidade PHP no seu site, entre em contato com o seu provedor de hospedagem.

Aqui está um script PHP simples que você pode usar para incluir um trecho de HTML em qualquer página da Web habilitada para PHP:

Salve o HTML dos elementos comuns do seu site para separar arquivos. Por exemplo, sua seção de navegação pode ser salva como navigation.html ou navigation.php. Use o seguinte código PHP para incluir esse HTML em cada página.

<?php require($DOCUMENT_ROOT . "navigation.php"); ?>

Use o mesmo código em todas as páginas em que você deseja incluir o arquivo. Certifique-se de alterar o nome do arquivo destacado para o nome e o caminho para o arquivo de inclusão.

Udara Pathirage
fonte

0

Se você usa alguma estrutura como django / bootle, eles costumam enviar algum mecanismo de modelo. Digamos que você use bottle, e o mecanismo de modelo padrão é o SimpleTemplate Engine . E abaixo está o arquivo html puro

$ cat footer.tpl
<hr> <footer>   <p>&copy; stackoverflow, inc 2015</p> </footer>

Você pode incluir o rodapé.tpl no arquivo principal, como:

$ cat dashboard.tpl
%include footer

Além disso, você também pode passar parâmetros para o seu dashborard.tpl.

jaseywang
fonte

0

Com base na resposta de https://stackoverflow.com/a/31837264/4360308 , implementei essa funcionalidade com o Nodejs (+ express + cheerio) da seguinte maneira:

HTML (index.html)

<div class="include" data-include="componentX" data-method="append"></div>
<div class="include" data-include="componentX" data-method="replace"></div>

JS

function includeComponents($) {
    $('.include').each(function () {
        var file = 'view/html/component/' + $(this).data('include') + '.html';
        var dataComp = fs.readFileSync(file);
        var htmlComp = dataComp.toString();
        if ($(this).data('method') == "replace") {
            $(this).replaceWith(htmlComp);
        } else if ($(this).data('method') == "append") {
            $(this).append(htmlComp);
        }
    })
}

function foo(){
    fs.readFile('./view/html/index.html', function (err, data) {
        if (err) throw err;
        var html = data.toString();
        var $ = cheerio.load(html);
        includeComponents($);
        ...
    }
}

acrescentar -> inclui o conteúdo na div

substituir -> substitui a div

você poderia facilmente adicionar mais comportamentos seguindo o mesmo design

giroxiii
fonte

Incluir outro arquivo HTML em um arquivo HTML

Respostas: