Javascript: définition de location.href par rapport à location

311

Quand définiriez-vous locationune chaîne URL par rapport à un paramètre location.href?

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

contre

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

Référence du réseau de développeurs Mozilla

javascript

— chimérique
source

6

la configuration de la location.hrefmessagerie échoue en raison de la même politique d'origine: javascript.info/tutorial/…

— Taha Jahangir

Aussi, replaceet assign: stackoverflow.com/q/1865837/632951 , stackoverflow.com/q/7703689/632951 , stackoverflow.com/q/10302905/632951

— Pacerier

1

J'ai une application Angular 4 qui utilise TypeScript 2.6.2. window.location est en lecture seule et je ne peux l'affecter qu'à l'aide de window.location.href (dans le contexte d'un rappel à partir d'un abonnement angulaire), sans que les erreurs du compilateur soient réactivées - c'est peut-être une sorte de compatibilité JavaScript 1.0 ou liée à la gestion asynchrone . Fondamentalement, window.location.href semble être la seule chose qui fonctionne toujours.

— Chris Halcrow

262

Vous pouvez définir locationdirectement car il est légèrement plus court. Si vous essayez d'être concis, vous pouvez généralement omettre le window.trop.

Les affectations d'URL aux deux location.hrefet locationsont définies pour fonctionner dans JavaScript 1.0, de retour dans Netscape 2, et ont été implémentées dans tous les navigateurs depuis. Faites donc votre choix et utilisez ce que vous trouvez le plus clair.

— bobince
source

10

Comme mentionné par @SwissMister dans la réponse ci-dessous, il semble que window.location.href soit quelque peu traité comme une requête XHR. S'il est déclenché depuis le rappel de réussite d'un XHR, window.location.href sera traité comme un XHR tandis que window.location émule en cliquant sur un lien.

— Akshay Raje

147

Même si les deux fonctionnent, j'utiliserais ce dernier. ~~locationest un objet, et l'attribution d'une chaîne à un objet n'augure rien de bon pour la lisibilité ou la maintenance.~~

— psychotik
source

61

Lors de la mise en œuvre d'une intégration PayPal complexe, j'ai rencontré une raison très convaincante d'utiliser window.location: cela ne nécessite pasSAME ORIGIN .

— Swiss Mister

4

C'est peut-être juste moi mais ça location = 'http://www.example.com'semble super lisible. Quoique, comme cas particulier. Cela est rétrocompatible et restera compatible dans un avenir prévisible.

— Alex W

10

Si window.location était un objet, lui affecter une chaîne le remplacerait par une chaîne. En fait window.location est une propriété qui a des méthodes getter et setter. Lorsque vous le définissez, une chaîne est attendue et l'objet Location global est mis à jour par le setter. Lorsque vous l'obtenez, l'objet Location global est renvoyé.

— JukkaP

64

Comme cela a déjà été dit, ~~locationest un objet~~ . ~~Mais cette personne a suggéré d'utiliser l'un ou l'autre.~~ Mais vous ferez mieux d'utiliser la .hrefversion.

Les objets ont des propriétés par défaut qui, si rien d'autre n'est spécifié, sont supposées. Dans le cas de l' locationobjet, il possède une propriété appelée .href. Et en ne spécifiant AUCUNE propriété lors de l'affectation, elle prendra par défaut "href".

C'est très bien jusqu'à ce qu'une version de modèle d'objet ultérieure change et qu'il n'y ait plus de propriété par défaut, ou que la propriété par défaut soit modifiée. Ensuite, votre programme s'arrête de façon inattendue.

~~Si vous voulez dire href, vous devez préciser href.~~

— Kirby L. Wallace
source

13

Bonne explication, mieux que de simples commentaires généraux sur la lisibilité ou la maintenance. En réalité, dans ce cas particulier, le modèle d'objet ne sera pas modifié, car la moitié du Web s'arrêterait - utilisez donc l'un ou l'autre ... peu importe

— Neromancer

71

Cela semble bien, mais ce n'est pas vraiment vrai. Il n'y a pas de concept de propriété par défaut dans le DOM ou JavaScript en général. L'affectation d'une chaîne à locationWorks parce que la propriété a été définie pour que ce comportement d'affectation spécial revienne dans JavaScript 1.0 et tous les navigateurs depuis l'ont implémenté. HTML5 l'exige désormais. Ainsi, même s'il peut être plus joli ou plus cohérent de l'attribuer .href, il n'y a aucun avantage de compatibilité ascendante ou descendante à le faire.

— bobince

6

la beauté compte.

— Tom Andersen

4

window.location = urlest plus jolie

— Eric Muyser

21

location = urlest plus mignon

— fregante

20

Il y a quelques années, locationne fonctionnait pas pour moi dans IE et fonctionnait location.href(et les deux fonctionnaient dans d'autres navigateurs). Depuis lors, j'ai toujours juste utilisé location.hrefet n'ai plus jamais eu de problème. Je ne me souviens pas quelle version d'IE c'était.

— Dovev Hefetz
source

42

C'était probablement cette version d'IE où il fonctionnait mal et tous les autres navigateurs le faisaient correctement. ;-)

— Shawn D.

9

en strict modechrome lèvera une exception si vous essayez d'affecter directement à locationtrop, donc j'utilise toujourslocation.href

— Hashbrown

9

"une" version d'IE?

— Lpc_dark

@Shawn D. Un navigateur qui fait les choses correctement? Quand est-ce arrivé! : D

— user2173353

15

Juste pour clarifier, vous ne pouvez pas faire location.split('#'), locationc'est un objet, pas une chaîne. Mais vous pouvez le faire location.href.split('#');car location.hrefc'est une chaîne.

— Chadams
source

3

Votre commentaire est vrai, mais vous parlez d' obtenir l'attribut href, une chaîne, de l'objet de localisation. Toutes les autres discussions portent sur l' attribution d' une valeur et non sur la lecture de la valeur. Mais votre point est correct. La différence est que href est une chaîne alors que location est un objet.

— Phil DD

15

Une différence à garder à l'esprit, cependant.

Supposons que vous souhaitiez créer une URL à l'aide de l'URL actuelle. Le code suivant vous redirigera en fait, car il n'appelle pas String.replacemais Location.replace:

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

Les codes suivants fonctionnent:

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

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

— Gras Double
source

3

Avec TypeScript, utilisez window.location.hreftel quel window.locationtechniquement un objet contenant:

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

Le réglage window.locationproduira une erreur de type, alors qu'il window.location.hrefest de type chaîne.

La source

— Bleu
source