F�rum Incluir arquivo html dentro de outro arquivo html #571579

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

Curtir t�pico

+ 1

Responder

Post mais votado

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

Kleber Araujo

Responder

Gostei + 5

Mais Posts

25/11/2016

Fernando C

veja aqui:
http://www.w3schools.com/howto/howto_html_include.asp
(� com javascript, bem facil)

Responder

Gostei + 1

28/11/2016

Kleber Araujo

Valeu pelo feedback =)

Responder

Gostei + 0

29/11/2016

Larissa Aguiar

Gente muito legal mesmo!

Parece ser muito �til!

Responder

Gostei + 0