4

lo que quiero hacer y estoy algo confundido, es separar en archivos elementos HTML que tienen eventos y funciones propias y poder cargarlo en un nuevo archivo cuando el usuario realice un clic.

por ejemplo tengo un archivo solo con este codigo:

formulario1.html:

<div>
    <form id="form1">
        <input type="number" id="number1">
        <button id="btn1" onclick="f1()" >calcular</button>
    </form>
</div>
<script>
    function f1(){
        let cadena="usuario"+document.getElementById("numnber1") ;
        return cadena;
    }
</script>

y desde otro archivo quiero que se inserte todo su contenido y las funciones que tenga en otro contenedor de otra pagina: archivo: editor.html:

<html><head><body>...
    <div>
            <button id="btnCargar1" onclick="cargar('formulario1.html')">Cargar Formulario</button>
            <button id="btnCargar2" onclick="cargar('tabla1.html')">Cargar tabla</button>
            <button id="btnCargar3" onclick="cargar('imagenes1.html')">Cargar imagen</button>
            <div id="contenedor1"></div>
    </div>
        <script>
            function cargar(archivo){
                let contenedor= document.getElementById("contenedor1");
                contenedor.innerHTML=""; //limpio
                contenedor.innerHTML= //contenido del archivo formulario1.html
            }
        </script>

Con php logro que se visualice por medio de "include", pero en este caso necesito hacerlo con javascript y lo que he podido ver con el import de JS es que traigo las funciones pero no el html, cualquier recomendación me serviria :D

2 respuestas 2

2

Lo podrías solucionar con el uso de iframes

la etiqueta <div id="contenedor1"></div> deberás cambiarla por <iframe id="contenedor1"></iframe>

y en tu función de js cargar() deberás pasar la url del archivo que deseas que aparezca, y con el metodo setAttribute cambiarás el valor del atributo src

por ejemplo

function cargar(archivo){
   let contenedor= document.getElementById("contenedor1");
   contenedor.setAttribute('src',archivo)
}
1

Podrías usar la API fetch para obtener el nuevo contenido por AJAX, sin embargo, eso no garantiza que las etiquetas <script> sean interpretadas.

function cargar(archivo) {
    // Ejecutar petición para cargar el archivo
    fetch(archivo)
        // Al obtener respuesta del servidor, tomar el texto o html
        .then(res => res.text())
        // Si se interpretó correctamente, el contenido está en la variable html
        .then(html => {
            // Obtener contenedor
            let contenedor = document.getElementById("contenedor1");
            // Asignar nuevo contenido
            contenedor.innerHTML = html;
         })
         // Si algo falló, mostrar mensaje en consola
         .catch(e => {
             console.log('Error importando archivo: ' + e.message);
         });
}

Si los scripts del archivo importando no funcionan, tal vez debas interpretar el nuevo html con DOMParser e insertar cada nodo con .appendChild().

Importante: DOMParser aún está en etapa experimental y podría no funcionar como se espera, por lo que te recomiendo verificar soporte disponible en los diferentes navegadores

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.