В чем разница между window.location и document.location в JavaScript?

Question

Должны ли они оба ссылаться на один и тот же объект?

Answer 1

Согласно W3C, они одинаковы. На самом деле, для кросс-браузерной безопасности, вы должны использовать window.location скорее, чем document.location,

Смотрите: http://www.w3.org/TR/html/browsers.html

Answer 2

Канонический способ получить объект текущего местоположения window.location (см. эту страницу MSDN от 1996 года и черновик W3C от 2006 года).

Сравните это с document.location, который первоначально только возвращал текущий URL в виде строки (см. эту страницу в MSDN). Вероятно, чтобы избежать путаницы, document.location был заменен на document.URL (см. здесь в MSDN), который также является частью DOM Level 1.

Насколько я знаю, все современные браузеры отображают document.location в window.location, но я все еще предпочитаю window.location как то, что я использовал, так как я написал свой первый DHTML.

Answer 3

window.location доступен для чтения / записи во всех совместимых браузерах.

document.location доступен только для чтения в Internet Explorer (по крайней мере), но доступен для чтения / записи в браузерах на основе Gecko (Firefox, SeaMonkey).

Answer 4

document.location Первоначально это было свойство только для чтения, хотя браузеры Gecko также позволяют назначать его. Для кросс-браузерной безопасности используйте window.location вместо.

Прочитайте больше:

document.location

window.location

Answer 5

Интересно, что если у вас есть фрейм, изображение или форма с именем "location", то "document.location" предоставляет ссылку на окно фрейма, изображение или форму соответственно вместо объекта Location. По-видимому, это потому, что поиск имени коллекции document.forms, document.images и window.frames получает приоритет над отображением в window.location.

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

if (document.location.tagName == 'IMG') alert('Hello!')

Answer 6

Насколько я знаю, оба одинаковы. Для кросс-браузерной безопасности вы можете использовать window.location скорее, чем document.location,

Карта всех современных браузеров document.location в window.location, но я все еще предпочитаю window.location как то, что я использовал, так как я написал свою первую веб-страницу. это более последовательно.

Вы также можете увидеть document.location === window.location возвращается true, который уточняет, что оба одинаковы.

Answer 7

document.location === window.location возвращается true

также

document.location.constructor === window.location.constructor является true

Примечание: только что протестировано на Firefox 3.6, Opera 10 и IE6

Answer 8

Да, они одинаковы. Это одна из многих исторических причуд в браузере JS API. Попробуйте сделать:

window.location === document.location

Answer 9

window.location является более надежной последовательностью, учитывая старые браузеры.

Answer 10

В настоящее время редко можно увидеть разницу, потому что html 5 больше не поддерживает наборы фреймов. Но в то время, когда у нас есть набор фреймов, document.location перенаправляет только фрейм, в котором выполняется код, а window.location перенаправляет всю страницу.

Answer 11

Ну да, они одинаковые, но....!

window.location не работает в некоторых браузерах Internet Explorer.

Answer 12

document.location.constructor === window.location.constructor является true,

Это потому, что это точно такой же объект, как вы можете видеть из document.location===window.location,

Так что нет необходимости сравнивать конструктор или любое другое свойство.

Answer 13

По крайней мере, в IE, он имеет небольшую разницу в локальном файле:

document.URL вернет "file://C:\projects\abc\a.html"

но window.location.href вернет "file:///C:/projects/abc/a.html"

Один слеш, другой слеш

Answer 14

Я предпочитаю использовать , хотяlocation, , иwindow.locationвозвращает тот же объект.

Причины использования:

1. Раздел совместимости браузера в window.location упоминает

До Firefox 57 одинарные кавычки, содержащиеся в URL-адресах, экранировались при доступе через URL-API. См. ошибку 1386683.

2. В разделе совместимости браузера document.location упоминается

Полная поддержка.

3. Ссылка на местоположение Mdn используетdocument.locationв своих примерах.

           // location: https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container
   const loc = document.location;
   console.log(loc.href);      // https://developer.mozilla.org:8080/en-US/search?q=URL#search-results-close-container
   console.log(loc.protocol);  // https:
   console.log(loc.host);      // developer.mozilla.org:8080
   console.log(loc.hostname);  // developer.mozilla.org
   console.log(loc.port);      // 8080
   console.log(loc.pathname);  // /en-US/search
   console.log(loc.search);    // ?q=URL
   console.log(loc.hash);      // #search-results-close-container
   console.log(loc.origin);    // https://developer.mozilla.org:8080
   
   location.assign('http://another.site') // load another page
   

Answer 15

tl;dr Они практически всегда одинаковы. Предпочитать window.location.

Шаги получения местоположения объекта Document заключаются в возврате объекта Location соответствующего глобального объекта, если он полностью активен, и нулевого значения в противном случае.

Шаги получения местоположения объекта Window заключаются в возврате этого объекта Location.

https://html.spec.whatwg.org/multipage/nav-history-apis.html#dom-location

Когда они разные? Если документ не полностью активен. Например:

      const iframe = document.createElement("iframe");
document.body.append(iframe);
const { contentDocument, contentWindow } = iframe;
iframe.remove();
contentWindow.location; // not null
contentDocument.location // null

Answer 16

Я бы сказал window.location это более надежный способ получения текущего URL. Ниже приводится разница между window.location а также document.url это появилось в одном из сценариев, где я добавлял параметры хеша в URL и читал его позже.

После добавления хеш-параметров в URL.

В более старом браузере я не смог получить параметры хеша из URL с помощью document.url, но когда я использовал window.location тогда я смог получить параметры хеша из URL.

Так что всегда лучше использовать window.location,

Answer 17

На самом деле я замечаю разницу в Chrome между обоими. Например, если вы хотите выполнить переход к изолированному фрейму из дочернего фрейма, вы можете сделать это только с document.location, но не с window.location

Answer 18

Несмотря на то, что большинство людей рекомендуют здесь, вот как динамический протокол Google Analytics выглядел целую вечность (до того, как они недавно перешли из ga.js в analytics.js):

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

Дополнительная информация: https://developers.google.com/analytics/devguides/collection/gajs/

В новой версии они использовали "//", поэтому браузер может автоматически добавлять протокол:

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

Так что, если Google предпочитает document.location window.location когда им нужен протокол в JS, я думаю, у них есть для этого некоторые причины.

В целом: я лично считаю, что document.location а также window.location те же самые, но если гигант с большой статистикой об использовании браузеров как Google, использующий document.location, я рекомендую следовать за ними.