JavaScript Detectar Pagina

La detección de la página en JavaScript es una técnica útil para personalizar el comportamiento de una aplicación en función de la URL actual. En este tutorial, veremos cómo detectar la página actual y algunos ejemplos prácticos de cómo se puede aplicar la detección de la página en su código.

Detectar la página actual

Para detectar la página actual en JavaScript, podemos utilizar la propiedad location.href. Esta propiedad devuelve la URL actual en la que se encuentra el usuario. Por ejemplo:

var currentPage = window.location.href;
console.log(currentPage);

En este ejemplo, estamos usando la propiedad window.location.href para obtener la URL actual y almacenarla en la variable currentPage. A continuación, imprimimos la URL actual en la consola del navegador utilizando el método console.log().

Ejemplos prácticos

A continuación, veremos algunos ejemplos prácticos de cómo se puede aplicar la detección de la página en su código.

Cambiar la clase del cuerpo según la página actual

En este ejemplo, cambiamos la clase del elemento body según la página actual. Para hacer esto, primero obtenemos la URL actual utilizando la propiedad location.href. A continuación, utilizamos el método indexOf() para buscar una cadena de texto específica en la URL. Si la cadena de texto se encuentra en la URL, entonces agregamos una clase diferente al elemento body. Por ejemplo:

var currentPage = window.location.href;
var body = document.getElementsByTagName('body')[0];

if (currentPage.indexOf('inicio') > -1) {
  body.classList.add('inicio');
} else if (currentPage.indexOf('acerca-de') > -1) {
  body.classList.add('acerca-de');
} else if (currentPage.indexOf('contacto') > -1) {
  body.classList.add('contacto');
}

En este ejemplo, estamos buscando las cadenas de texto "inicio", "acerca-de" y "contacto" en la URL actual utilizando el método indexOf(). Si alguna de estas cadenas de texto se encuentra en la URL, entonces agregamos una clase diferente al elemento body utilizando el método classList.add().

Mostrar un mensaje de bienvenida en la página de inicio

En este ejemplo, mostramos un mensaje de bienvenida en la página de inicio de la aplicación. Para hacer esto, primero obtenemos la URL actual utilizando la propiedad location.href. A continuación, verificamos si la URL actual contiene la cadena de texto "inicio". Si esta cadena de texto se encuentra en la URL, entonces mostramos un mensaje de bienvenida en la página utilizando el método alert(). Por ejemplo:

var currentPage = window.location.href;

if (currentPage.indexOf('inicio') > -1) {
  alert('¡Bienvenido a nuestra página de inicio!');
}

En este ejemplo, estamos verificando si la cadena de texto "inicio" se encuentra en la URL actual utilizando el método indexOf(). Si esta cadena de texto se encuentra en la URL, entonces mostramos un mensaje de bienvenida en la página utilizando el método alert().

Conclusión

En resumen, la detección de la página en JavaScript es una técnica útil para personalizar el comportamiento de una aplicación en función de la URL actual. En este tutorial, hemos visto cómo detectar la página actual utilizando la propiedad location.href y hemos explorado algunos ejemplos prácticos de cómo se puede aplicar la detección de la página en su código. ¡Espero que este tutorial te haya sido útil!