Verificar Si Estás Conectado a localhost con jQuery

2 minuto(s)

En esta página:

En ocasiones necesitamos verificar si nuestra aplicación está conectada al localhost o servidor local.

Hacer esto con jQuery es fácil, solo debes seguir los pasos que te mostraré a continuación.

En este tutorial te enseñaré a Verificar Si Estás Conectado a localhost con jQuery, vamos con ello.

Verificando si nuestra aplicacion está conectada a localhost con jQuery — jQuery nos permite realizar tareas con menos código JavaScript

Para este ejemplo creo un archivo llamado index.html simple

Verificando la Conexión a localhost

Instanciamos jQuery y luego hacemos la verificación.

En la verificación hacemos uso de la propiedad hostname de la interfaz Location.

La interfaz Location es parte de las APIs web que vienen integradas nativamente en los navegadores:


<!-- Instanciamos jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<!-- Código -->
<script>
    $(document).ready(function() {

        // Este código se ejecuta cuando el documento está listo
            
        if (location.hostname === "localhost" || location.hostname === "127.0.0.1" || location.hostname === ""){

            alert("Estás en localhost !");

        } else{

            alert("Estás en un servidor remoto !");
                
        }
    });
</script>

$(document).ready(function() {

// Este código se ejecuta cuando el documento está listo

if (location.hostname === "localhost" || location.hostname === "127.0.0.1" || location.hostname === ""){

alert("Estás en localhost !");

} else{

alert("Estás en un servidor remoto !");

}

});

</script>

A continuación el código completo del archivo index.html:


<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Proyecto</title>
  </head>
  <body>

    <h1>Bienvenido a mi página con jQuery</h1>

    <div id="contenido">
      <p>Este es un párrafo de ejemplo</p>
    </div>

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

    <!-- Instanciamos jQuery -->
    <script>

      $(document).ready(function() {

        // Este código se ejecuta cuando el documento está listo
        if (location.hostname === "localhost" || location.hostname === "127.0.0.1" || location.hostname === "") {

          alert("Estás en localhost !");

        } else {

          alert("Estás en un servidor remoto !");

        }
      });

    </script>

  </body>
</html>