1

Tengo 3 archivos .html, en el principal hay 2 iframes y cada uno muestra otro .html. El primer iframe muestra varios input types image que servirán para que al pulsar en ellos cambien el src del otro iframe, es decir, un iframe hace como de menú para cambiar entre varios .html y el otro iframe lo muestra. Estaba usando esta función para cambiar de html con los input types:

let lofi = document.getElementById("lofi");

lofi.onclick = lofilink;

function lofilink() {

    let loc = "lofi.html";
    let iframeMain = document.getElementById("iframe-main");
    iframeMain.src=loc;
}

Esto basicamente hace que al pulsar en uno de los botones del primer iframe cambie el contenido del otro iframe, el problema es que no funciona, no encuentra el elemento si está en uno de los iframes. Solo funciona si el input type está en el .html principal, es decir, el que contiene los 2 iframes. ¿Cómo se podría hacer que el .js permita hacer getElementById independientemente de en qué .html esté el elemento?

¡Gracias de antemano!

9
  • Hola Javier, podes buscar el contenido dentro de tu iframe utilizando esta sintaxis ---> document.getElementById('myframe1').contentWindow.document.getElementById('x') podes ver mas en este post --> stackoverflow.com/questions/14451358/… Commented el 25 jun. 2021 a las 11:53
  • @FacundoE.Villagra puedes poner eso como una respuesta, para que el OP la pueda aceptar si la encuentra correcta.
    – SJuan76
    Commented el 25 jun. 2021 a las 12:11
  • Sigue sin funcionarme, he cambiado la linea a esto pero no funciona: let lofi = document.getElementById('iframe-files').contentWindow.document.getElementById('lofi'); Commented el 25 jun. 2021 a las 12:13
  • @SJuan76, no me pareció que fuera suficiente para ser considerado respuesta, ahora veo si puedo desarrollar un poco mas el concepto. Javier, ¿podrías agregar código mas significativo para poder revisarlo?, la estructura de tu html con los iframes. Commented el 25 jun. 2021 a las 12:20
  • Vale he conseguido solucionarlo, el problema era que tiene que estar el iframe completamente cargado para ejecutar la función. Lo he solucionado con el atributo onload="menuloaded()", el problema es que si la función no está dentro del .html no la encuentra. ¿Cómo puedo hacer para que me ejecute la función estando en el .js y no en el propio html? Commented el 25 jun. 2021 a las 12:29

2 respuestas 2

2

podes buscar el contenido dentro de tu iframe utilizando esta sintaxis

document.getElementById('myframe1').contentWindow.document.getElementById('x') 

Los Iframe tienen que estar completamente cargados antes de poder ejecutar tu codigo, para eso podes poner "defer" en el script

<script defer src="file.js"></script>

Podes ver mas en este post:

https://stackoverflow.com/questions/14451358/how-to-pick-element-inside-iframe-using-document-getelementbyid

0

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

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.