¿Cuál es la diferencia entre document.location.href y document.location?

¿Cuál es la diferencia entre document.location.href y document.location ?

¿Es lo mismo en todos los browseres?

document.location es un sinónimo de window.location que ha quedado en desuso durante el time que JavaScript ha existido. No lo uses

location es un object estructurado, con properties correspondientes a las partes de la URL. location.href es la URL completa en una sola cadena. La asignación de una cadena a cualquiera de ellos se define para causar el mismo tipo de navigation, así que elija su elección.

(Considero que escribir a location.href= something es marginalmente mejor, ya que es un poco más explícito sobre lo que está haciendo. En general, querría evitar simplemente la location= something ya que se ve engañosamente como una asignación variable. window.location= something is bien, bien)

El document.location es un object que contiene properties para la location actual.

La propiedad href es una de estas properties, que contiene la URL completa, es decir, todas las demás properties juntas.

Algunos browseres le permiten asignar una URL al object de location y actúa como si lo hubiera asignado a la propiedad href . Algunos otros browseres son más exigentes y requieren que uses la propiedad href . Por lo tanto, para que el código funcione en todos los browseres, debe usar la propiedad href .

Tanto la window como los objects del document tienen un object de location . Puede configurar la URL usando window.location.href o document.location.href . Sin embargo, lógicamente el object document.location debe ser de solo lectura (ya que no puede cambiar la URL de un documento, cambiar la URL carga un documento nuevo), por lo que debe estar seguro de que debe usar window.location.href cuando quieras establecer la URL.

 typeof document.location; // 'object' typeof document.location.href; // 'string' 

La propiedad href es una cadena, mientras que document.location es un object.

document.location está en desuso en favor de window.location, que se puede acceder solo por location, ya que es un object global.

El object de location tiene múltiples properties y methods. Si intenta usarlo como una cadena, entonces actúa como location.href.

document.location es un object, mientras que document.location.href es una cadena. Pero el primero tiene un método toString , por lo que puede leer de él como si fuera una cadena y get el mismo valor que document.location.href .

En algunos browseres, la mayoría de los modernos, creo, también se puede asignar a document.location como si fuera una cadena. Sin embargo, de acuerdo con la documentation de Mozilla , es mejor utilizar window.location para este fin, ya que document.location era originalmente de solo lectura y, por lo tanto, no es tan ampliamente compatible.

A partir del 14 de junio de 2013 ( HTML5 ), hay una diferencia significativa

Browser : Chrome 27.XX

Referencias: document.location , window.location ( MDN )


document.location

type: Object

El object cuando se llama por sí mismo document.location devuelve sus properties de origin + pathname concatenadas.

Para recuperar solo la URL como una cadena, se puede usar la propiedad document.URL solo lectura.

 ancestorOrigins: DOMStringList assign: function () { [native code] } hash: "" host: "stackoverflow.com" hostname: "stackoverflow.com" href: "http://stackoverflow.com/questions/2652816/what-is-the-difference-between-document-location-href-and-document-location?rq=1" origin: "http://stackoverflow.com" pathname: "/questions/2652816/what-is-the-difference-between-document-location-href-and-document-location" port: "" protocol: "http:" reload: function () { [native code] } replace: function () { [native code] } search: "?rq=1" toString: function toString() { [native code] } valueOf: function valueOf() { [native code] } 

document.location.href

type: string

 http://stackoverflow.com/questions/2652816/what-is-the-difference-between-document-location-href-and-document-location?rq=1 

Aquí hay un ejemplo de la importancia práctica de la diferencia y de cómo puede morderte si no te das count (document.location es un object y document.location.href es una cadena):

Usamos la versión gratuita de MonoX Social CMS ( http://mono-software.com ) en http://social.ClipFlair.net y queríamos agregar la barra de idiomas WebPart en algunas páginas para localizarlas, pero en algunas otras (por ejemplo, en las discusiones) no queríamos usar la localización. Así que hicimos dos páginas maestras para usar en todas nuestras páginas .aspx (ASP.net), en la primera teníamos la barra de idiomas WebPart y la otra tenía la siguiente secuencia de commands para eliminar el / lng / el-GR etc. de las URL y mostrar el idioma pnetworkingeterminado (inglés en nuestro caso) en lugar de esas páginas

 <script> var curAddr = document.location; //MISTAKE var newAddr = curAddr.replace(new RegExp("/lng/[az]{2}-[AZ]{2}", "gi"), ""); if (curAddr != newAddr) document.location = newAddr; </script> 

Pero este código no funciona, la function de reemploop solo devuelve No definido (no se lanza ninguna exception) por lo que intenta navegar para decir x / lng / el-GR / indefinido en lugar de ir a url x. Comprobándolo con el depurador de Mozilla Firefox (tecla F12) y moviendo el cursor sobre la variable curAddr estaba mostrando mucha información en lugar de un valor de cadena simple para la URL. Al seleccionar Ver desde esa window emergente, se podía ver en el panel del reloj que estaba escribiendo "Ubicación -> …" en lugar de "…" para la url. Eso me hizo darme count de que era un object

Uno hubiera esperado replace para arrojar una exception o algo, pero ahora que lo pienso, el problema fue que estaba tratando de llamar a un método de "reemploop" que no existe en el object URL que parece devolver "indefinido" en Javascript.

El código correcto en ese caso es:

 <script> var curAddr = document.location.href; //CORRECT var newAddr = curAddr.replace(new RegExp("/lng/[az]{2}-[AZ]{2}", "gi"), ""); if (curAddr != newAddr) document.location = newAddr; </script>