¿Cómo comprobar que el entorno de tiempo de ejecución actual es un navegador en JavaScript?

En este artículo veremos cómo detectar el entorno de ejecución en el que se ejecuta nuestro código JavaScript. Suponga que está creando una aplicación en Node.js y necesita incluir ese código en una página web que se ejecutaría en un navegador. Esto haría que algunas funciones de una aplicación Node no funcionaran en los navegadores y viceversa.

Enfoque: no existe ninguna función, método o propiedad para detectar si el entorno de tiempo de ejecución es un navegador; sin embargo, podemos realizar algunas comprobaciones para identificar si se está ejecutando un script en el navegador. Algunos entornos en los que se puede ejecutar el código JavaScript son Node.js, Service Workers o en un navegador web.

Hay diferentes condiciones para cada tipo de ambiente. Crearemos una función que devolverá un valor booleano indicando si el entorno es un navegador o no. En esta función,

  • Primero verificamos si el proceso es del tipo ‘objeto’ y el tipo de requisito es una función que usa el operador typeof . Cuando ambas condiciones son verdaderas, entonces el entorno es Node.js, por lo tanto, devolvemos falso. 
  • De manera similar, verificamos si el entorno es un trabajador de servicio al verificar si el tipo de importScripts es una función. Nuevamente devolvemos falso si la condición coincide.
  • Al final, verificamos que el tipo de ventana sea igual a un ‘objeto’. Una condición verdadera indica que el entorno es un navegador y devolvemos verdadero desde la función.

Sintaxis:

function isBrowser() {

    // Check if the environment is Node.js
    if (typeof process === "object" &&
        typeof require === "function") {
        return false;
    }

    // Check if the environment is a
    // Service worker
    if (typeof importScripts === "function") {
        return false;
    }

    // Check if the environment is a Browser
    if (typeof window === "object") {
        return true;
    }
}

Ejemplo:

HTML

<!DOCTYPE html>
<html>
  
<body>
    <h1>Hello Geeks</h1>
  
    <script>
        function isBrowser() {
  
            // Check if the environment is Node.js
            if (typeof process === "object" &&
                typeof require === "function") {
                return false;
            }
  
            // Check if the environment is
            // a Service worker
            if (typeof importScripts === "function") {
                return false;
            }
  
            // Check if the environment is a Browser
            if (typeof window === "object") {
                return true;
            }
        }
  
        // Calling a alert if the environment is Browser
        if (isBrowser()) {
            alert("The Environment is Browser....")
        }
    </script>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por _saurabh_jaiswal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *