Inclui HTML W3.JS

Incluir um arquivo HTML:

w3.includeHTML()

O HTML

Salve o HTML que deseja incluir em um arquivo .html:

content.html

<a href="https://www.w3schools.com/html/">HTML</a><br>
<a href="https://www.w3schools.com/css/">CSS</a><br>
<a href="https://www.w3schools.com/bootstrap/">Bootstrap</a><br>
<a href="https://www.w3schools.com/js/">JavaScript</a><br>
<a href="https://www.w3schools.com/sql/">SQL</a><br>
<a href="https://www.w3schools.com/php/">PHP</a><br>
<a href="https://www.w3schools.com/w3css/">W3.CSS</a><br>

Incluir o HTML

A inclusão de HTML é feita usando um atributo w3-include-html :

Exemplo

<div w3-include-html="content.html"></div>

Adicione o JavaScript

As inclusões HTML são feitas por JavaScript.

Certifique-se de que sua página tenha w3.js carregado e chame w3.includeHTML() :

Exemplo

<script>
w3.includeHTML();
</script>

Exemplo completo

Exemplo

<!DOCTYPE html>
<html>
<script src="/lib/w3.js"></script>
<body>

<div w3-include-html="content.html"></div>

<script>
w3.includeHTML();
</script>

</body>
</html>

Incluir muitos trechos de HTML

Você pode incluir qualquer número de snippets HTML:

Exemplo

<!DOCTYPE html>
<html>
<script src="/lib/w3.js"></script>
<body>

<div w3-include-HTML="h1.html"></div>
<div w3-include-HTML="content.html"></div>

<script>
w3.includeHTML();
</script>

</body>
<html>


Adicionando uma função de retorno de chamada

Ao incluir trechos de HTML em uma página da Web, você deve garantir que outras funções que dependem do HTML incluído não sejam executadas antes que o HTML seja incluído corretamente.

A maneira mais fácil de "reter" o código é colocá-lo em uma função de retorno de chamada.

Uma função de retorno de chamada pode ser adicionada como um argumento para w3.includeHTML():

Exemplo

<script>
w3.includeHTML(myCallback);

function myCallback() {
  // code that has to wait goes here
}
</script>

Você encontrará um exemplo de retorno de chamada no próximo capítulo deste tutorial.