Qual é a diferença entre window.location e document.location em JavaScript?

Respostas:

220

De acordo com o W3C, eles são os mesmos. Na realidade, para segurança entre navegadores, você deve usar em window.locationvez de document.location.

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

rahul
fonte
12
Votado. Resposta contraditória. Diz corajosamente que são iguais e depois descreve as diferenças no texto mais claro. Eles não são decididamente iguais.
Danorton
33
Vamos lá, eleitores felizes, acalmem um pouco. Na maioria das vezes, eles se comportam da mesma forma, considerando a caverna especificada por rahul. Não vamos prendê-lo na semântica. Um pouco da Filadélfia, senhores. Eu, por exemplo, achei sua resposta totalmente satisfatória. +1 (Christoph de deve ser a resposta aceita, mas de Rahul é aceitável -. Pelo menos, não é digno de down-voto)
cssyphus
7
-1 por recomendar uma prática recomendada (sempre usando window.location) sem fornecer qualquer justificativa para isso. Se você não fornecer a justificativa, por que alguém deve seguir seu conselho? A resposta de Christoph é muito mais útil nesse sentido.
Mark Amery
+1, mas também veja as respostas de Phil Hamer e Christoph abaixo. Eles adicionam informações básicas e advertências essenciais para entender completamente o problema.
Jon z
Na verdade, percebo uma diferença entre os dois, por exemplo, se você quiser fazer uma navegação para um quadro em área restrita a partir de um quadro filho, poderá fazer isso apenas com document.location, mas não com window.location
M.Abulsoud
207

A maneira canônica de obter o objeto de localização atual é window.location(consulte esta página do MSDN de 1996 e o rascunho do W3C de 2006 ).

Compare isso com document.location, que originalmente retornava apenas o URL atual como uma string (consulte esta página no MSDN ). Provavelmente, para evitar confusão, document.locationfoi substituído por document.URL(consulte aqui no MSDN ), que também faz parte do DOM Nível 1 .

Tanto quanto eu sei, todos os navegadores modernos mapear document.locationpara window.location, mas eu ainda prefiro window.locationcomo é o que eu usei desde que eu escrevi meu primeiro DHTML.

Christoph
fonte
1
se você usar window.location, não é igualmente válido usar apenas location?
commonpike
2
@commonpike É - no contexto de um script em [pelo menos] um documento HTML, o objeto global em que todas as variáveis ​​definidas se tornam propriedades, é o windowobjeto. Portanto, qualquer variável ou função definida no nível superior do seu script é uma propriedade do objeto referenciado por window, que passa a ser o objeto global. Objeto global é implícito quando ausente como window.- assim locationé interpretado como sendo window.location. Advertências - fe if(an_undefined_variable)lançará um erro se a variável não tiver sido definida - if(window.an_undefined_variable)não será.
amn
92

window.location é leitura / gravação em todos os navegadores compatíveis.

O document.location é somente leitura no Internet Explorer (pelo menos), mas lê / grava em navegadores baseados no Gecko (Firefox, SeaMonkey).

Frédéric Hamidi
fonte
10
Não consigo reproduzir a reivindicação que document.locationé somente leitura no IE. Posso atribuir a ele com êxito no IE 10, 9, 8 e 6 (usando VMs da modern.ie ).
Mark Amery
algum comentário sobre console.log(location);? !!
Fr0zenFyr
44

document.locationera originalmente uma propriedade somente leitura, embora os navegadores Gecko permitam que você o atribua também. Para segurança entre navegadores, use em seu window.locationlugar.

Consulte Mais informação:

document.location

window.location

diEcho
fonte
Não consigo encontrar uma resposta clara quando usar qualquer um deles, dê uma olhada na minha resposta abaixo
M.Abulsoud
37

Curiosamente, se você tiver um quadro, imagem ou formulário chamado 'local', 'document.location' fornecerá uma referência à janela, imagem ou formulário do quadro, respectivamente, em vez do objeto Local. Aparentemente, isso ocorre porque a pesquisa de nome da coleção document.forms, document.images e window.frames obtém prioridade sobre o mapeamento para window.location.

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

if (document.location.tagName == 'IMG') alert('Hello!')
Phil Hamer
fonte
2
Não há prioridade, é simplesmente substituído
Pacerier
7
Não, não é substituído. Está sombreado, então Phil está certo sobre o elemento ter precedência durante a resolução da propriedade.
Kangax # 22/13
@ kangax, Parece que você está certo: jsfiddle.net/uL4ysszr . Mas quão confiável é esse comportamento? É suficientemente entre navegadores?
Pacerier 11/11
1
Acabei de testar isso (outubro de 2016). Parece que window.locatione document.locationnão pode ser sombreada no Chrome ou Firefox.
Llama
1
@ Mr.Llama Você está certo. Parece que todos os navegadores modernos não se comportam mais da maneira descrita acima. Parece dever-se a atribuir a document.location o atributo "Unforgeable". Alteração relevante no Chromium: src.chromium.org/viewvc/blink?view=revision&revision=189862 E bug do Firefox: bugzilla.mozilla.org/show_bug.cgi?id=1133760
Phil Hamer
27

Tanto quanto eu sei, ambos são iguais. Para segurança entre navegadores, você pode usar em window.locationvez de document.location.

Todos os navegadores modernos mapear document.locationpara window.location, mas eu ainda prefiro window.locationcomo é o que eu usei desde que eu escrevi minha primeira página web. é mais consistente.

você também pode ver document.location === window.locationretornos true, o que esclarece que ambos são iguais.

AlphaMale
fonte
14

document.location === window.location retorna true

Além disso

document.location.constructor === window.location.constructor é true

Nota: Apenas testado no Firefox 3.6, Opera 10 e IE6

VOCÊS
fonte
1
@Pacerier Por quê? Para objetos ===e ==são equivalentes.
Mark Amery
4
@ MarkAmery, isso está errado e pode ser facilmente demonstrado: "abc" == new String("abc")retorna trueenquanto "abc" === new String("abc")retorna false.
Pacerier
7
@ Pacerier Ok, deixe-me dizer isso de maneira um pouco mais rigorosa e menos ambígua: ao comparar dois objetos um com o outro (em vez de apenas um objeto com qualquer coisa), ==e ===são equivalentes. Veja as seções de especificação 11.9.3 e 11.9.6. Para valores não nulos, não indefinidos, sem número, sem bool e sem seqüência de caracteres com o mesmo tipo, o ==comportamento é governado pela 11.9.3 parte 1f e o ===comportamento pela 11.9.6 parte 7, que lêem idêntico Return truese x e y se referem ao mesmo objeto. Caso contrário, retorne false.
Mark Amery
10
@MarkAmery, Não há garantia de que tanto document.locatione window.locationestão a apontar para objetos. Você está perdendo o ponto inteiro dos triplos iguais; usar 2 iguais não prova que eles são o mesmo objetivo. Devemos usar 3 iguais e não 2 iguais, porque 2 iguais nos darão um falso positivo. Em um navegador no qual document.location é uma string de URL igual a window.location.toString(), Then document.location==window.locationretornará true enquanto document.location===window.locationretornará false.
Pacerier 11/11
@Pacerier Aha - finalmente entendi. Você está certo, pelo menos no que diz respeito à document.location === window.locationcomparação. O fato de a .constructorcomparação ser feita também significa, penso eu, que essa resposta ainda é sólida, mas o uso ===simplificaria o raciocínio.
Mark Amery
11

Sim, eles são iguais. É uma das muitas peculiaridades históricas na API JS do navegador. Tente fazer:

window.location === document.location
Matthew Flaschen
fonte
8

window.location é o mais confiável dos dois, considerando navegadores mais antigos.

Dave Ward
fonte
3

É raro ver a diferença hoje em dia porque o html 5 não suporta mais conjuntos de quadros. Mas no momento em que temos o conjunto de quadros, document.location redirecionaria apenas o quadro no qual o código está sendo executado, e window.location redirecionava a página inteira.

Marquinho Peli
fonte
2

Eu diria que window.locationé a maneira mais confiável de obter o URL atual . A seguir é a diferença entre o window.locatione document.urlque veio em frente em um dos cenários onde eu estava anexando parâmetros de hash no URL e lê-lo mais tarde.

Depois de adicionar parâmetros de hash no URL.

Em um navegador mais antigo, não consegui obter os parâmetros de hash do URL usando document.url, mas quando o usei window.location, consegui obter os parâmetros de hash do URL.

Portanto, é sempre melhor usar window.location.

azhar_salati
fonte
1
-1. A pergunta nem mencionou document.URL- era sobre window.locatione document.location. Além disso, document.urlnão existe = deve estar em maiúsculas.
Mark Amery
2

document.location.constructor === window.location.constructoré true.

É porque é exatamente o mesmo objeto que você pode ver document.location===window.location.

Portanto, não há necessidade de comparar o construtor ou qualquer outra propriedade.

Gene Karasev
fonte
2

Pelo menos no IE, há uma pequena diferença no arquivo local:

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

mas window.location.href retornará "file: /// C: /projects/abc/a.html"

Um é barra invertida, um é barra invertida.

Justin
fonte
2

Bem, sim, eles são iguais, mas ....!

window.location não está funcionando em alguns navegadores do Internet Explorer.

divHelper11
fonte
0

Apesar da maioria das pessoas recomendar aqui, é assim que o protocolo dinâmico do Google Analytics fica há anos (antes de passarem de ga.js para analytics.js recentemente):

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

Mais informações: https://developers.google.com/analytics/devguides/collection/gajs/

Na nova versão, eles usaram '//' para que o navegador possa adicionar automaticamente o protocolo:

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

Portanto, se o Google preferir document.location para window.locationquando eles precisarem de protocolo em JS, acho que eles têm alguns motivos para isso.

GERAL : Pessoalmente, acredito nisso document.locatione window.locationsão os mesmos, mas se for gigante com maiores estatísticas sobre o uso de navegadores como o Google usando document.location , recomendo segui-los.

Kainax
fonte
2
No entanto, não reduzi o voto, poderia ser porque essa é uma pergunta muito antiga e sua resposta não fornece nenhuma evidência nova ou valiosa de que uma seja melhor que a outra. Ou pode ser porque sua resposta sugere o oposto da opinião pública, independentemente do mérito que você dá ao que o Google fez historicamente. Ou pode ser que o downvoter simplesmente não tenha gostado de como você enfatiza partes de sua resposta que realmente não precisam ser enfatizadas. Poderia ser algo realmente. Essa é a beleza do voto anônimo no SO.
21717 M.Babcock
0

Na verdade, percebo uma diferença no cromo entre os dois. Por exemplo, se você quiser fazer uma navegação para um quadro em área restrita a partir de um quadro filho, poderá fazer isso apenas com document.location, mas não com window.location

M.Abulsoud
fonte