Incluir arquivo html dentro de outro arquivo html

HTML

25/11/2016

Oi gente,

Existe alguma maneira de fazer inclusão de um arquivo html dentro de outro arquivo html?

No php sei que isso se faz com require, include, etc.

Tem algum jeito de fazer isso só com html?
Larissa Aguiar

Larissa Aguiar

Curtidas 1

Melhor post

Kleber Araujo

Kleber Araujo

25/11/2016

Olá, Larissa tem sim, vou postar uma solução exemplo que fiz em resposta a uma pergunta igualzinha a tua =) usando Jquery! , se quiser saber como fazer usando Javascript puro, me dá um toque, que posto pra vc

usando Jquery com a função load vc pode ler um arquivo html e carregar em um elemento da sua página principal, segue exemplo:

arquivo da página principal: Ex: ler-html-sem-iframe.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Ler página html sem Iframe</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"
            integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
            crossorigin="anonymous"></script>
</head>
<body>
    
   <h1>Ler página <button type="button" id="ler-pagina">Ler página</button> </h1>
   <div id="conteudo-pagina-lida"></div>
    
   <script>
   $(document).ready(function(){
        $("#ler-pagina").click(function(){
             
            $(function(){
                $("#conteudo-pagina-lida").load("pagina-lida.html"); 
            });
        })
   });
   </script>
    
</body>
</html>


Arquivo da outra página a ser lida: Ex : pagina-lida.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>página lida</title>
</head>
<body>

<h2>Html Lido de outra página</h2>

</body>
</html>

=)

OBS: execute esses testes rodando em um servidorzinho http local mesmo, se não , não vai funcionar por causa da segurança do ajax, Access Origin, Cors em que deve executar estas chamadas de um mesmo domínio no caso de arquivos locais
GOSTEI 5

Mais Respostas

Fernando C

Fernando C

25/11/2016

veja aqui:
http://www.w3schools.com/howto/howto_html_include.asp
(é com javascript, bem facil)
GOSTEI 1
Kleber Araujo

Kleber Araujo

25/11/2016

Valeu pelo feedback =)
GOSTEI 0
Larissa Aguiar

Larissa Aguiar

25/11/2016

Gente muito legal mesmo!

Parece ser muito útil!
GOSTEI 0
POSTAR