JavaScript - Problemas con windows.onblur

Problemas con windows.onblur

Publicado por Katy (10 intervenciones) el 19/10/2022 01:03:37

He creado un modulo para ejecutarse cuando el usuario trate de cambiar de ventana o de ficha en el navegador.
Usé windows.onblur e intente tambien con document.visibilityChange
El modulo muestra usa confirm para solictar confirmacion de la decision de salir de la pagina, en tal caso la cierra pero sin no se confirma deseo que vuelva.
Quiero que se ejecute antes de que llegue a la otra ventana o ficha, pero se ejecuta solo cuando vuelvo a la ventana, es decir, llega a la otra ventana o ficha y solo al retornar a la ventana me aparecen los mensajes. Luego no cumple la funcion que quiero que es evitar el cambio de ventana.
Me explico, la solicitud de confirmacion me aparece al volver a la pagina, no al salir. Y si ya salio y volvio, ya no tendria sentido.
Alguien me puyede ayudar?

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

0

Responder

Pos: 11

Val: 368

Problemas con windows.onblur

Publicado por Gio (79 intervenciones) el 20/10/2022 16:31:50

Hola Katy, ¿Quieres evitar que el usuario cambie de ventana o pestaña del navegador? ¿Podrías enviar un código de lo que llevas hecho, resumido donde se muestre lo que quieres hacer?

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

0

Comentar

Problemas con windows.onblur

Publicado por Katy (10 intervenciones) el 21/10/2022 16:50:25

Gracias Gio.
Este es el codigo que hice:

<!DOCTYPE html>
<html>
<head>
<h3>Pagina de prueba</h3><br>
</head>
<body>
Introduzca un dato: <input type="text" name="Dato" id="TxtDato"><br><br>
<textarea id="Salida" rows="10" cols="70"></textarea>
<script type="text/javascript">
//Crea variables globales
estadoPg='';
ventanaActiva='';
msg='';

//Recarga la ventana
if (navigator=="Safari") {
msg+='Navegador safari/n'
Salida.value+=msg;
window.location.reload()
}
else Salida.value+=document.location+'\n';

//Crea propiedad a window
window.Activa=true;

//Si se deja de ver la ventana o pestaña
document.addEventListener("visibilitychange", () => solicitaConfirmacion())

//Determinar si se esta tratando de abrir otra ventana con la misma instancia
//window.addEventListener("load", () => verificaSiExiste(this))

// Cuando el usuario intenta cambiar de ventana
window.addEventListener("blur", () => solicitaConfirmacion(this))

//Cuando el usuario cambia de pestaña
document.addEventListener("blur", () => solicitaConfirmacion(this))

//Confirma decision del Usuario
function solicitaConfirmacion(Ventana){
msg+='Solicita confirmar salida\n';
if (Ventana.Activa) {
Ventana.Activa=false;
if (confirm('Esta ABANDONANDO su Examen. Está seguro que desea salir de su Examen?\nSi esta seguro, haga cilck en Aceptar y su Examen se ENVIARÁ INMEDIATAMENTE.\nSi no, haga click en Cancelar para VOLVER a su Examen.')) {
msg+='Solicita confirmar decision de salir\n';
if (confirm('CONFIRMA que desea SALIR Y ENVIAR su Examen?\nSi CONFIRMA, haga cilck en Aceptar.\nSi NO, haga click en Cancelar.'))
Ventana.Salida.value+=msg;
else
volverAlExamen(Ventana);
}
else
volverAlExamen(Ventana);
}
}

//Accion que se toma si el Usuario Cancela y decide Volver a la Ventana
function volverAlExamen(Ventana) {
msg+='Vuelve a la ventana\n';
Ventana.focus();
Ventana.location.reload();
Ventana.document.location.reload();
Ventana.Activa=true;
Ventana.Salida.value+=msg;
}

//Verifica si ya existe la página
function verificaSiExiste(Ventana) {
msg+='Se esta cargando la pagina\n';
ventanaActiva=Ventana.location;
if (estadoPg === '') {
// Carga si no tiene el estado.
msg+='Carga la pagina '+estadoPg+'\n';
estadoPg='Cargada'; //Cambia el estado
}
else{
Ventana.close;
msg+='Cierra la ventana creada\n';
}
Ventana.Salida.value+=msg;
}

</script>
</body>
</html>

Valora esta respuesta

0

Comentar

Pos: 11

Val: 368

Problemas con windows.onblur

Publicado por Gio (79 intervenciones) el 22/10/2022 01:39:25

Debes trabajar con el siguiente código para detectar cuando el usuario cambia de pestaña o de programa:

1

2

3

4

5

6

7

8

var unaVez = true;

setInterval(()=>{

    if (unaVez && !document.hasFocus()) {

        unaVez = false;

        //TU CODIGO VA AQUI

    } else

        unaVez = true;

}, 200);

Retoqué todo el código, quedando así:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

<!DOCTYPE html>

<html>

<head>

    <h3>Pagina de prueba</h3><br>

</head>

<body>

    Introduzca un dato: <input type="text" name="Dato" id="TxtDato"><br><br>

    <textarea id="Salida" rows="10" cols="70"></textarea>

    <script type="text/javascript">

        var ventanaActiva = true;

        //Navegador

        function navegador() {

            var ua= navigator.userAgent, tem,

            M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];

            if(/trident/i.test(M[1])){

                tem=  /\brv[ :]+(\d+)/g.exec(ua) || [];

                return 'IE '+(tem[1] || '');

            if(M[1]=== 'Chrome'){

                tem= ua.match(/\b(OPR|Edg)\/(\d+)/);

                if(tem!= null) return tem.slice(1).join(' ').replace('OPR', 'Opera');

            M= M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];

            if((tem= ua.match(/version\/(\d+)/i))!= null) M.splice(1, 1, tem[1]);

            return M[0];

        Salida.value += `Navegador ${navegador()}\n`;

        Salida.value += document.location + '\n';

        //Funcion que se ejecutará cuando el usuario salga del sitio web

        function fueraDeFoco() {

            Salida.value += 'Solicita confirmar decision de salir\n';

            setTimeout(() => {

                if (confirm('Esta ABANDONANDO su Examen. Está seguro que desea salir de su Examen?\nSi esta seguro, haga cilck en Aceptar y su Examen se ENVIARÁ INMEDIATAMENTE.\nSi no, haga click en Cancelar para VOLVER a su Examen.')) {

                    setTimeout(() => {

                        if (confirm('CONFIRMA que desea SALIR Y ENVIAR su Examen?\nSi CONFIRMA, haga cilck en Aceptar.\nSi NO, haga click en Cancelar.')) {

                            //EL CODIGO PARA ENVIAR EL EXAMEN VA AQUI

                            window.location.reload();

                            window.document.location.reload();

                        } else

                            ventanaActiva = true;

                    }, 1);

                } else

                    ventanaActiva = true;

            }, 1);

        //Visibilidad del navegador

        setInterval(()=>{

            if (ventanaActiva && !document.hasFocus()) {

                ventanaActiva = false;

                fueraDeFoco();

        }, 200);

    </script>

</body>

</html>

Valora esta respuesta

0

Comentar

Problemas con windows.onblur

Publicado por Katy (10 intervenciones) el 27/10/2022 02:12:16

Gracias Gio, probe lo que me siugeriste y te comento que en Chrome esta capturando el foco antes de cambiar de ventana y si hace lo que se espera que haga, sin embargo al cambiar de ficha en la misma ventana del navegador, solo se ejecuta al retornar a la ficha, es decir se llega a cambiar de ficha y solo aparece el cuadro de diálogo de confirmación al retornar a la ficha.
En Firefox y Safari sigue cambiando de ventana y de nuevo el cuadro de diálogo de confiormación al volver a la ventana, lo mismo ocurre al cambiar de ficha.

Valora esta respuesta

0

Comentar