En este artículo, aprenderemos cómo incluir fragmentos de HTML en el código HTML. Incluiremos el fragmento de código HTML de “ gfg.html ” en “ index.html ”. Para lograr esta tarea, vamos a escribir una función JavaScript en “ index.html ” que recorre la colección de todos los elementos HTML en “ gfg.html” y busca elementos con atributos específicos. Crea una solicitud HTTP con el valor del atributo como nombre de archivo. Al final, diferenciaremos entre el archivo principal » index.html » y el fragmento incluido » gfg.html «.
Acercarse:
- Cree dos archivos HTML “ index.html ” y “ gfg.html ”.
- Cree otro archivo HTML para incluir el archivo » index.html» .
- Cree una función de JavaScript en el archivo HTML principal para incluir el fragmento de HTML.
- Llame a la función en el archivo principal ( «index.html «) para incluir el fragmento de » gfg.html «.
Paso 1: Cree el archivo HTML principal llamado archivo «index.html». Este archivo mostrará un texto de encabezado ‘Esto es index.html’.
HTML
<!DOCTYPE html> <html> <body> <h1 align='center'> <font color='Red'> This is index.html </font> </h1> </body> </html>
Producción:
Paso 2 : Cree otro archivo HTML de su elección para incluirlo en el archivo “ index.html ” y guarde este archivo en el mismo directorio en el que está presente “ index.html ”. En este artículo, cree un archivo HTML llamado » gfg.html » que muestre «GeeksforGeeks, un portal de informática para geeks».
HTML
<!DOCTYPE html>
<html>
<style>
body {
text-align: center;
}
.gfg {
font-size: 180px;
font-weight: bold;
color: green;
}
.geeks {
font-size: 50px;
font-weight: bold;
font-family: Arial;
}
</style>
<body>
<div class="gfg">GeeksforGeeks</div>
<div class="geeks">
A computer science portal for geeks
</div>
<h1>
<font color='Blue'>
This is gfg.html
</font>
</h1>
</body>
</html>
Producción:
Paso 3: Vamos a incluir el fragmento “ gfg.html ” en el archivo “ index.html ”. La inclusión de HTML se realiza mediante un atributo GFG-include-html-snippet .
<div GFG-include-html-snippet="gfg.html"></div>
Agregar el JavaScript
- Atraviesa la colección de todos los elementos HTML.
- Buscar elementos con atributos específicos.
- Cree una solicitud HTTP con el valor del atributo como nombre de archivo.
- Elimine el atributo y vuelva a llamar a esta función.
- Función de salida.
Fragmento de código JavaScript:
Javascript
<script>
function includeHTMLSnippet() {
// Traverse the collection of all
// HTML elements
id = document.getElementsByTagName("*");
for (i = 0; i < id.length; i++) {
element = id[i];
// Search for elements with
// specific attributes
file = element.getAttribute(
"GFG-include-html-snippet");
if (file) {
// Create an HTTP request with
// the attribute value as the
// file name
xmlRequest = new XMLHttpRequest();
xmlRequest.onreadystatechange = function () {
if (this.readyState == 4) {
if (this.status == 200) {
element.innerHTML = this.responseText;
}
if (this.status == 404) {
element.innerHTML = "Page not found.";
}
// Delete the attribute and
// call this function again.
element.removeAttribute(
"GFG-include-html-snippet");
includeHTMLSnippet();
}
}
xmlRequest.open("GET", file, true);
xmlRequest.send();
return; // Exit function.
}
}
};
</script>
Paso 4: Llame a includeHTMLSnippet() en la parte inferior de la página.
<script>
includeHTMLSnippet();
</script>
Código final: el siguiente código demuestra la combinación de todos los pasos anteriores.
index.html
<!DOCTYPE html>
<html>
<head>
<script>
function includeHTMLSnippet() {
// Traverse the collection of
// all HTML elements
id = document.getElementsByTagName("*");
for (i = 0; i < id.length; i++) {
element = id[i];
// Search for elements with
// specific attributes
file = element.getAttribute(
"GFG-include-html-snippet");
if (file) {
// Create an HTTP request with the
// attribute value as the file name
xmlRequest = new XMLHttpRequest();
xmlRequest.onreadystatechange = function () {
if (this.readyState == 4) {
if (this.status == 200) {
element.innerHTML = this.responseText;
}
if (this.status == 404) {
element.innerHTML = "Page not found.";
}
// Delete the attribute and
// call this function again
element.removeAttribute(
"GFG-include-html-snippet");
includeHTMLSnippet();
}
}
xmlRequest.open("GET", file, true);
xmlRequest.send();
return; // Exit function.
}
}
};
</script>
</head>
<body>
<h1 align='center'>
<font color='Red'>
This is index.html
</font>
</h1>
<div GFG-include-html-snippet="gfg.html"></div>
<script>
includeHTMLSnippet();
</script>
</body>
</html>
gfg.html
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
.gfg {
font-size: 140px;
font-weight: bold;
color: green;
}
.geeks {
font-size: 50px;
font-weight: bold;
font-family: Arial;
}
</style>
</head>
<body>
<div class="gfg">
GeeksforGeeks
</div>
<div class="geeks">
A computer science portal for geeks
</div>
<h1>
<font color='Blue'>
This is gfg.html
</font>
</h1>
</body>
</html>
Producción:
Diferenciación del fragmento gfg.html incluido en index.html: el borde rojo indica la salida del index.html principal y el borde azul indica la salida del fragmento HTML incluido.
Publicación traducida automáticamente
Artículo escrito por vinayedula y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA