Quelle est la différence entre window.location et document.location en JavaScript?

Réponses:

220

Selon le W3C, ce sont les mêmes. En réalité, pour la sécurité entre navigateurs, vous devriez utiliser window.locationplutôt que document.location.

Voir: http://www.w3.org/TR/html/browsers.html#dom-location

rahul
la source
12
Voté. Réponse contradictoire. Il dit hardiment qu'ils sont identiques, puis décrit les différences dans un texte plus clair. Ils ne sont décidément pas les mêmes.
danorton
33
Allez déclencher les électeurs, réjouissez-vous un peu. Pour la plupart, ils se comportent de la même manière, EN CONSIDÉRANT LA CAVEAT SPÉCIFIÉE PAR Rahul. Ne le clouons pas sur la sémantique. Un peu de Philadelphie, messieurs. Pour ma part, j'ai trouvé sa réponse pleinement satisfaisante. +1 (Christoph devrait être la réponse acceptée, mais celle de rahul est acceptable - au moins, pas digne d'un vote
négatif
7
-1 pour avoir recommandé une meilleure pratique (toujours en utilisant window.location) sans fournir de justification. Si vous ne fournissez pas de justification, pourquoi devrait-on suivre votre avis? La réponse de Christoph est beaucoup plus utile à cet égard.
Mark Amery
+1 mais aussi voir les réponses de Phil Hamer et Christoph ci-dessous, ils ajoutent des informations de fond essentielles et des mises en garde pour bien comprendre le problème.
Jon z
En fait, je remarque une différence entre les deux. Par exemple, si vous souhaitez naviguer vers un cadre en bac à sable à partir d'un cadre enfant, vous pouvez le faire uniquement avec document.location mais pas avec window.location
M.Abulsoud
207

La manière canonique d'obtenir l'objet de localisation actuel est window.location(voir cette page MSDN de 1996 et le brouillon W3C de 2006 ).

Comparez cela à document.location, qui à l'origine ne renvoyait que l'URL actuelle sous forme de chaîne (voir cette page sur MSDN ). Probablement pour éviter toute confusion, a document.locationété remplacé par document.URL(voir ici sur MSDN ), qui fait également partie du DOM niveau 1 .

Pour autant que je sache, tous les navigateurs modernes correspondent document.locationà window.location, mais je préfère toujours window.locationcar c'est ce que j'ai utilisé depuis que j'ai écrit mon premier DHTML.

Christoph
la source
1
si vous utilisez window.location, n'est-il pas également valable d'utiliser simplement location?
commonpike
2
@commonpike C'est - dans le contexte d'un script dans [au moins] un document HTML, l'objet global où toutes les variables définies deviennent des propriétés, est l' windowobjet. Ainsi, toute variable ou fonction que vous définissez au niveau supérieur de votre script est une propriété de l'objet référencé par window, qui se trouve être l'objet global. L'objet global est sous-entendu lorsqu'il est absent comme window.- locationest donc interprété comme tel window.location. Avertissements - fe générera if(an_undefined_variable)une erreur si la variable n'a pas été définie - if(window.an_undefined_variable)pas.
amn
92

window.location est en lecture / écriture sur tous les navigateurs compatibles.

document.location est en lecture seule dans Internet Explorer (au moins), mais en lecture / écriture dans les navigateurs Gecko (Firefox, SeaMonkey).

Frédéric Hamidi
la source
10
Je ne peux pas reproduire la revendication qui document.locationest en lecture seule dans IE. Je peux lui attribuer avec succès dans IE 10, 9, 8 et 6 (en utilisant des machines virtuelles de modern.ie ).
Mark Amery
des commentaires sur console.log(location);? !!
Fr0zenFyr
44

document.locationétait à l'origine une propriété en lecture seule, bien que les navigateurs Gecko vous permettent également de lui attribuer. Pour la sécurité entre les navigateurs, utilisez window.locationplutôt.

Lire la suite:

document.location

window.location

diEcho
la source
Je ne trouve pas de réponse claire quand utiliser l'un d'entre eux, jetez un œil à ma réponse ci
M.Abulsoud
37

Fait intéressant, si vous avez un cadre, une image ou un formulaire nommé «emplacement», alors «document.location» fournit une référence à la fenêtre, à l'image ou au formulaire du cadre, respectivement, au lieu de l'objet Location. Apparemment, cela est dû au fait que la recherche de nom de collection document.forms, document.images et window.frames est prioritaire sur le mappage vers window.location.

<img name='location' src='location.png'>

if (document.location.tagName == 'IMG') alert('Hello!')
Phil Hamer
la source
2
Il n'y a pas de priorité, elle est simplement écrasée
Pacerier
7
Non, ce n'est pas écrasé. Il est ombragé, donc Phil a raison sur la priorité de l'élément lors de la résolution de la propriété.
kangax
@kangax, on dirait que vous avez raison: jsfiddle.net/uL4ysszr . Mais quelle est la fiabilité de ce comportement? Est-ce suffisamment cross-browser?
Pacerier
1
Je viens de le tester (octobre 2016). Il semble que window.locationet document.locationne peut pas être occulté dans Chrome ou Firefox.
M. Llama
1
@ Mr.Llama Vous avez raison. Il semble que tous les navigateurs modernes ne se comportent plus de la manière que j'ai décrite ci-dessus. Cela semble être dû à l'attribution à l'attribut "Unforgeable" de document.location. Changement de chrome pertinent: src.chromium.org/viewvc/blink?view=revision&revision=189862 et bogue Firefox: bugzilla.mozilla.org/show_bug.cgi?id=1133760
Phil Hamer le
27

Pour autant que je sache, les deux sont identiques. Pour plus de sécurité, vous pouvez utiliser window.locationplutôt que document.location.

Tous les navigateurs modernes correspondent document.locationà window.location, mais je préfère toujours window.locationcar c'est ce que j'ai utilisé depuis que j'ai écrit ma première page Web. c'est plus cohérent.

vous pouvez également voir les document.location === window.locationretours true, ce qui clarifie que les deux sont identiques.

Mâle alpha
la source
14

document.location === window.location Retour true

aussi

document.location.constructor === window.location.constructor est true

Remarque: vient d'être testé sur, Firefox 3.6, Opera 10 et IE6

TU
la source
1
@Pacerier Pourquoi? Pour les objets, ===et ==sont équivalents.
Mark Amery
4
@MarkAmery, c'est faux et peut être facilement démontré: "abc" == new String("abc")retourne truetout "abc" === new String("abc")retourne false.
Pacerier
7
@Pacerier D'accord, permettez-moi de dire que légèrement plus rigoureusement et moins ambiguë: lors de la comparaison de deux objets entre eux (plutôt que juste un objet avec quoi que ce soit), ==et ===sont équivalents. Voir les sections de spécifications 11.9.3 et 11.9.6. Pour les valeurs non nulles, non indéfinies, non numériques, non booléennes et non chaîne de même type, le ==comportement est régi par 11.9.3 partie 1f et le ===comportement par 11.9.6 partie 7, qui lisent de manière identique Retour truesi x et y font référence au même objet. Sinon, revenez false.
Mark Amery
10
@MarkAmery, Il n'y a aucune garantie que les deux document.locationet window.locationpointent vers des objets. Il vous manque tout le point des triples égaux; utiliser 2 égaux ne prouve pas qu'ils sont les mêmes obj. Nous devons utiliser 3 égaux et non 2 égaux car 2 égaux nous donneront un faux positif. Sur un navigateur dans lequel document.location est une chaîne d'URL égale à window.location.toString(), Then document.location==window.locationrenverra true tandis que document.location===window.locationrenverra false.
Pacerier
@Pacerier Aha - Je comprends enfin. Vous avez tout à fait raison, du moins en ce qui concerne la document.location === window.locationcomparaison. Le fait que la .constructorcomparaison soit intégrée signifie aussi, je pense, que cette réponse est toujours valable, mais son utilisation ===simplifierait le raisonnement.
Mark Amery
11

Oui, ils sont pareils. C'est l'une des nombreuses bizarreries historiques de l'API JS du navigateur. Essayez de faire:

window.location === document.location
Matthew Flaschen
la source
8

window.location est le plus fiable des deux, compte tenu des anciens navigateurs.

Dave Ward
la source
3

Il est rare de voir la différence de nos jours car le html 5 ne prend plus en charge les framesets. Mais à l'époque où nous avons le frameset, document.location ne redirigeait que le cadre dans lequel le code est exécuté, et window.location redirigeait la page entière.

Marquinho Peli
la source
2

Je dirais que window.locationc'est le moyen le plus fiable d'obtenir l' URL actuelle . Voici la différence entre le window.locationet document.urlcelui qui est apparu dans l'un des scénarios où j'ajoutais des paramètres de hachage dans l'URL et le lisais plus tard.

Après avoir ajouté des paramètres de hachage dans l'URL.

Dans un navigateur plus ancien, je ne pouvais pas obtenir les paramètres de hachage à partir de l'URL en utilisant document.url, mais quand je l'ai utilisé, window.locationj'ai pu obtenir les paramètres de hachage à partir de l'URL.

Il est donc toujours préférable de l'utiliser window.location.

azhar_salati
la source
1
-1. La question n'a même pas mentionné document.URL- il s'agissait de window.locationet document.location. N'existe document.urlpas non plus = il doit être en majuscule.
Mark Amery
2

document.location.constructor === window.location.constructorest true.

C'est parce que c'est exactement le même objet que vous pouvez voir document.location===window.location.

Il n'est donc pas nécessaire de comparer le constructeur ou toute autre propriété.

Gene Karasev
la source
2

Au moins dans IE, il y a une petite différence sur le fichier local:

document.URL renverra "file: // C: \ projects \ abc \ a.html"

mais window.location.href renverra "file: /// C: /projects/abc/a.html"

L'un est barre oblique inverse, l'autre est barre oblique.

Justin
la source
2

Eh bien oui, ce sont les mêmes, mais ....!

window.location ne fonctionne pas sur certains navigateurs Internet Explorer.

divHelper11
la source
0

Malgré ce que la plupart des gens recommandent ici, voici à quoi ressemblait le protocole dynamique de Google Analytics pour les âges (avant de passer récemment de ga.js à analytics.js):

ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

Plus d'informations: https://developers.google.com/analytics/devguides/collection/gajs/

Dans la nouvelle version, ils ont utilisé '//' pour que le navigateur puisse ajouter automatiquement le protocole:

'//www.google-analytics.com/analytics.js'

Donc, si Google préfère document.location au window.locationmoment où ils ont besoin d'un protocole dans JS, je suppose qu'ils ont des raisons à cela.

GLOBAL : Personnellement, je le crois document.locationet ce window.locationsont les mêmes, mais si c'est le géant avec les plus grandes statistiques sur l'utilisation de navigateurs comme Google utilisant document.location , je recommande de les suivre.

Kainax
la source
2
Je n'ai pas déçu, cependant, cela pourrait être dû au fait qu'il s'agit d'une très vieille question et que votre réponse ne fournit aucune preuve nouvelle ou valable que l'une est meilleure que l'autre. Ou, cela pourrait être parce que votre réponse suggère le contraire de l'opinion publique, quel que soit le mérite que vous accordez à ce que Google a fait historiquement. Ou bien, il se peut que le downvoter n'ait tout simplement pas aimé la façon dont vous mettez l'accent sur les parties de votre réponse qui n'ont pas vraiment besoin d'être soulignées. Ça pourrait être vraiment quelque chose. C'est la beauté du vote anonyme sur SO.
M.Babcock
0

En fait, je remarque une différence de chrome entre les deux. Par exemple, si vous souhaitez naviguer vers un cadre en bac à sable à partir d'un cadre enfant, vous pouvez le faire uniquement avec document.location mais pas avec window.location

M.Abulsoud
la source