Javascript: Configuración de location.href versus location

311

¿Cuándo establecerías locationuna cadena URL en lugar de la configuración location.href?

location = "http://www.stackoverflow.com";

vs

location.href = "http://www.stackoverflow.com";

Referencia de la red de desarrolladores de Mozilla

javascript quimérico
fuente
66
la configuración del location.hrefcorreo falla debido a la misma política de origen: javascript.info/tutorial/…
Taha Jahangir
Además, replacey assign: stackoverflow.com/q/1865837/632951 , stackoverflow.com/q/7703689/632951 , stackoverflow.com/q/10302905/632951
Pacerier el
1
Tengo una aplicación Angular 4 que usa TypeScript 2.6.2. window.location es de solo lectura y solo puedo asignar usando window.location.href (en el contexto de una devolución de llamada de una suscripción angular), sin que se generen errores del compilador; tal vez sea una especie de compatibilidad de JavaScript 1.0 o relacionada con el manejo asincrónico . Básicamente, window.location.href parece ser lo único que siempre funciona.
Chris Halcrow

Respuestas:

261

Puede configurar locationdirectamente porque es un poco más corto. Si está tratando de ser conciso, generalmente también puede omitirlo window..

URL asignaciones a la vez location.hrefy locationse definen para el trabajo en JavaScript 1.0, de vuelta en Netscape 2, y se han implementado en todos los navegadores desde entonces. Así que elija y use lo que encuentre más claro.

bobince
fuente
99
Como mencionó @SwissMister en la respuesta a continuación, parece que window.location.href se trata de alguna manera como una solicitud XHR. Si se dispara desde una devolución de llamada exitosa de XHR, window.location.href se tratará como un XHR, mientras que window.location emula hacer clic en un enlace.
Akshay Raje
147

Incluso si ambos funcionan, usaría el último. locationes un objeto, y asignar una cadena a un objeto no es un buen augurio para la legibilidad o el mantenimiento.

psicotik
fuente
6060
Mientras implementaba una integración compleja de PayPal, encontré una razón muy convincente para usar window.location: no requiereSAME ORIGIN .
Señor suizo
44
Tal vez soy solo yo, pero location = 'http://www.example.com'parece súper legible. Aunque, como un caso especial. Eso es compatible con versiones anteriores y seguirá siendo compatible en el futuro previsible.
Alex W
10
Si window.location fuera un objeto, asignarle una cadena lo sobrescribiría con una cadena. De hecho, window.location es una propiedad que tiene métodos getter y setter. Cuando lo configura, se espera una cadena y el colocador actualiza el objeto Ubicación global. Cuando lo obtiene, se devuelve el objeto de ubicación global.
JukkaP
64

Como ya se ha dicho, locationes un objeto . Pero esa persona sugirió usar cualquiera. Pero, será mejor que uses la .hrefversión.

Los objetos tienen propiedades predeterminadas que, si no se especifica nada más, se asumen. En el caso del locationobjeto, tiene una propiedad llamada .href. Y al no especificar CUALQUIER propiedad durante la asignación, asumirá "href" de forma predeterminada.

Esto está muy bien hasta que cambie una versión posterior del modelo de objeto y ya no haya una propiedad predeterminada o la propiedad predeterminada cambie. Entonces su programa se rompe inesperadamente.

Si quiere decir href, debe especificar href.

Kirby L. Wallace
fuente
13
Buena explicación, mejor que solo comentarios generales sobre legibilidad o mantenimiento. En realidad, en este caso particular, el modelo de objetos no se cambiará, ya que la mitad de la red se detendría, por lo tanto, use cualquiera ... no importa cuál
Neromancer
71
Esto suena bien pero no es realmente cierto. No existe un concepto de propiedad predeterminada en DOM o JavaScript en general. La asignación de una cadena locationfunciona porque la propiedad se definió para tener este comportamiento de asignación especial en JavaScript 1.0 y en todos los navegadores desde que lo implementó. HTML5 ahora lo requiere. Entonces, aunque puede ser más bonito o más consistente asignarlo .href, no hay una ventaja de compatibilidad hacia atrás o hacia adelante para hacerlo.
bobince
66
la belleza cuenta.
Tom Andersen
44
window.location = urles más bonita
Eric Muyser
21
location = urles más lindo
fregante
20

Hace un par de años, locationno funcionó para mí en IE y lo location.hrefhizo (y ambos funcionaron en otros navegadores). Desde entonces, siempre lo he usado location.hrefy nunca más tuve problemas. No recuerdo qué versión de IE era esa.

Dovev Hefetz
fuente
42
Probablemente fue esa una versión de IE donde hizo cosas mal y cualquier otro navegador lo hizo correctamente. ;-)
Shawn D.
99
en strict modeChrome arrojará una excepción si intentas asignar directamente locationtambién, así que siempre usolocation.href
Hashbrown
99
"una" versión de IE?
Lpc_dark
@ Shawn D. ¿Un navegador haciendo las cosas correctamente? ¡Cuando pasó eso! : D
user2173353
15

Solo para aclarar, no se puede hacer location.split('#'), locationes un objeto, no una cadena. Pero puedes hacerlo location.href.split('#');porque location.hrefes una cadena.

Chadams
fuente
3
Su comentario es verdadero, pero está hablando de obtener el atributo href, una cadena, del objeto de ubicación. Todas las otras discusiones tratan de asignar un valor, no leer el valor. Pero tu punto es correcto. La diferencia es que href es una cadena mientras que la ubicación es un objeto.
Phil DD
15

Sin embargo, hay una diferencia a tener en cuenta.

Supongamos que desea crear alguna URL utilizando la URL actual. De hecho, el siguiente código lo redireccionará, porque no está llamando String.replacepero Location.replace:

nextUrl = window.location.replace('/step1', '/step2');

Los siguientes códigos funcionan:

// cast to string
nextUrl = (window.location+'').replace('/step1', '/step2');

// href property
nextUrl = window.location.href.replace('/step1', '/step2');
Gras Double
fuente
3

Con TypeScript, use window.location.hrefcomo window.locationes técnicamente un objeto que contiene:

Properties
hash 
host 
hostname
href    <--- you need this
pathname (relative to the host)
port 
protocol 
search

La configuración window.locationproducirá un error de tipo, mientras que window.location.hrefes de tipo cadena.

Fuente

Azul
fuente