JavaScript | Objetos ventana.ubicación y documento.ubicación

window.ubicación y documento.ubicación: estos objetos se utilizan para obtener la URL (la dirección de la página actual o actual) y evitar que el navegador acceda a una nueva página o ventana. La principal diferencia entre ambos es su compatibilidad con los navegadores.

  • La ventana.ubicación es de lectura/escritura en todos los navegadores compatibles.
  • El documento.ubicación es de solo lectura en Internet Explorer, pero de lectura/escritura en Firefox, SeaMonkey, que son navegadores basados ​​en Gecko.

Todos los navegadores modernos asignan documento.ubicación a ventana.ubicación, pero puede preferir ventana.ubicación para la seguridad entre navegadores.

Sintaxis:

  • window.location.href: Devuelve la URL de la página de trabajo actual.
  • window.location.hostname: Devuelve el nombre de dominio del servidor web.
  • window.location.pathname: Devuelve la ruta y el nombre de archivo de la página de trabajo actual.
  • window.location.protocol: Devuelve el protocolo utilizado (http: o https:).
  • window.location.port(): Imprime el número de puerto.
  • window.location.host(): Imprime el nombre del host junto con el número de puerto.
  • window.location.assign(): Carga un nuevo documento.

Ejemplo 1: este ejemplo usa diferentes propiedades para obtener diferentes partes de la URL.

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Get Different Part of a URL</title>
</head>
  
<body>
    <script>
  
        // Prints complete URL
        document.write("URL IS:  " 
                + window.location.href + "<br>");
  
        // Prints hostname like local host (www.example.com)
        document.write("HOSTNAME:  " 
                + window.location.hostname + "<br>");
  
        // Prints pathname like /products/find.php
        document.write("PATHNAME:  " 
                + window.location.pathname + "<br>");
  
        // Prints the protocol used like http: or https:
        document.write("PROTOCOL:  " 
                + window.location.protocol + "<br>");
  
        // Prints hostname with port like localhost:3000
        document.write("HOSTNAME WITH PORT:  " 
                + window.location.host + "<br>");
  
        // Prints port number like 3000
        document.write("PORTNUMBER:  " 
                + window.location.port + "<br>");
    </script>
</body>
  
</html>

Producción:

URL IS: https://ide.geeksforgeeks.org/tryit.php
HOSTNAME: ide.geeksforgeeks.org
PATHNAME: /tryit.php
PROTOCOL: https:
HOSTNAME WITH PORT: ide.geeksforgeeks.org
PORTNUMBER:

Nota: cuando visitas un sitio web específico, siempre está conectado a un puerto. Sin embargo, la mayoría de los navegadores no mostrarán el número de puerto predeterminado.

Ejemplo 2: Asignar o cargar nuevo documento.

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>
        Load another Resource or 
        document from a URL
    </title>
  
    <script>
        function loadPage() {
            window.location.assign(
                "https://ide.geeksforgeeks.org");
        }
    </script>
</head>
  
<body>
    <button type="button" onclick="loadPage();">
        Load Page
    </button>
</body>
  
</html>  

Producción:

  • Antes de hacer clic en el botón:
  • Después de hacer clic en el botón:

Publicación traducida automáticamente

Artículo escrito por singhgaya101 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 *