Incluir un archivo HTML en otro archivo HTML
-
Utilice el método jQuery
load()para incluir un archivo HTML en un archivo HTML - Utilice JavaScript para incluir un archivo HTML en un archivo HTML
Este artículo presentará métodos para incluir un archivo HTML en un archivo HTML.
Utilice el método jQuery load() para incluir un archivo HTML en un archivo HTML
El método jQuery load() nos permite cargar los datos del servidor. Los datos se mostrarán en el contenedor seleccionado. Podemos usar el método load() para incluir otro archivo HTML en el archivo HTML actual. La sintaxis del método load() es la siguiente.
.load(url, data, callback);
El método load() toma la URL a cargar como primer parámetro. Tiene otros dos parámetros, data y callback función, que son opcionales. El parámetro data son los datos que se enviarán al servidor mientras se procesa la solicitud. La función callback se ejecutará si se completa el método load().
Para ejecutar jQuery, necesitamos usar jQuery CDN en la etiqueta script en HTML. Por ejemplo, vaya a CDN y elija la opción minificada en la última versión de jQuery. Luego, copie el código y péguelo en el archivo index.html. A continuación, cree un div con id anotherContent en HTML. Luego, cree una etiqueta p y escriba el texto This is from index.html. Cree otro archivo HTML llamado lake.html y escriba un párrafo This is from lake.html. En index.html, escriba una función jQuery. Seleccione el id anotherContent y llame al método load() con lake.html como parámetro.
Cuando ejecutamos el archivo index.html también podemos ver el texto Esto es de lake.html. Sin embargo, deberíamos ejecutar el archivo index.html desde un servidor HTTP. La solicitud de origen cruzado se bloqueará cuando incluyamos otro archivo (lake.html en nuestro caso) en el archivo actual utilizando el servidor local file. Para eliminar este problema, podemos crear un servidor HTTP con el siguiente comando de Python desde el directorio del archivo index.html.
python3 -m SimpleHTTPServer 1337
Luego, podemos acceder a nuestra página web desde http://localhost:1337. Por lo tanto, podemos usar jQuery para incluir otro archivo HTML en el archivo HTML actual.
Código de ejemplo:
<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>
Producción :
This is from lake.html
This is from index.html
Utilice JavaScript para incluir un archivo HTML en un archivo HTML
Podemos usar JavaScript para incluir HTML en un archivo HTML. El beneficio de usar este método usando jQuery es que no tenemos que cargar ninguno de los archivos jQuery que hacen que el tamaño de nuestro archivo sea más pequeño. Podemos usar los literales de plantilla en JavaScript para escribir el HTML. Podemos lograr nuestro objetivo al incluir el archivo JavaScript en nuestro archivo HTML y escribir el HTML en el archivo JavaScript.
Por ejemplo, en el archivo index.hmtl, vincule el archivo lake.js usando el atributo src en la etiqueta script. En la sección del cuerpo, escriba el texto This is from index.html. En el archivo lake.js, use document.write() para escribir el HTML. Utilice los literales de la plantilla para escribir el HTML dentro del método. En otras palabras, envuelva el contenido HTML con las comillas invertidas. Escriba la etiqueta p dentro del método y escriba el texto This is HTML from lake.js.
En la sección de salida, podemos ver los textos de ambos archivos. Por lo tanto, podemos incluir HTML en un archivo HTML usando JavaScript.
Código de ejemplo:
<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>
`);
Producción :
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