Javascript: definindo location.href versus location

311

Quando você definiria locationuma string de URL versus a configuração location.href?

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

vs

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

Referência de Rede de Desenvolvedores Mozilla

javascript

— quimérico
fonte

6

configuração location.hrefde correio falhar por causa de mesma origem em políticas: javascript.info/tutorial/...

— Taha Jahangir

Além disso, replacee assign: stackoverflow.com/q/1865837/632951 , stackoverflow.com/q/7703689/632951 , stackoverflow.com/q/10302905/632951

— Pacerier

1

Eu tenho um aplicativo Angular 4 que usa o TypeScript 2.6.2. window.location é somente leitura e só posso atribuir usando window.location.href (no contexto de um retorno de chamada de uma assinatura angular), sem que erros do compilador sejam analisados - talvez isso seja algum tipo de compatibilidade com JavaScript 1.0 ou relacionado ao manuseio assíncrono . Basicamente, window.location.href parece ser a única coisa que sempre funciona.

— Chris Halcrow

261

Você pode definir locationdiretamente porque é um pouco mais curto. Se você está tentando ser conciso, geralmente window.também pode omitir o .

As atribuições de URL para ambos location.hrefe locationsão definidas para funcionar no JavaScript 1.0, no Netscape 2, e foram implementadas em todos os navegadores desde então. Então faça a sua escolha e use o que achar mais claro.

— bobince
fonte

9

Como mencionado por @SwissMister na resposta abaixo, parece que window.location.href é um pouco tratado como uma solicitação XHR. Se disparado a partir do retorno de chamada de sucesso de um XHR, window.location.href será tratado como um XHR enquanto window.location emula clicando em um link.

— Akshay Raje

147

Mesmo se ambos funcionassem, eu usaria o último. ~~locationé um objeto, e atribuir uma string a um objeto não é um bom presságio para legibilidade ou manutenção.~~

— psychotik
fonte

60

Ao implementar uma integração complexa do PayPal, encontrei um motivo muito convincente para usar window.location: ele não requerSAME ORIGIN .

— Swiss Mister

4

Talvez seja só eu, mas location = 'http://www.example.com'parece super legível. Embora, como um caso especial. Isso é compatível com versões anteriores e permanecerá compatível no futuro próximo.

— 21715 Alex W

10

Se window.location fosse um objeto, a atribuição de uma cadeia de caracteres a substituiria por uma cadeia de caracteres. De fato, window.location é uma propriedade que possui métodos getter e setter. Quando você o define, uma string é esperada e o objeto Location global é atualizado pelo setter. Quando você o obtém, o objeto Localização global é retornado.

— JukkaP

64

Como já foi dito, ~~locationé um objeto~~ . ~~Mas essa pessoa sugeriu o uso de qualquer um.~~ Mas, você fará melhor para usar a .hrefversão.

Os objetos têm propriedades padrão que, se nada mais for especificado, eles serão assumidos. No caso do locationobjeto, ele tem uma propriedade chamada .href. E, ao não especificar QUALQUER propriedade durante a atribuição, ele assumirá "href" por padrão.

Tudo está bem até que uma versão posterior do modelo de objeto seja alterada e não haja mais uma propriedade padrão ou a propriedade padrão seja alterada. Em seguida, seu programa é interrompido inesperadamente.

~~Se você quer dizer href, você deve especificar href.~~

— Kirby L. Wallace
fonte

13

Boa explicação, melhor do que apenas comentários gerais sobre legibilidade ou manutenção. Na realidade, neste caso particular o modelo de objeto não será alterado, como metade da web pararia - portanto, usar ... não importa qual

— Neromancer

71

Parece bom, mas não é verdade. Não há conceito de uma propriedade padrão no DOM ou JavaScript em geral. A atribuição de uma sequência de caracteres locationfunciona porque a propriedade foi definida para ter esse comportamento de atribuição especial no JavaScript 1.0 e em todos os navegadores desde então. Agora o HTML5 exige. Portanto, embora possa ser mais bonito ou mais consistente atribuir a .href, não há vantagem de compatibilidade com versões anteriores ou anteriores.

— 22912

6

beleza conta.

— Tom Andersen

4

window.location = urlé mais bonito

— Eric Muyser

21

location = urlé mais bonito

— fregante

20

Alguns anos atrás, locationnão funcionou para mim no IE e location.hreffuncionou (e ambos funcionaram em outros navegadores). Desde então, sempre usei location.hrefe nunca mais tive problemas. Não me lembro qual versão do IE era.

— Dovev Hefetz
fonte

42

Provavelmente, era uma versão do IE que fazia coisas erradas e todos os outros navegadores faziam isso corretamente. ;-)

— Shawn D.

9

em strict modecromo irá lançar uma exceção se você tentar atribuir diretamente para locationtambém, então eu sempre usolocation.href

— Hashbrown

9

versão "one" do IE?

— Lpc_dark

@ Shawn D. Um navegador fazendo as coisas corretamente? Quando isso aconteceu! : D

— user2173353

15

Só para esclarecer, você não pode fazer location.split('#'), locationé um objeto, não uma string. Mas você pode fazer location.href.split('#');porque location.hrefé uma string.

— Chadams
fonte

3

Seu comentário é verdadeiro, mas você está falando sobre obter o atributo href, uma string, do objeto de localização. Todas as outras discussões estão tratando de atribuir um valor, não lendo o valor. Mas seu ponto está correto. A diferença é que href é uma string, enquanto location é um objeto.

— Phil DD

15

Uma diferença a ter em mente, no entanto.

Digamos que você queira criar um URL usando o URL atual. O código a seguir o redirecionará, porque não está chamando, String.replacemas Location.replace:

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

Os seguintes códigos funcionam:

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

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

— Gras Double
fonte

3

Com o TypeScript, use window.location.hrefcomo window.locationé tecnicamente um objeto que contém:

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

A configuração window.locationproduzirá um erro de tipo, enquanto window.location.hrefé do tipo string.

Fonte

— Azul
fonte