Conocimientos básicos necesarios para el front-end: explicación detallada de window.location
Los desarrolladores de front-end deben estar familiarizados con el objeto window.location. A través de él, no solo pueden obtener la información de la dirección de la página actual, sino también modificar ciertos atributos e implementar saltos y actualizaciones de página.
Tomemos una URL común como ejemplo para ver qué propiedades y métodos contiene window.location.
ventana.ubicación significado.origen Dirección base URL, incluido el nombre del protocolo, el nombre de dominio y el número de puerto.protocolo protocolo (http: o https:) .host nombre de dominio + número de puerto.nombre de host nombre de dominio.puerto puerto number.pathname Ruta (que comienza con /) .cadena de consulta de búsqueda, que comienza con ?.hash ancla de página, que comienza con # .href URL completa
Los dos atributos que son más fáciles de confundir son host y nombre de host. La diferencia es que el primero también contiene el número de puerto.
Excepto el origen, que es un atributo de solo lectura, todos los atributos anteriores se pueden modificar. El efecto de la modificación es saltar a la nueva dirección correspondiente.
window.location devuelve un objeto de instancia del tipo Ubicación, que contiene la información de la dirección de la página actual. Se puede acceder a él de las siguientes maneras:
Estas variables son equivalentes porque son variables globales. Sin embargo, se recomienda evitar el uso directo de la variable de ubicación, ya que es fácil de confundir con otras variables locales y causar problemas innecesarios. Por ejemplo:
Se recomienda utilizar window.location para que pueda ver de un vistazo que se utiliza una variable global.
acción window.location
.assign() Navega a la URL especificada .replace() Navega a la URL especificada y elimina el registro de acceso de la página actual. Vuelva a cargar la página actual. toString() devuelve una cadena de URL
.toString() y .href devuelven una URL. ¿Hay alguna diferencia entre ellos? El resultado es el mismo, hay una ligera diferencia en el rendimiento. Se puede ver en los resultados de la prueba de rendimiento en JSPerf que .href es un poco más rápido y la concatenación de cadenas a través de window.location es la más lenta.
.assign() es equivalente a modificar directamente href, entonces, ¿cuál es la diferencia entre ellos y .replace()?
.assign() abandonará el registro de acceso de la página actual mientras salta a la nueva dirección. Al hacer clic en el botón de retorno del navegador, volverá a la página original, mientras que .replace() no la retendrá.
Proceso de ejecución de .assign():
Proceso de ejecución de .replace():
Esta característica es muy importante cuando se utiliza JS para controlar la navegación de la página. No le preste atención, lo que provocará una dirección alternativa de página inesperada.