Incluir arquivo html dentro de outro arquivo html
25/11/2016
0
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?
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
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
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
Mais Posts
25/11/2016
Fernando C
veja aqui:
http://www.w3schools.com/howto/howto_html_include.asp
(é com javascript, bem facil)
http://www.w3schools.com/howto/howto_html_include.asp
(é com javascript, bem facil)
Responder
Clique aqui para fazer login e interagir na Comunidade :)