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

Respostas:

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