Incluir um arquivo HTML em outro arquivo HTML
-
Use o método jQuery
load()para incluir um arquivo HTML em um arquivo HTML - Use JavaScript para incluir um arquivo HTML em um arquivo HTML
Este artigo apresentará métodos para incluir um arquivo HTML em um arquivo HTML.
Use o método jQuery load() para incluir um arquivo HTML em um arquivo HTML
O método jQuery load() nos permite carregar os dados do servidor. Os dados serão exibidos no container selecionado. Podemos usar o método load() para incluir outro arquivo HTML no arquivo HTML atual. A sintaxe do método load() é a seguinte.
.load(url, data, callback);
O método load() leva o URL a ser carregado como o primeiro parâmetro. Possui dois outros parâmetros, data e função callback, que são opcionais. O parâmetro data são os dados a serem enviados ao servidor durante o processamento da solicitação. A função callback será executada se o método load() for concluído.
Para executar o jQuery, precisamos usar o jQuery CDN na tag script em HTML. Por exemplo, vá para CDN e escolha a opção minimizada na versão mais recente do jQuery. Depois, copie o código e cole-o no arquivo index.html. Em seguida, crie um div com id anotherContent em HTML. Em seguida, crie uma tag p e escreva o texto This is from index.html. Crie outro arquivo HTML chamado lake.html e escreva um parágrafo This is from lake.html. Em index.html, escreva uma função jQuery. Selecione o id anotherContent e chame o método load() com lake.html como parâmetro.
Quando executamos o arquivo index.html, também podemos ver o texto This is from lake.html. No entanto, devemos executar o arquivo index.html de um servidor HTTP. A solicitação de origem cruzada será bloqueada quando incluímos outro arquivo (lake.html em nosso caso) no arquivo atual usando o servidor file local. Para eliminar este problema, podemos criar um servidor HTTP com o seguinte comando python a partir do diretório do arquivo index.html.
python3 -m SimpleHTTPServer 1337
Então, podemos acessar nossa página da web em http://localhost:1337. Assim, podemos usar jQuery para incluir outro arquivo HTML no arquivo HTML atual.
Código de exemplo:
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous">
</script>
<script>
$(function(){
$("#anotherContent").load("lake.html");
});
</script>
<div id="anotherContent"></div>
<p>This is from index.html</p>
<p> This is from lake.html</p>
Resultado:
This is from lake.html
This is from index.html
Use JavaScript para incluir um arquivo HTML em um arquivo HTML
Podemos usar JavaScript para incluir HTML em um arquivo HTML. O benefício de usar este método usando jQuery é que não precisamos carregar nenhum dos arquivos jQuery que tornam o tamanho do nosso arquivo menor. Podemos usar os literais de modelo em JavaScript para escrever o HTML. Podemos atingir nosso objetivo incluindo o arquivo JavaScript em nosso arquivo HTML e escrevendo o HTML no arquivo JavaScript.
Por exemplo, no arquivo index.hmtl, vincule o arquivo lake.js usando o atributo src na tag script. Na seção do corpo, escreva o texto This is from index.html. No arquivo lake.js, use document.write() para escrever o HTML. Use os literais de modelo para escrever o HTML dentro do método. Em outras palavras, envolva o conteúdo HTML com crases. Escreva a tag p dentro do método e escreva o texto This is HTML from lake.js.
Na seção de saída, podemos ver os textos de ambos os arquivos. Assim, podemos incluir HTML em um arquivo HTML usando JavaScript.
Código de exemplo:
<head>
<script src="lake.js "></script>
</head>
<body>
<p>This is from index.html</p>
</body>
document.write(`
<p>This is HTML from lake.js</p>
`);
Resultado:
This is HTML from lake.js
This is from index.html
Subodh is a proactive software engineer, specialized in fintech industry and a writer who loves to express his software development learnings and set of skills through blogs and articles.
LinkedIn