Quelle est la différence entre document.location.href et document.location?

Quelle est la différence entre document.location.href et document.location ?

Est-ce la même chose dans les navigateurs?

document.location est un synonyme de window.location qui a été obsolète pendant presque autant que JavaScript existe. Ne l'utilisez pas.

location est un objet structuré, avec des propriétés correspondant aux parties de l'URL. location.href est l'URL entière dans une seule chaîne. L'affectation d'une chaîne à l'une ou l'autre est définie pour provoquer le même type de navigation, alors choisissez.

(Je considère l'écriture à l' location.href= something à améliorer légèrement, car il est légèrement plus explicite sur ce qu'il fait. Vous voudriez généralement éviter simplement l' location= something car il semble en erreur comme une affectation variable. window.location= something est Bien cependant.)

Le document.location est un objet qui contient des propriétés pour l'emplacement actuel.

La propriété href est l'une de ces propriétés, contenant l'URL complète, c'est-à-dire toutes les autres propriétés mises en place.

Certains navigateurs vous permettent d'attribuer une URL à l'objet de location et agit comme si vous l'aviez assigné à la propriété href . Certains autres navigateurs sont plus difficiles et vous obligent à utiliser la propriété href . Ainsi, pour que le code fonctionne dans tous les navigateurs, vous devez utiliser la propriété href .

Les objets de window et de document ont un objet de location . Vous pouvez définir l'URL à l'aide de window.location.href ou document.location.href . Cependant, logiquement, l'objet document.location doit être en lecture seule (car vous ne pouvez pas modifier l'URL d'un document, changer l'URL charge un nouveau document), afin d'être sur le bon côté, vous devez plutôt utiliser window.location.href lorsque vous souhaitez définir l'URL.

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

La propriété href est une chaîne, tandis que document.location elle-même est un objet.

Document.location est obsolète en faveur de window.location, accessible par une simple localisation, car c'est un objet global.

L'objet de localisation a plusieurs propriétés et méthodes. Si vous essayez de l'utiliser en tant que chaîne, cela fonctionne comme location.href.

document.location est un objet, tandis que document.location.href est une chaîne. Mais le premier a une méthode toString , afin que vous puissiez lire comme si c'était une chaîne et obtenir la même valeur que document.location.href .

Dans certains navigateurs – les plus modernes, je pense – vous pouvez également affecter à document.location comme si c'était une chaîne. Cependant, selon la documentation de Mozilla , il est préférable d'utiliser window.location à cet effet, car document.location était à l'origine uniquement en lecture seule et ne peut donc pas être aussi largement pris en charge.

Du 14 juin 2013 ( HTML5 ), il existe une différence significative

Browser : Chrome 27.XX

Références: document.location , window.location ( MDN )


Document.location

type: Object

L'objet lorsqu'il est appelé par lui-même document.location renvoie ses propriétés de pathname + pathname concaténées.

Pour récupérer uniquement l'URL en tant que chaîne, la propriété document.URL lecture seule peut être utilisée.

 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 

Voici un exemple de la signification pratique de la différence et de la façon dont elle peut vous mordre si vous ne la réalisez pas (document.location étant un objet et document.location.href étant une chaîne):

Nous utilisons la version gratuite MonoX Social CMS ( http://mono-software.com ) à l' adresse http://social.ClipFlair.net et nous voulions ajouter le WebPart de la barre de langue à certaines pages pour les localiser, mais à d'autres (p. Ex. Lors des discussions), nous ne voulions pas utiliser la localisation. Donc, nous avons fait deux pages principales à utiliser à toutes nos pages .aspx (ASP.net), dans la première, nous avions la barre de langue WebPart et l'autre avait le script suivant pour supprimer le / lng / el-GR etc. Les URL et afficher la langue par défaut (anglais dans notre cas) à la place de ces pages

 <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> 

Mais ce code ne fonctionne pas, la fonction de remplissage retourne juste Undefined (pas d'exception lancée) afin d'essayer de naviguer pour dire x / lng / el-GR / indefin au lieu d'aller à url x. En le vérifiant avec le débogueur Mozilla Firefox (clé F12) et en déplaçant le curseur sur la variable curAddr, il affiche beaucoup d'informations au lieu d'une valeur de chaîne simple pour l'URL. En sélectionnant Regarder à partir de cette fenêtre contextuelle, vous voyez dans le volet de surveillance qu'il s'agissait d'un «Emplacement -> …» au lieu de «…» pour l'URL. Cela m'a fait comprendre que c'était un objet

On aurait prévu de remplacer pour lancer une exception ou quelque chose, mais maintenant, je pense que le problème était qu'il essayait d'appeler une méthode de «remplacement» inexistante sur l'objet URL qui semble simplement rendre "indéfinis" dans Javascript.

Le code correct dans ce cas est:

 <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>