0

me gustaría hacer que si el usuario por ejemplo bloquea un determinado archivo de la web (por ejemplo un js) se le redireccione o directamente le aparezca un mensaje de error que posteriormente crearé yo. Indagando y probando tampers he encontrado que si bloqueas un archivo en la consola aparece el siguiente error:

GET http://127.0.0.1/tusc/trie/assets/js/prueba.js net::ERR_BLOCKED_BY_CLIENT

Y buscando por foros me he encontrado con este ejemplo de code:

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {
    if(xhr.readyState == 4 && xhr.status == 200) {
        window.location.href = exportUrl;
    }
}

xhr.open('head',exportUrl);
xhr.send(null);

Pero claro, probando no he llegado al resultado que esperaba.
Anotación: Quiero hacer esto debido a que llevo numerosos procesos por js, que en caso de bloqueo podrían conllevar al malfuncionamiento de la web.
También he pensado en llevarme esos archivos a la página principal, es decir, en vez de importarlos con <script src=""></script>, importarlos a través de la etiqueta <script> </script> pero me gustaría encontrar nuevas maneras.

0

1 respuesta 1

0

Podrías crear un div que contenga el mensaje de error y ocultarlo por Javascript cuando se cargue el DOM. Si no se carga el script, se verá el mensaje.

En este ejemplo no hay script y se muestra el mensaje, está oculto al inicio y se muestra mediante una animación CSS.

#script-necesario {
    position:fixed;
    top:-100%;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.75);
    /* Mostrar con animación para que el script pueda ocultarlo */
    animation:mostrar 3s forwards;
}
#script-necesario > div {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:50%;
    height:50p%;
    color:#fff;
    background:#f60;
    padding:20px;
}
@keyframes mostrar {
    0% { top:-100%; }
    75% { top:-100%; }
    100% { top:0; }
}
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<div id="script-necesario">
    <div>Para ver esta página se requiere el uso de Javascript. Activa Javascript en tu navegador y permite que se ejecute "prueba.js"</div>
</div>

En este otro sí hay script y, antes de que se ejecute la animación, oculta el mensaje:

// Ejecutar cuando cargue el DOM
document.addEventListener('DOMContentLoaded', () => {
    // No mostrar mensaje
    document.querySelector('#script-necesario').style.display = 'none';
});
#script-necesario {
    position:fixed;
    top:-100%;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.75);
    /* Mostrar con animación para que el script pueda ocultarlo */
    animation:mostrar 3s forwards;
}
#script-necesario > div {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:50%;
    height:50p%;
    color:#fff;
    background:#f60;
    padding:20px;
}
@keyframes mostrar {
    0% { top:-100%; }
    75% { top:-100%; }
    100% { top:0; }
}
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<div id="script-necesario">
    <div>Para ver esta página se requiere el uso de Javascript. Activa Javascript en tu navegador y permite que se ejecute "prueba.js"</div>
</div>

En caso de ser necesario, ajusta el tiempo de la animación cambiando 3s (3 segundos) por la duración que prefieras en la siguiente línea:

animation:mostrar 3s forwards;
1
  • Hola, gracias por tu respuesta. En cuanto pueda lo pruebo y te digo ^^
    – Ssnov
    Commented el 23 nov. 2021 a las 19:42

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.