0

Estoy haciendo una práctica con un formulario que te abre una ventana externa del navegador con ciertos parámetros, algo así como un responsive test. Lo que sucede es que también tengo un botón para cerrar la ventana que previamente abrí, pero no funciona. Intenté pasarle la variable del formulario al método close(), pero lo que hace es que me cierra la ventana del formulario y no la externa.

Aquí el código:
JS:

function responsiveTester(formID = "") {
    const form = document.getElementById(formID);
    let prueba;
    document.addEventListener("submit", (e) => {
        if (e.target === form) {
            e.preventDefault();
            prueba = window.open(form.direccion.value, "prueba", `innerWidth = ${form.ancho.value}, innerHeight = ${form.alto.value}`);
        }
    });

    document.addEventListener("click", (e) => {
        if (e.target === form.cerrar) {
            prueba .close();
        }
    });

}
//Aquí lo cargo
responsiveTester("test");

HTML:

    <form id="test">
            <input type="url" name="direccion" required placeholder="URL">
            <br>
            <input type="number" name="ancho" required placeholder="Ancho">
            <br>
            <input type="number" name="alto" required placeholder="Alto">
            <br>
            <input type="submit" name="enviar" value="probar">
            <br>
            <input type="button" name="cerrar" value="cerrar la ventana">
    </form>
4
  • No estoy seguro de que este sea el problema pero tienes </for> en lugar de </form> tal ves va por ahi Commented el 1 sept. 2023 a las 19:29
  • no, continúa pasando lo mismo. Pienzo que el error está en el método close o en el bloqueo del navegador Commented el 3 sept. 2023 a las 8:22
  • ¿Has probado a usar var en vez de let? Commented el 3 sept. 2023 a las 8:57
  • En el ejercicio usan let, además, está en la misma función y creo que no debería ser mucha la diferencia. Últimamente han dejado de usar el var Commented el 3 sept. 2023 a las 16:11

1 respuesta 1

0

El problema puede ser la propagación del evento.

Primero, estás escuchando todos los eventos submit del HTML, pero más importante, estás escuchando todos los eventos click del browser, incluyendo los que se propagan, lo que genera un conflicto entre el form y sus componentes.

Te propongo el siguiente código, es lo mismo que el tuyo, no refactoricé la forma, solo añadí el identificador "cerrar" y acoté el sope del submit a tu formulario.

Me dices como te va, ¡saludos!

function responsiveTester(formID = "") {
    const form = document.getElementById(formID);
    const cerrar = form.querySelector('[name="cerrar"]');
    let prueba;

    form.addEventListener("submit", (e) => {
        console.log('CLICK SUBMIT')
        if (e.target === form) {
            e.preventDefault();
            prueba = window.open(form.direccion.value, "prueba", `innerWidth = ${form.ancho.value}, innerHeight = ${form.alto.value}`);
        }
    });

    cerrar.addEventListener("click", (e) => {
        console.log('CLICK CERRAR')
        if (e.target === form.cerrar) {
            prueba .close();
        }
    });

}
//Aquí lo cargo
responsiveTester("test");
2
  • Seguí haciendo pruebas, y parece que algunas páginas o el navegador mismo te bloquea esa opción. de la única fórma que hace algo es si le paso el formulario como parámetro al método close. y cuando hago eso lo que ce cierra es la página del fomulario pero la nueva página abierta no. Lo intenté abriendo la página principal de youtube por ejemplo y nada Commented el 7 sept. 2023 a las 19:09
  • Refactorizaste tu código? Podrías dejar una captura del código que tienes actualmente? Igualmente, si lo estás subiendo en algún repositorio, déjalo acá, si no, súbelo a github! Me comentas Commented el 14 sept. 2023 a las 0:34

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.