В чем разница между document.location.href
и document.location
?
В браузерах он одинаковый?
В чем разница между document.location.href
и document.location
?
В браузерах он одинаковый?
document.location
является синонимом window.location
, который устарел почти столько же, сколько существовал JavaScript. Не используйте его.
location
- это структурированный объект со свойствами, соответствующими частям URL. location.href
- это весь URL-адрес в одной строке. Назначение строки для любого из них определяется для того, чтобы вызвать такую же навигацию, так что сделайте выбор.
(Я считаю, что запись в location.href= something
должна быть немного лучше, поскольку она немного более ясна в том, что она делает. Обычно вы хотели бы избежать просто location= something
, поскольку он выглядит ошибочно, как назначение переменной. window.location= something
отлично хотя.)
document.location
- это объект, который содержит свойства для текущего местоположения.
Свойство href
является одним из этих свойств, содержащим полный URL-адрес, т.е. все остальные свойства, сложенные вместе.
Некоторые браузеры позволяют назначить URL-адрес объекту location
и действуют так, как если бы вы назначили его свойству href
. Некоторые другие браузеры более придирчивы и требуют использования свойства href
. Таким образом, чтобы код работал во всех браузерах, вы должны использовать свойство href
.
Оба объекта window
и document
имеют объект location
. Вы можете установить URL-адрес, используя window.location.href
или document.location.href
. Однако логически объект document.location
должен быть доступен только для чтения (поскольку вы не можете изменить URL-документ документа, изменение URL-адреса загружает новый документ), поэтому, чтобы быть в безопасности, вы должны использовать window.location.href
, когда вы хотите установить URL-адрес.
typeof document.location; // 'object'
typeof document.location.href; // 'string'
Свойство href
- это строка, а document.location
- это объект.
document.location устарел в пользу window.location, к которому можно получить доступ только по месту, поскольку это глобальный объект.
Объект местоположения имеет несколько свойств и методов. Если вы попытаетесь использовать его как строку, то он будет действовать как location.href.
document.location
- это объект, а document.location.href
- строка. Но первый имеет метод toString
, поэтому вы можете читать его, как если бы это была строка, и получить то же значение, что и document.location.href
.
В некоторых браузерах - самых современных, я думаю - вы также можете назначить document.location
, как если бы это была строка. Согласно документации Mozilla, для этой цели лучше использовать window.location
, поскольку document.location
изначально был доступен только для чтения, и поэтому может не будет столь широко поддерживаться.
По состоянию на 14 июня 2013 года (HTML5) существует значительная разница
Browser : Chrome 27.X.X
Ссылки: document.location, window.location (MDN)
type: Object
Объект, который сам по себе вызывает document.location
, возвращает его свойства origin
+ pathname
.
Чтобы получить только URL-адрес в виде строки, можно использовать свойство document.URL
только для чтения.
ancestorOrigins: DOMStringList
assign: function () { [native code] }
hash: ""
host: "stackoverflow.com"
hostname: "stackoverflow.com"
href: "http://stackoverflow.com/questions/2652816/what-is-the-difference-between-document-location-href-and-document-location?rq=1"
origin: "http://stackoverflow.com"
pathname: "/questions/2652816/what-is-the-difference-between-document-location-href-and-document-location"
port: ""
protocol: "http:"
reload: function () { [native code] }
replace: function () { [native code] }
search: "?rq=1"
toString: function toString() { [native code] }
valueOf: function valueOf() { [native code] }
type: string
http://stackoverflow.com/questions/2652816/what-is-the-difference-between-document-location-href-and-document-location?rq=1
Вот пример практической значимости разницы и того, как она может вас укусить, если вы этого не осознаете (document.location - объект, а document.location.href - строка):
Мы используем MonoX Social CMS (http://mono-software.com) бесплатную версию на http://social.ClipFlair.net, и мы хотели добавить языковой бар WebPart на некоторых страницах, чтобы локализовать их, но у некоторых других (например, на обсуждениях) мы не хотели использовать локализацию. Таким образом, мы сделали две главные страницы для использования на всех наших страницах .aspx(ASP.net), в первом из которых у нас был языковой бар WebPart, а у другого был следующий script, чтобы удалить /lng/el -GR и т.д.. из URL-адресов и покажите язык по умолчанию (английский в нашем случае) вместо этих страниц
<script>
var curAddr = document.location; //MISTAKE
var newAddr = curAddr.replace(new RegExp("/lng/[a-z]{2}-[A-Z]{2}", "gi"), "");
if (curAddr != newAddr)
document.location = newAddr;
</script>
Но этот код не работает, функция replace просто возвращает Undefined (без исключения), поэтому он пытается перейти к утверждению x/lng/el-GR/undefined вместо перехода к URL-адресу x. Проверяя его с помощью отладчика Mozilla Firefox (клавиша F12) и перемещая курсор над переменной curAddr, он показывал много информации вместо некоторого простого строкового значения для URL-адреса. Выбрав Watch из этого всплывающего окна, которое вы могли видеть в панели часов, он писал "Location → ..." вместо "..." для URL-адреса. Это заставило меня понять, что это объект
Можно было бы ожидать замены, чтобы выбросить исключение или что-то в этом роде, но теперь, когда я думаю об этом, проблема заключалась в том, что он пытался вызвать какой-то несуществующий метод "replace" на объекте URL, который, кажется, просто возвращает ", undefined" в Javascript.
В этом случае правильный код:
<script>
var curAddr = document.location.href; //CORRECT
var newAddr = curAddr.replace(new RegExp("/lng/[a-z]{2}-[A-Z]{2}", "gi"), "");
if (curAddr != newAddr)
document.location = newAddr;
</script>