En lugar de usar iframe
para maquetar, te sugiero crear una etiqueta personalizada, que te va a dar casi la misma funcionalidad, pero se maneja de una forma más sencilla.
Un ejemplo que puedes probar:
// Clase para manejo de etiqueta personalizada
class MyMenu extends HTMLElement {
constructor() {
// Al extender, siempre se debe llamar al constructor padre
super();
// Cargar contenido con petición AJAX
this._load();
}
async _load() {
// Obtener ruta desde atributo de datos o contenido de etiqueta
let src = this.dataset.src || this.textContent || null;
// Verificar que hay una ruta para ejecutar la petición
if (!src || !src.trim()) {
throw 'No se especificó archivo para cargar';
}
// Ejecutar petición AJAX para cargar contenido
let rsp = await fetch(src.trim(), {cache:'no-cache'});
// ¿Hubo error?
if (rsp.status != 200) {
// Lanzar excepción
throw 'No se pudo carcar el menú desde: ' + src;
}
// La respuesta se asigna como contenido de la etiqueta
this.innerHTML = await rsp.text();
// Todo se cargó correctamente, lanzar evento personalizado
this.dispatchEvent(new Event('myMenuLoaded'));
}
}
// Registrar etiqueta personalizada (nombreDeEtiqueta, nombreDeClase)
customElements.define("my-menu", MyMenu);
// Ejecutar cuando se cargue el DOM
document.addEventListener('DOMContentLoaded', e => {
// Escuchar cuando se cargue el contenido de la etiqueta
document.querySelector('#my-menu').addEventListener('myMenuLoaded', menuFormat);
});
// Función de ejemplo, porque la respuesta es un JSON
function menuFormat(e) {
let menu = e.currentTarget;
let data = JSON.parse(menu.innerHTML);
let html = '<ul>';
data.forEach(user => {
html += `<li>${user.id} - ${user.title}</li>`;
});
html += '</ul>';
menu.innerHTML = html;
}
<my-menu id="my-menu" data-src="https://jsonplaceholder.typicode.com/todos?userId=1">Aquí se debe mostrar el menú</my-menu>
Entonces, puedes crear tu menú en un archivo aparte, digamos que es my-menu.html
y puede tener texto o imágenes, tú decides:
<nav>
<ul id="main-menu">
<li><a href="index.html">Inicio</a></li>
<li><a href="pagina1.html">Página 1</a></li>
<li><a href="pagina2.html">Página 2</a></li>
<li><a href="pagina3.html">Página 3</a></li>
</ul>
</nav>
En cada clic en los enlaces, se abrirá la página correspondiente, por lo que en todas las páginas de tu sitio debes incluir el menú y cargar el código Javascript donde tienes todas tus funciones y la etiqueta personalizada:
<h1>Página 1 - Nombre del sitio</h1>
<my-menu data-src="my-menu.html">Cargando menú...</my-menu>
<div id="contenido">
<h2>Contenido de la página 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
</div>
<script src="script.js"></script>
Ahora, solo necesitas agregar una función en tu archivo de funciones Javascript para marcar el enlace activo, de acuerdo a la página que se está mostrando:
// Ejecutar cuando se cargue el DOM
document.addEventListener('DOMContentLoaded', e => {
// Escuchar cuando se cargue el contenido de la etiqueta
document.querySelector('#my-menu').addEventListener('myMenuLoaded', menuActive);
});
function menuActive(e) {
// Obtener todos los enlaces del menú
let menuLinks = e.currentTarget.querySelectorAll('li a');
// Recorrer para buscar el que se debe activar
menuLinks.forEach(item => {
if(item.href == window.location.href) {
// La página actual es la misma del enlace
// Marcar como activo agregando una clase CSS
item.classListAdd('active');
}
});
}
Algunas consideraciones finales:
- Esta opción podría ser buena para incluir contenido en todas tus páginas cuando no estás manejando un lenguaje del lado del servidor; si lo tienes, entonces convendría trabajarlo desde ahí
- Al igual que los marcos (
iframe
), esto debe ejecutarse en un servidor; por seguridad, los navegadores negarán acceso a peticiones AJAX o interacción entre marcos por protocolo file:///
(abriendo desde ruta en disco)
- Puedes adaptar la etiqueta personalizada para cargar cualquier tipo de contenido, no solo menús
- Si deseas actualizar el contenido de un elemento para evitar recargar toda la página, entonces debes usar peticiones AJAX y, de preferencia, manipular el historial del navegador para que siempre se muestre la URL correcta
- Importante: Ten en cuenta que puedes hacer una petición AJAX simple para cargar el menú en un contenedor específico, sin tener que crear etiquetas personalizadas