Как изменить window location - Исправление ошибок и поиск оптимальных решений проблем

Свойство только для чтения Window.location возвращает объект Location с информацией о текущем расположении документа.

Хотя Window.location представляет собой объект только для чтения Location, вы можете присвоить ему DOMString. Это значит что в большинстве случаев вы можете работать с location как со строкой: location = 'http://www.example.com' это синоним для location.href = 'http://www.example.com'.

Синтаксис

var oldLocation = location;
location = newLocation;

Примеры

Базовый пример

alert(location); // выведет сообщение "https://developer.mozilla.org/en-US/docs/Web/API/Window.location"

Пример №1: Переход на новую страницу

Каждый раз, когда объекту location присвоено новое значение, документ будет загружен используя URL как если бы был вызван location.assign() с изменённым URL. Отметим, что настройки безопасности, подобные CORS, могут препятствовать этому эффекту.

location.assign("http://www.mozilla.org"); // или
location = "http://www.mozilla.org";

Пример №2: Принудительная перезагрузка текущей страницы с сервера

Пример №3

Рассмотрим следующий пример, который будет перезагружать страницу используя метод replace() (en-US) для вставки значения location.pathname в хэш:

function reloadPageWithHash() {
  var initialPage = location.pathname;
  location.replace('http://example.com/#' + initialPage);
}

Примечание: Пример выше работает в ситуациях, когда нет необходимости сохранять (оставлять) location.hash. Между тем, в Gecko-based браузерах, установка location.pathname таким образом будет очищать любую информацию в location.hash, в то время как в WebKit (и возможно в других браузерах), установка pathname не изменяет hash. Если вам необходимо изменить pathname но сохранить hash как есть, используйте метод replace(), который должен работать одинаково во всех браузерах.

Пример №4: Отображение свойств текущего URL в диалоге alert

function showLoc() {
  var oLocation = location, aLog = ["Property (Typeof): Value", "location (" + (typeof oLocation) + "): " + oLocation ];
  for (var sProp in oLocation){
    aLog.push(sProp + " (" + (typeof oLocation[sProp]) + "): " +  (oLocation[sProp] || "n/a"));
  }
  alert(aLog.join("n"));
}

// в html: <button onclick="showLoc();">Показать свойства location</button>

Пример №5: Отправка строки данных на сервер через изменение свойства search

function sendData (sData) {
  location.search = sData;
}

// в html: <button onclick="sendData('Some data');">Отправить данные</button>

Текущий URL с добавлением «?Some%20data» отправляется на сервер (если сервером не предпринимается никаких действий, то текущий документ перезагружается за счёт изменения строки search).

Пример №6: Использование закладок без изменения свойства hash

<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>MDN Example</title>
<script>
function showNode (oNode) {
  var nLeft = 0, nTop = 0;
  for (var oItNode = oNode; oItNode; nLeft += oItNode.offsetLeft, nTop += oItNode.offsetTop, oItNode = oItNode.offsetParent);
  document.documentElement.scrollTop = nTop;
  document.documentElement.scrollLeft = nLeft;
}

function showBookmark (sBookmark, bUseHash) {
  if (arguments.length === 1 || bUseHash) { location.hash = sBookmark; return; }
  var oBookmark = document.querySelector(sBookmark);
  if (oBookmark) { showNode(oBookmark); }
}
</script>
<style>
span.intLink {
    cursor: pointer;
    color: #0000ff;
    text-decoration: underline;
}
</style>
</head>

<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in placerat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor. Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla consectetur aliquam purus. Curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.</p>
<p>Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibendum quis. Cras adipiscing ultricies fermentum. Praesent bibendum condimentum feugiat.</p>
<p id="myBookmark1">[&nbsp;<span class="intLink" onclick="showBookmark('#myBookmark2');">Go to bookmark #2</span>&nbsp;]</p>
<p>Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt tincidunt. Nulla vitae tempor nisl. Etiam congue, elit vitae egestas mollis, ipsum nisi malesuada turpis, a volutpat arcu arcu id risus.</p>
<p>Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.</p>
<p>Aenean viverra varius mauris, sed elementum lacus interdum non. Phasellus sit amet lectus vitae eros egestas pellentesque fermentum eget magna. Quisque mauris nisl, gravida vitae placerat et, condimentum id metus. Nulla eu est dictum dolor pulvinar volutpat. Pellentesque vitae sollicitudin nunc. Donec neque magna, lobortis id egestas nec, sodales quis lectus. Fusce cursus sollicitudin porta. Suspendisse ut tortor in mauris tincidunt rhoncus. Maecenas tincidunt fermentum facilisis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Suspendisse turpis nisl, consectetur in lacinia ut, ornare vel mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non lectus eu turpis vulputate cursus. Mauris interdum tincidunt erat id pharetra. Nullam in libero elit, sed consequat lectus. Morbi odio nisi, porta vitae molestie ut, gravida ut nunc. Ut non est dui, id ullamcorper orci. Praesent vel elementum felis. Maecenas ornare, dui quis auctor hendrerit, turpis sem ullamcorper odio, in auctor magna metus quis leo. Morbi at odio ante.</p>
<p>Curabitur est ipsum, porta ac viverra faucibus, eleifend sed eros. In sit amet vehicula tortor. Vestibulum viverra pellentesque erat a elementum. Integer commodo ultricies lorem, eget tincidunt risus viverra et. In enim turpis, porttitor ac ornare et, suscipit sit amet nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque vel ultrices nibh. Sed commodo aliquam aliquam. Nulla euismod, odio ut eleifend mollis, nisi dui gravida nibh, vitae laoreet turpis purus id ipsum. Donec convallis, velit non scelerisque bibendum, diam nulla auctor nunc, vel dictum risus ipsum sit amet est. Praesent ut nibh sit amet nibh congue pulvinar. Suspendisse dictum porttitor tempor.</p>
<p>Vestibulum dignissim erat vitae lectus auctor ac bibendum eros semper. Integer aliquet, leo non ornare faucibus, risus arcu tristique dolor, a aliquet massa mauris quis arcu. In porttitor, lectus ac semper egestas, ligula magna laoreet libero, eu commodo mauris odio id ante. In hac habitasse platea dictumst. In pretium erat diam, nec consequat eros. Praesent augue mi, consequat sed porttitor at, volutpat vitae eros. Sed pretium pharetra dapibus. Donec auctor interdum erat, lacinia molestie nibh commodo ut. Maecenas vestibulum vulputate felis, ut ullamcorper arcu faucibus in. Curabitur id arcu est. In semper mollis lorem at pellentesque. Sed lectus nisl, vestibulum id scelerisque eu, feugiat et tortor. Pellentesque porttitor facilisis ultricies.</p>
<p id="myBookmark2">[&nbsp;<span class="intLink" onclick="showBookmark('#myBookmark1');">Go to bookmark #1</span> | <span class="intLink" onclick="showBookmark('#myBookmark1', false);">Go to bookmark #1 without using location.hash</span> | <span class="intLink" onclick="showBookmark('#myBookmark3');">Go to bookmark #3</span>&nbsp;]</p>
<p>Phasellus tempus fringilla nunc, eget sagittis orci molestie vel. Nulla sollicitudin diam non quam iaculis ac porta justo venenatis. Quisque tellus urna, molestie vitae egestas sit amet, suscipit sed sem. Quisque nec lorem eu velit faucibus tristique ut ut dolor. Cras eu tortor ut libero placerat venenatis ut ut massa. Sed quis libero augue, et consequat libero. Morbi rutrum augue sed turpis elementum sed luctus nisl molestie. Aenean vitae purus risus, a semper nisl. Pellentesque malesuada, est id sagittis consequat, libero mauris tincidunt tellus, eu sagittis arcu purus rutrum eros. Quisque eget eleifend mi. Duis pharetra mi ac eros mattis lacinia rutrum ipsum varius.</p>
<p>Fusce cursus pulvinar aliquam. Duis justo enim, ornare vitae elementum sed, porta a quam. Aliquam eu enim eu libero mollis tempus. Morbi ornare aliquam posuere. Proin faucibus luctus libero, sed ultrices lorem sagittis et. Vestibulum malesuada, ante nec molestie vehicula, quam diam mollis ipsum, rhoncus posuere mauris lectus in eros. Nullam feugiat ultrices augue, ac sodales sem mollis in.</p>
<p id="myBookmark3"><em>Here is the bookmark #3</em></p>
<p>Proin vitae sem non lorem pellentesque molestie. Nam tempus massa et turpis placerat sit amet sollicitudin orci sodales. Pellentesque enim enim, sagittis a lobortis ut, tempus sed arcu. Aliquam augue turpis, varius vel bibendum ut, aliquam at diam. Nam lobortis, dui eu hendrerit pellentesque, sem neque porttitor erat, non dapibus velit lectus in metus. Vestibulum sit amet felis enim. In quis est vitae nunc malesuada consequat nec nec sapien. Suspendisse aliquam massa placerat dui lacinia luctus sed vitae risus. Fusce tempus, neque id ultrices volutpat, mi urna auctor arcu, viverra semper libero sem vel enim. Mauris dictum, elit non placerat malesuada, libero elit euismod nibh, nec posuere massa arcu eu risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer urna velit, dapibus eget varius feugiat, pellentesque sit amet ligula. Maecenas nulla nisl, facilisis eu egestas scelerisque, mollis eget metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi sed congue mi.</p>
<p>Fusce metus velit, pharetra at vestibulum nec, facilisis porttitor mi. Curabitur ligula sapien, fermentum vel porttitor id, rutrum sit amet magna. Sed sit amet sollicitudin turpis. Aenean luctus rhoncus dolor, et pulvinar ante egestas et. Donec ac massa orci, quis dapibus augue. Vivamus consectetur auctor pellentesque. Praesent vestibulum tincidunt ante sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce purus metus, imperdiet vitae iaculis convallis, bibendum vitae turpis.</p>
<p>Fusce aliquet molestie dolor, in ornare dui sodales nec. In molestie sollicitudin felis a porta. Mauris nec orci sit amet orci blandit tristique congue nec nunc. Praesent et tellus sollicitudin mauris accumsan fringilla. Morbi sodales, justo eu sollicitudin lacinia, lectus sapien ullamcorper eros, quis molestie urna elit bibendum risus. Proin eget tincidunt quam. Nam luctus commodo mauris, eu posuere nunc luctus non. Nulla facilisi. Vivamus eget leo rhoncus quam accumsan fringilla. Aliquam sit amet lorem est. Nullam vel tellus nibh, id imperdiet orci. Integer egestas leo eu turpis blandit scelerisque.</p>
<p>Etiam in blandit tellus. Integer sed varius quam. Vestibulum dapibus mi gravida arcu viverra blandit. Praesent tristique augue id sem adipiscing pellentesque. Sed sollicitudin, leo sed interdum elementum, nisi ante condimentum leo, eget ornare libero diam semper quam. Vivamus augue urna, porta eget ultrices et, dapibus ut ligula. Ut laoreet consequat faucibus. Praesent at lectus ut lectus malesuada mollis. Nam interdum adipiscing eros, nec sodales mi porta nec. Proin et quam vitae sem interdum aliquet. Proin vel odio at lacus vehicula aliquet.</p>
<p>Etiam placerat dui ut sem ornare vel vestibulum augue mattis. Sed semper malesuada mi, eu bibendum lacus lobortis nec. Etiam fringilla elementum risus, eget consequat urna laoreet nec. Etiam mollis quam non sem convallis vel consectetur lectus ullamcorper. Aenean mattis lacus quis ligula mattis eget vestibulum diam hendrerit. In non placerat mauris. Praesent faucibus nunc quis eros sagittis viverra. In hac habitasse platea dictumst. Suspendisse eget nisl erat, ac molestie massa. Praesent mollis vestibulum tincidunt. Fusce suscipit laoreet malesuada. Aliquam erat volutpat. Aliquam dictum elementum rhoncus. Praesent in est massa, pulvinar sodales nunc. Pellentesque gravida euismod mi ac convallis.</p>
<p>Mauris vel odio vel nulla facilisis lacinia. Aliquam ultrices est at leo blandit tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse porttitor adipiscing facilisis. Duis cursus quam iaculis augue interdum porttitor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis vulputate magna ac metus pretium condimentum. In tempus, est eget vestibulum blandit, velit massa dignissim nisl, ut scelerisque lorem neque vel velit. Maecenas fermentum commodo viverra. Curabitur a nibh non velit aliquam cursus. Integer semper condimentum tortor a pellentesque. Pellentesque semper, nisl id porttitor vehicula, sem dui feugiat lacus, vitae consequat augue urna vel odio.</p>
<p>Vestibulum id neque nec turpis iaculis pulvinar et a massa. Vestibulum sed nibh vitae arcu eleifend egestas. Mauris fermentum ultrices blandit. Suspendisse vitae lorem libero. Aenean et pellentesque tellus. Morbi quis neque orci, eu dignissim dui. Fusce sollicitudin mauris ac arcu vestibulum imperdiet. Proin ultricies nisl sit amet enim imperdiet eu ornare dui tempus. Maecenas lobortis nisi a tortor vestibulum vel eleifend tellus vestibulum. Donec metus sapien, hendrerit a fermentum id, dictum quis libero.</p>
<p>Pellentesque a lorem nulla, in tempor justo. Duis odio nisl, dignissim sed consequat sit amet, hendrerit ac neque. Nunc ac augue nec massa tempor rhoncus. Nam feugiat, tellus a varius euismod, justo nisl faucibus velit, ut vulputate justo massa eu nibh. Sed bibendum urna quis magna facilisis in accumsan dolor malesuada. Morbi sit amet nunc risus, in faucibus sem. Nullam sollicitudin magna sed sem mollis id commodo libero condimentum. Duis eu massa et lacus semper molestie ut adipiscing sem.</p>
<p>Sed id nulla mi, eget suscipit eros. Aliquam tempus molestie rutrum. In quis varius elit. Nullam dignissim neque nec velit vulputate porttitor. Mauris ac ligula sit amet elit fermentum rhoncus. In tellus urna, pulvinar quis condimentum ut, porta nec justo. In hac habitasse platea dictumst. Proin volutpat elit id quam molestie ac commodo lacus sagittis. Quisque placerat, augue tempor placerat pulvinar, nisi nisi venenatis urna, eget convallis eros velit quis magna. Suspendisse volutpat iaculis quam, ut tristique lacus luctus quis.</p>
<p>Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.</p>
</body>
</html>

Примечание: функция showNode является также примером использования цикла for без раздела statement. В этом случае точка с запятой всегда добавляется сразу после декларации цикла.

…тоже самое только с анимированной прокруткой страницы:

var showBookmark = (function () {
  var  _useHash, _scrollX, _scrollY, _nodeX, _nodeY, _itFrame, _scrollId = -1, _bookMark,
       /*
       * nDuration: the duration in milliseconds of each frame
       * nFrames: number of frames for each scroll
       */
       nDuration = 200, nFrames = 10;

  function _next () {
    if (_itFrame > nFrames) { clearInterval(_scrollId); _scrollId = -1; return; }
    _isBot = true;
    document.documentElement.scrollTop = Math.round(_scrollY + (_nodeY - _scrollY) * _itFrame / nFrames);
    document.documentElement.scrollLeft = Math.round(_scrollX + (_nodeX - _scrollX) * _itFrame / nFrames);
    if (_useHash && _itFrame === nFrames) { location.hash = _bookMark; }
    _itFrame++;
  }

  function _chkOwner () {
    if (_isBot) { _isBot = false; return; }
    if (_scrollId > -1) { clearInterval(_scrollId); _scrollId = -1; }
  }

  if (window.addEventListener) { window.addEventListener("scroll", _chkOwner, false); }
  else if (window.attachEvent) { window.attachEvent("onscroll", _chkOwner); }

  return function (sBookmark, bUseHash) {
    _scrollY = document.documentElement.scrollTop;
    _scrollX = document.documentElement.scrollLeft;
    _bookMark = sBookmark;
    _useHash = arguments.length === 1 || bUseHash;
    for (
      var nLeft = 0, nTop = 0, oNode = document.querySelector(sBookmark);
      oNode;
      nLeft += oNode.offsetLeft, nTop += oNode.offsetTop, oNode = oNode.offsetParent
    );
    _nodeX = nLeft, _nodeY = nTop, _itFrame = 1;
    if (_scrollId === -1) { _scrollId = setInterval(_next, Math.round(nDuration / nFrames)); }
  };
})();

Спецификации

Specification
HTML Standard # the-location-interface

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

Интерфейс возвращающий значение, Location.
Подобная информация, но привязанная к контексту браузера, Document.location
Манипулирование историей браузера
hashchange (en-US)

Источник

Ищешь данные URL сайта, тогда объект

window.location

как раз для тебя! Используй его свойства для получения информации об адресе текущей страницы или используй его методы для редиректа, перезагрузки некоторых страниц 💫

https://voiti-v-it.com/posts/76?filter=JS#2

window.location.origin → ‘https://voiti-v-it.com’
.protocol → ‘https:’
.host → ‘voiti-v-it.com’
.hostname → ‘voiti-v-it.com’
.port → »
.pathname → ‘posts/76’
.search → ‘?filter=JS’
.hash → ‘#2’
.href → ‘https://voiti-v-it.com/posts/76?filter=JS#2’

window.location.assign(‘url’)
.replace(‘url’)
.reload()
.toString()

Свойства window.location

window.location

.origin
Базовый URL (Протокол + имя хоста + номер порта)

.protocol
Протокол (http: или https)

.host
Доменное имя + порт

.hostname
Доменное имя

.port
Имя порта

.pathname
Строка пути (относительно хоста)

.search
Часть строки, которая следует после? (включая ?)

.hash
Часть строки, которая следует после # (якорь или идентификатор фрагмента)

.href
Полный URL

Разница между host и hostname

В моем примере выше ты заметишь, что

host

hostname

возвращают одно и то же значение. Так в чем же разница. Ну, это связано с номером порта. Давай взглянем.

URL без порта

https://voiti-v-it.com

window.location.host; // ‘voiti-v-it.com’
window.location.hostname; // ‘voiti-v-it.com’
window.location.port; // »

URL с портом

http://voiti-v-it.com:8080

window.location.host; // ‘voiti-v-it.com:8080’
window.location.hostname; // ‘voiti-v-it.com’
window.location.port; // ‘8080’

Таким образом,

host

будет содержать номер порта, тогда как

hostname

будет возвращать только имя хоста.

Как изменить свойства URL

Ты можешь не только вызвать свойства объекта

location

чтобы получить информацию об URL. Ты можешь использовать его для установки новых свойств и изменения URL. Посмотрим, что я имею в виду.

http://voiti-v-it.com:8080

window.location.host; // ‘voiti-v-it.com:8080’
window.location.hostname; // ‘voiti-v-it.com’
window.location.port; // ‘8080’

Вот полный список свойств, которые ты можешь изменить:

http://voiti-v-it.com:8080
window.location.host; // ‘voiti-v-it.com:8080’
window.location.hostname; // ‘voiti-v-it.com’
window.location.port; // ‘8080’

Единственное свойство, которое ты не можешь установить, это

window.location.origin

Это свойство доступно только для чтения.

Объект Location

window.location

возвращает объект

Location

который дает тебе информацию о текущем местоположении страницы. Ты также можешь получить доступ к объекту Location несколькими способами.

http://voiti-v-it.com:8080

window.location.host; // ‘voiti-v-it.com:8080’
window.location.hostname; // ‘voiti-v-it.com’
window.location.port; // ‘8080’

Объект доступен таким образом, потому что является глобальной переменной в браузере.

window.location vs location

Каждый из 4х свойств выше указывают на один и тот же объект

Location

Я лично предпочитаю

window.location

и на самом деле не буду использовать

location

Главным образом потому, что

location

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

// https://www.samanthaming.com

location.protocol; // ‘https’

function localFile() {
const location = ‘/sam’;
return location.protocol;
// ❌ undefined
// локальная «location» преопределяет глобальную переменную
}

Я думаю, что большинство разработчиков знают, что

window

является глобальной переменной. Так что у тебя меньше шансов вызвать путаницу. Поэтому я рекомендую использовать

window.location

вместо

location

Вот мой личный порядок предпочтений:

// ✅
1. window.location // 🏆
2. document.location
// ❌
3. window.document.location // почему бы просто не использовать #1 or #2 😅
4. location // чувствуется слишком двусмысленно 😵

Конечно, это всего лишь мои предпочтения. Ты эксперт в своей кодовой базе, лучшего способа нет, лучший всегда тот, который подходит тебе и твоей команде.🤓

Методы window.location

window.location

.assign()
Навигация происходит по указанному URL

.replace()
Навигация происходит по указанному URL & и текущая страница удаляется из истории

.reload()
Перезагружает текущую страницу

.toString()
Returns the URL

window.location.toString

Вот определение из MDN

Этот метод возвращает USVString URL. Версия только для чтения

Location.href

Другими словами, ты можешь использовать его для получения значения

href

из

// https://voiti-v-it.com

window.location.href; // https://voiti-v-it.com

window.location.toString(); // https://voiti-v-it.com

Что касается использования, я не смог найти много информации о том, что лучше; но если ты это сделаешь, пожалуйста, поделись в комментах 😊. Я нашел тест производительности на разницу.

Один момент, который я хочу отметить в отношении этих тестов скорости, заключается в том, что они зависят от браузера. Различные браузеры и версии будут иметь разные результаты. Я использую Chrome, поэтому href вышел быстрее остальных. Так что я буду этим пользоваться. Также я думаю, что он читается более явно, чем

toString()

Совершенно очевидно, что

href

предоставит URL, тогда как

toString

выглядит как нечто, преобразуемое в строку.😅

assign vs replace

Оба эти метода помогут тебе перейти по другому URL. Разница в том, что

assign

сохранит твою текущую страницу в истории, поэтому твой пользователь может использовать кнопку «назад» для перехода к ней. Принимая во внимание метод

replace

он не сохраняет его истории. Это немного смущает, да? Меня тоже. Давай пройдемся по примерам.

Assign

1. Открыть новую вкладку
2. Перейти https://voiti-v-it.com (текущая страница)
3. Загрузить нвоую страницу 👉 `window.location.assign(‘https://www.w3schools.com’)`
4. Нажать «назад»
5. Вернемся на 👉 https://voiti-v-it.com

Replace

Текущая страница

Мне просто нужно подчеркнуть «текущая страница» в определении. Это страница прямо перед

assign

или

replace

1. Открыть новую вкладку
2. Перейти www.developer.mozilla.org
3. Перейти https://voiti-v-it.com 👈 это будет текущая страница
4. window.location.assign(‘https://www.w3schools.com’); // Перейдет к #3
4. window.location.replace(‘https://www.w3schools.com’); // Перейдет к #2

Как сделать редирект страницы

Теперь ты знаешь, что мы можем изменить свойства

window.location

присвоив значение с помощью

Точно так же существуют методы, к которым мы можем получить доступ для выполнения некоторых действий. Итак, что касается «как перенаправить/редиректить на другую страницу», то есть 3 способа.

// Установить свойство href
window.location.href = ‘https://voiti-v-it.com’;
// Использование Assign
window.location.assign(‘https://voiti-v-it.com’);
// Использование Replace
window.location.replace(‘https://voiti-v-it.com’);

replace vs assign vs href

Все три перенаправляют, разница связана с историей браузера.

href

assign

здесь одинаковы. Они сохранят твою текущую страницу в истории, а

replace

— нет. Так что, если ты предпочитаешь опыт создания, когда навигация не может вернуться на исходную страницу, используй

replace

Таким образом, вопрос сейчас:

href

assign

Я считаю, что это личные предпочтения. Мне больше нравится

assign

потому что это метод, поэтому мне кажется, что я выполняю какое-то действие. Также есть дополнительный бонус в том, что его проще тестировать. Я писал много Jest-тестов, поэтому, используя метод можно просто замокать данные.

window.location.assign = jest.fn();
myUrlUpdateFunction();
expect(window.location.assign).toBeCalledWith(‘http://my.url’);

Но для тех, которые болеют за

href

для редиректа страницы. Я нашел тест производительности и он работает в моей версии Chrome быстрее. Опять же, тесты производительности варьируются в зависимости от браузера и разных версий, сейчас это может быть быстрее, но, возможно, в будущих браузерах всё может измениться.

Как это все появилось 👍

Ладно, я готов с вами поделиться как появилась эта шпаргалка. Я гуглил, как редиректить на другую страницу, и столкнулся с объектом

window.location

Иногда я чувствую, что разработчик является журналистом или детективом — для того, чтобы собрать всю доступную информацию, приходится много копаться и прочесывать разные источники. Честно говоря, я был ошеломлен материалами, они все были “о разном”, а я просто хотел всё из одного источника. Я не мог найти много полной информации, поэтому я подумал, а расскажу-ка я об этом в шпаргалке!

Источник

На этом уроке мы познакомимся с объектом location, который может использоваться для получения или изменения текущего адреса страницы (URL).

Объект location — это один из дочерних объектов window, который отвечает за адресную строку окна или вкладки браузера. Доступ к данному объекту осуществляется как к свойству объекта window, т.е. через точку.

window.location

Объект location содержит свойства и методы, с помощью которых Вы можете не только получить текущий адрес страницы (URL или его части: имя хоста, номер порта, протокол и т.д.), но и изменить его.

Свойства объекта location

Свойства объекта location:

hash — устанавливает или возвращает якорную часть (#) URL;
host — устанавливает или возвращает имя хоста и номер порта URL;
hostname — устанавливает или возвращает имя хоста URL;
href — устанавливает или возвращает содержимое URL;
origin — возвращает протокол, имя хоста и номер порта URL;
pathname — устанавливает или возвращает часть URL, содержащей путь;
port — устанавливает или возвращает номер порта URL;
protocol — устанавливает или возвращает протокол URL;
search — устанавливает или возвращает часть URL, содержащей строку с параметрами (?параметр1=значение1&параметр2=значение2&…);

В качестве примера рассмотрим следующую адресную строку (URL):

Примечание: Изменение URL или какой либо её части с помощью свойств объекта location приводит к немедленному переходу к этому URL в текущем окне, или в том окне или вкладке браузера, для которого этот объект был вызван.

Например, изменить href на http://itchief.ru для текущего окна:

window.location.href = "http://itchief.ru";
//для текущего окна "window." можно опустить
location.href = "http://itchief.ru";
//кроме этого свойство href тоже можно опустить, т.к. location == location.href
location = "http://itchief.ru";

Например, изменить href для окна с именем myWindow:

//откроем новое окно с помощью метода JavaScript open()
var myWindow = window.open("","","height=300,width=400");
//изменим location окна, идентификатор которого хранится в myWindow
myWindow.location.href = "http://itchief.ru";

Например, вывести на экран все свойства и методы объекта location и их значения для текущей веб-страницы.

<div id="propertiesLocation" class="alert alert-warning"></div>

<script>
  var stringPropertiesLocation = "";
  for (var property in location)
  {
    stringPropertiesLocation += "Свойство/метод: <strong>" + property + "</strong>. ";
    stringPropertiesLocation += "Значение: <strong>" + location[property] + "</strong> ";
    stringPropertiesLocation += "<strong>Тип: </strong>" + typeof location[property]; 
    stringPropertiesLocation += "<br />";
  }
  document.getElementById("propertiesLocation").innerHTML = stringPropertiesLocation;
</script>

Методы объекта location

Методы:

assign() — загружает новый документ в текущее окно (вкладку) браузера или в то окно для которого этот метод был вызван.
reload() — перезагружает текущий документ. Метод reload() имеет один необязательный параметр булевского типа. Если в качестве параметра указать значение true, то страница будет принудительно обновлена с сервера. А если параметр не указывать или использовать в качестве параметра значение false, то браузер может обновить страницу, используя данные своего кэша. Метод reload() «имитирует» нажатие кнопки обновить в браузере.
replace() — заменяет текущий документ с помощью нового документа, URL которого указан в качестве параметра.

Рассмотрим следующие примеры:

1. При нажатии на ссылку загрузим в 1 фрейм страницу http://nigma.ru/:

<script>
  function loadNigma() {
    window.frames[0].location.assign("http://nigma.ru/");
  }
</script>
...
<!-- Загрузить URL http://yandex.ru в 1 фрейм -->
<a href="javascript:loadNigma()">Загрузить nigma во фрейм</a>
<hr />
<iframe width="500" height="400"></iframe>

2. Откроем новое окно, в котором будем управлять адресной строкой с помощью методов объекта location:

<script>
  let newWindow;
  function openWindow() {
    if (!newWindow) {
      newWindow = window.open('https://itchief.ru/', '', 'width=400,height=500');
      newWindow.focus();
    } else {
      newWindow.focus();
    }
  }
  function assignWindow() {
    if (newWindow) {
      newWindow.location.assign('https://itchief.ru/javascript/');
      newWindow.focus();
    }
  }
  function replaceWindow() {
    if (newWindow) {
      newWindow.location.replace('https://itchief.ru/html-and-css/');
      newWindow.focus();
    }
  }
</script>

<ul>
  <li><a href="javascript:openWindow()">Создать окно «https://itchief.ru/»</a></li>
  <li><a href="javascript:assignWindow()">Загрузить «https://itchief.ru/javascript/»</a></li>
  <li><a href="javascript:replaceWindow()">Заменим страницу на «https://itchief.ru/html-and-css/»</a></li>
</ul>

Источник

window.location

Получает/устанавливает URL окна и его компоненты

Описание, примеры

Значением этого свойства является объект типа Location.

Объект `Location`

Метод toString этого объекта возвращает URL, а различные свойства позволяют получить/установить отдельные компоненты адреса.

Для некоторых строковых операций необходимо явно преобразовать Location к строке:

window.location.toString().charAt(17)

Свойства объекта `Location`

Все следующие свойства являются строками.
Колонка «Пример» содержит их значения для URL:

http://www.google.com:80/search?q=javascript#test

Свойство	Описание	Пример
`hash`	часть URL, которая идет после символа решетки ‘#’, включая символ ‘#’	#test
`host`	хост и порт	www.google.com:80
`href`	весь URL	http://www.google.com:80/search?q=javascript#test
`hostname`	хост (без порта)	www.google.com
`pathname`	строка пути (относительно хоста)	/search
`port`	номер порта	80
`protocol`	протокол	http:
`search`	часть адреса после символа ?, включая символ ?	?q=javascript

В Firefox есть баг: если hash-компонент адреса содержит закодированные (см. encodeURIComponent) символы, свойство hash возвращает раскодированный компонент. Например, вместо %20 будет пробел и т.п. Другие браузеры ведут себя корректно и не раскодируют hash.

Методы объекта `Location`

assign(url): загрузить документ по данному url
reload([forceget]): перезагрузить документ по текущему URL. Аргумент forceget — булево значение, если оно true, то документ перезагружается всегда с сервера, если false или не указано, то браузер может взять страницу из своего кэша.
replace(url): заменить текущий документ на документ по указанному url. Разница, по сравнению с assign() заключается в том, что после использования replace() страница не записывается в истории посещений. В частности, это значит, что посетитель не сможет использовать для возврата кнопку браузера «Назад».
toString(): возвращает строковое представление URL для объекта Location

Поиск по сайту

Содержание
Введение Основы javascript DOM: работа с HTML-страницей События Объекты, ООП AJAX Особенности регулярных выражений в Javascript Базовые типы: Строки, Числа, Boolean Операторы, их особенности в JS Массивы Функции Замыкания Регулярные выражения Конструкции языка. Обработка ошибок. Редактирование и отладка скриптов Cookie HTTP-Отладка Просмотр живого HTML Разное полезное Drag and drop Грамотное javascript-дерево за 7 шагов Интеграция AJAX в интерфейс Координаты элемента на странице Правильные show/hide/toggle Удобное дерево с AJAX-подгрузкой Введение в Ajax Ajax и Rich Client Ajax и клиент-серверная архитектура. Способы общения с сервером COMET Форматы данных для AJAX Обмен данными для документов с разных доменов Обмен данными между доменами. Часть 2. Google Closure Compiler в деталях Yahoo: лучшие способы ускорения сайта Анализ оптимизации страниц c Yslow Интерфейсы. Прочь от MVC Оптимизация Javascript-кода Польза от documentFragment Сжатие Javascript и CSS Улучшаем сжимаемость Javascript-кода. Умное Кеширование и Версионность в Javascript/CSS Асинхронное программирование Google Gears в деталях Javascript <-> Flash мост Букмарклеты и правила их написания О подборке книг на сайте Почему <a href=»javascript:…»> — плохо Способы идентификации в интернете Уровни DOM Что почитать? Шаблонизация с javascript Юнит-тесты уровня браузера на связке Selenium + PHP. Справочники: Javascript/HTML/CSS Система сборки и зависимостей Google Closure Library Хранение данных на клиенте. DOM Storage и его аналоги. 10 лучших функций на JavaScript Дерево всех статей

Содержание

Введение
Основы javascript
DOM: работа с HTML-страницей
События
Объекты, ООП
AJAX
Особенности регулярных выражений в Javascript

Базовые типы: Строки, Числа, Boolean
Операторы, их особенности в JS
Массивы
Функции
Замыкания
Регулярные выражения
Конструкции языка. Обработка ошибок.

Редактирование и отладка скриптов
Cookie
HTTP-Отладка
Просмотр живого HTML
Разное полезное

Drag and drop
Грамотное javascript-дерево за 7 шагов
Интеграция AJAX в интерфейс
Координаты элемента на странице
Правильные show/hide/toggle
Удобное дерево с AJAX-подгрузкой

Введение в Ajax
Ajax и Rich Client
Ajax и клиент-серверная архитектура.
Способы общения с сервером
COMET
Форматы данных для AJAX
Обмен данными для документов с разных доменов
Обмен данными между доменами. Часть 2.

Google Closure Compiler в деталях
Yahoo: лучшие способы ускорения сайта
Анализ оптимизации страниц c Yslow
Интерфейсы. Прочь от MVC
Оптимизация Javascript-кода
Польза от documentFragment
Сжатие Javascript и CSS
Улучшаем сжимаемость Javascript-кода.
Умное Кеширование и Версионность в Javascript/CSS

Асинхронное программирование
Google Gears в деталях
Javascript <-> Flash мост
Букмарклеты и правила их написания
О подборке книг на сайте
Почему <a href=»javascript:…»> — плохо
Способы идентификации в интернете
Уровни DOM
Что почитать?
Шаблонизация с javascript
Юнит-тесты уровня браузера на связке Selenium + PHP.
Справочники: Javascript/HTML/CSS
Система сборки и зависимостей Google Closure Library
Хранение данных на клиенте. DOM Storage и его аналоги.
10 лучших функций на JavaScript

Дерево всех статей

Последние комментарии
akun jp slot 25 минут 4 секунды назад If you are looking for where to… 1 час 28 минут назад To shoot the ball at your foe, you… 2 часа 3 минуты назад To shoot the ball at your foe, you… 2 часа 5 минут назад Hello, I read the post well. 카지노추천 It’s… 2 часа 26 минут назад หวยใหม่มาแรง biglotto หวยออนไลน์ 4 часа 13 минут назад หวยใหม่มาแรง likeslotto หวยออนไลน์ 4 часа 13 минут назад หวยใหม่มาแรง huaylan หวยออนไลน์ 4 часа 14 минут назад หวยใหม่มาแรง akbet888 หวยออนไลน์ 4 часа 14 минут назад เว็บหวยน้องใหม่ บาทละ 1,000 biglotto… 4 часа 15 минут назад

Последние комментарии

akun jp slot
25 минут 4 секунды назад
If you are looking for where to…
1 час 28 минут назад
To shoot the ball at your foe, you…
2 часа 3 минуты назад
To shoot the ball at your foe, you…
2 часа 5 минут назад
Hello, I read the post well. 카지노추천 It’s…
2 часа 26 минут назад
หวยใหม่มาแรง biglotto หวยออนไลน์
4 часа 13 минут назад
หวยใหม่มาแรง likeslotto หวยออนไลน์
4 часа 13 минут назад
หวยใหม่มาแรง huaylan หวยออนไลน์
4 часа 14 минут назад
หวยใหม่มาแรง akbet888 หวยออนไลน์
4 часа 14 минут назад
เว็บหวยน้องใหม่ บาทละ 1,000 biglotto…
4 часа 15 минут назад

Последние темы на форуме
Логика в JS, не понимаю доступ к CSS переменной. Вопрос для Инопланетной силы Как сделать «Показать полностью», если текст больше N … Спасите НУБА ) Поиск при клике на кнопку Swiper JS — 2 слайдера на странице Forum

Последние темы на форуме

Логика в JS, не понимаю
доступ к CSS переменной.
Вопрос для Инопланетной силы
Как сделать «Показать полностью», если текст больше N …
Спасите НУБА )
Поиск при клике на кнопку
Swiper JS — 2 слайдера на странице

Forum

Источник

HTML CSS JS

JavaScript: Window Location

Дата размещения статьи 30/11/2019 👁4179

JavaScript: Window Location

Объект Window.location предоставляет информацию о текущем адресе страницы (URL), позволяет реализовать обновление (перезагрузку) страницы, перенаправление браузера на другой URL и многое другое.

Объект Window.location содержит следующие свойства и методы.

window.location.href;
window.location.origin;
window.location.protocol;
window.location.hostname;
window.location.port;
window.location.pathname;
window.location.search;
window.location.hash;
window.location.assign();
window.location.reload();
window.location.replace();
window.location.toString();
пример.

https://only-to-top.ru/blog/coding/2019-11-30-javascript-window-location.html?name=value#hash

Свойства:

window.location.href     → "https://only-to-top.loc/blog/coding/2019-11-30-javascript-window-location.html?name=value#hash"
               .origin   → "https://only-to-top.ru"
               .protocol → "https:"
               .hostname → "only-to-top.ru"
               .port     → "80 | 443"
               .pathname → "/blog/coding/2019-11-30-javascript-window-location.html"
               .search   → "?name=value"
               .hash     → "#hash"

Методы:

window.location.assign("another-url")
               .reload(true)
               .replace("another-url")
               .toString()

Window Location Href

Данный метод вернёт URL текущей страницы (полный путь) во всеми параметрами.
Можно использовать без префикса href, просто location.

Пример.

alert(`URL со всеми параметрами: ${window.location}`); // https://bla-bla.html?name=value#hash

Window Location Origin

Возвращает протокол, хост и порт.

Возвращает текущий URL. Пример:

const current_url = window.location.origin;

alrt(current_url); // [https:]//[only-to-top.ru]:[443]

Window Location Protocol

Свойство window.location.protocol возвращает веб-протокол данной страницы (http или https).

Пример.

alert(`Страница имеет протокол: ${window.location.protocol}`); // https:

Window Location Hostname

Свойство window.location.hostname возвращает имя хоста текущей страницы (без порта).

Пример.

alert(`Хост: ${window.location.hostname}`); // only-to-top.ru

Window Location Port

Свойство window.location.port возвращает номер порта данного хоста.

Пример.

alert(`Порт: ${window.location.port}`); // 80 | 443

Некоторые браузеры не будут отображать номера портов по умолчанию (80 для http и 443 для https).

Window Location Pathname

Свойство window.location.pathname возвращает путь до текущей страницы (без домена).

Пример.

alert(`Путь: ${window.location.pathname}`); // /blog/coding/2019-11-30-javascript-window-location.html

Window Location Search

Свойство window.location.search содержит GET параметры — с добавлением в начале ?. Обычно называют «строка запроса» /search?q=text. Несколько параметров: ?id=18&title=phone.

Пример. Пусть у нас url заканчивается на ?id=97, тогда получим:

let search_string = location.search;

console.log(search_string); // ?id=97

Пример изменения параметров:

let your_data = "";

function sendData(your_data) {
    location.search = your_data;
}

Т.о. мы изменяем параметры, которые хотим передать на сервер.

Window Location Hash

Свойство window.location.hash содержит id фрагмента, включая символ # (hash).

Пример.

let hash = window.location.hash;

alert(hash); // #hash

Window Location Assign()

Метод window.location.assign() загружает новую страницу.

Пример.

<input type="button" value="Загрузить новую страницу" onclick="newDoc()">

<script>
    newDoc = () => {
        window.location.assign("https://only-to-top.ru")
    }
</script>

Window Location Reload()

Метод window.location.reload() позволяет перезагрузить страницу (текущий URL).

Перезагрузка страницы с использованием кэша.

document.location.reload();

Перезагрузка текущей страницы без использования кэша, она будет заново загружена с сервера.

document.location.reload(true);

Window Location Replace()

Метод window.location.replace() позволяет перенаправить подобно HTTP-редиректу. Также текущая страница не будет сохранена в объекте History (нельзя будет использовать кнопку «Назад»).

Пример перенаправления через 2 секунды на страницу «Благодарности».

setTimeout(() => {
    window.location.replace("/page-thanks.php");
}, 2000);

Window Location toString()

Пример использования метода toString():

<a href="https://only-to-top.ru/blog/coding/2019-09-24-jquery-to-js.html" id="link">jQuery to JS</a>

<script>
    let link = document.getElementById("link");
    let link_url = link.toString();
    console.log(link);
    console.log(link_url);
</script>

Получим:

Пример

Возьмем текущую страницу в качестве примера URL, к которому мы добавим все возможные параметры:

https://only-to-top.loc/blog/coding/2019-11-30-javascript-window-location.html?name=value#hash

Это разделяется следующим образом:

[https:] // [only-to-top.ru] : [443] [/blog/coding/2019-11-30-javascript-window-location.html] [?name=value] [#hash]

Свойства объекта Window.location касательно данного примера:

[protocol] [hostname] [port] [pathname] [search] [hash]

Дата обновления статьи 26/11/2022 11:47

Как Преобразовать Объект в Массив (JS) Git SSH Windows — пошаговое руководство

Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки,
то можете следить за выходом новых статей в Telegram.

JavaScript: Работа с Массивами
Наличие Динамически Добавленного Элемента
Стилизация Input File
Предзагрузка Картинок — Предварительная Загрузка Изображений на JavaScript
Стилизация Скролла
События Формы

Источник

Объект Location связан с адресной строкой браузера, в его свойствах содержатся все компоненты URL доступные для чтения и записи.

Доступ к Location обычно осуществляется через объекты Document.location или Window.location. Если скрипт запускается из iframe (в одном домене), доступ к родительскому окну доступен через window.parent.location.

Рассмотрим какие будут значения при следующим URL:

http://www.example.com/pages/contats?page=1&sort=2#marker

Location.href

Вернет полный URL страницы.

console.log(window.location.href);

Результат:

http://www.example.com/pages/contats?page=1&sort=2#marker

Объекту location можно присвоить новый URL, браузер сразу перейдет на новую страницу.

window.location.href = 'https//snipp.ru';

Так же для редиректа можно использовать методы location.assign() и location.replace(). Отличие последнего в том, что пользователь не сможет использовать кнопку «назад».

window.location.assign('https//snipp.ru');

window.location.replace('https//snipp.ru');

Location.protocol

Возвращает используемый протокол, включая :.

console.log(window.location.protocol);

Результат:

http:

Location.port

Номер порта, если его нет в URL, то ни чего не выведется.

console.log(window.location.port);

Location.host

Содержит домен и порт (если есть).

console.log(window.location.host);

Результат:

www.example.com

Location.hostname

Содержит только домен.

console.log(window.location.hostname);

Результат:

www.example.com

Location.pathname

Строка пути текущий страницы, начинается с /.

console.log(window.location.pathname);

Результат:

/pages/contats

Location.search

GET-параметры, начинается с ?.

console.log(window.location.search);

Результат:

?page=1&sort=2

Location.hash

Хеш страницы, начинается с #.

console.log(window.location.hash);

Результат:

#marker

Для изменения хеша не обязательно указывать решетку:

window.location.hash = '123';

Источник

Редирект на JS: как заменить страницу в текущей вкладке
Как перезагрузить страницу
Document.referrer: узнать URL предыдущей страницы
Document.title: получить title страницы
Window.open(): открыть новое окно
Window.history: изменить URL без смены документа
Event.preventDefault(): запретить переход по ссылке
Ссылка меняет адрес фрейма: атрибут target=»nameIframe»
ContentWindow: доступ к содержимому iframe

Объект window.location позволяет узнать URL (или его часть) текущей страницы, перезагрузить документ, перейти на другую страницу в текущей вкладке.

Узнать адрес страницы, открыть другую страницу в текущей вкладке

Имитирует переход по ссылке.

location	http://shpargalkablog.ru:80/2015/08/html5-history-api.html?log=1#location
<button type=»button» onclick=»alert(location)»>получить URL</button> <button type=»button» onclick=»location = ‘http://css.shpargalkablog.ru/2015/08/window-location-js.html'»>перейти на страницу с другим URL</button>
location.origin	http://shpargalkablog.ru:80
Используется в заголовке ответа сервера для кроссдоменных запросов, например, с помощью new XMLHttpRequest() <button type=»button» onclick=»alert(location.origin)»>получить протокол, домен, порт</button>
location.protocol	http:
<button type=»button» onclick=»alert(location.protocol)»>получить протокол</button> <button type=»button» onclick=»location.protocol = ‘https'»>перейти на страницу с другим протоколом</button>
location.host	shpargalkablog.ru:80
<button type=»button» onclick=»alert(location.host)»>получить домен, порт</button> <button type=»button» onclick=»location.host = ‘css.shpargalkablog.ru:80′»>перейти на страницу с другим доменом, портом</button>
location.hostname	shpargalkablog.ru
<button type=»button» onclick=»alert(location.hostname)»>получить домен</button> <button type=»button» onclick=»location.hostname = ‘css.shpargalkablog.ru'»>перейти на страницу с другим доменом</button>
location.port	80
Для http:, как правило, порт 80, для https: — 443. Популярные значения большинство браузеров убирают из URL и location.port возвращают пустым <button type=»button» onclick=»alert(location.port)»>получить порт</button> <button type=»button» onclick=»location.port = ’80′»>перейти на страницу с другим портом</button>
location.pathname	/2015/08/html5-history-api.html
<button type=»button» onclick=»alert(location.pathname)»>получить путь к файлу относительно хоста</button> <button type=»button» onclick=»alert(location.pathname.split(‘/’)[1])»>получить имя первой папки</button> <button type=»button» onclick=»location.pathname = ‘/2014/10/window-open-javascript.html'»>перейти к другому файлу сайта</button>
location.search	?log=1&name=%D0%98%D0%B2%D0%B0%D0%BD%D0%BE%D0%B2%20%D0%98%D0%B2%D0%B0%D0%BD
Для GET запросов после знака вопроса (?) в URL вносятся параметры, перечисленные через & <button type=»button» onclick=»alert(location.search)»>получить параметры</button> <button type=»button» onclick=»alert(decodeURIComponent(location.search))»>получить раскодированные кириллические параметры</button> [Источник скрипта: MDN] <button type=»button» onclick=»alert(getURLParam(location.search, ‘name’));»>получить значение параметра «name»</button> <script> function getURLParam (oTarget, sVar) { return decodeURI(oTarget.replace(new RegExp(«^(?:.[&\?]» + encodeURI(sVar).replace(/[.+]/g, «\$&») + «(?:\=([^&]))?)?.$», «i»), «$1″)); } </script> URLSearchParams: более современный подход <button type=»button» onclick=»location.search = ‘log=1&name=Иванов Иван'»>перейти на страницу с другими параметрами</button>
location.hash	#location
Если к URL добавить id элемента вместе с хэшем (#), то страница без перезагрузки будет прокручена к началу этого элемента: подробнее, пример, пример <button type=»button» onclick=»alert(location.hash)»>получить якорь к которому при загрузки прокручивается документ</button> <button type=»button» onclick=»location.hash = ‘location'»>добавить (или изменить) якорь в адрес страницы</button>

Редирект на JS: как заменить страницу в текущей вкладке

При нажатии кнопки браузера «Назад» страница, с которой был совершён переход с помощью location.replace(), будет отсутствовать. Похоже на HTTP редирект 301 (поисковики его так не рассматривают).

JavaScript переадресация

<button type="button" onclick="location.replace('http://css.shpargalkablog.ru/2015/08/window-location-js.html')">удалить URL из истории посещений, переместить на другую страницу</button>

Разбить URL на части, изменить часть адреса страницы, перенаправить

Два варианта:

<button type="button" onclick="location.replace('//css.shpargalkablog.ru'+(location.port?':'+location.port:'')+location.pathname)">удалить URL из истории посещений, открыть страницу с другим доменом</button>


<button type="button" id="raz1">удалить URL из истории посещений, открыть страницу с другим доменом</button>

<script>
document.getElementById('raz1').onclick = function() {
  var u = new URL(location);
  u.hostname = 'css.shpargalkablog.ru'; 
  location.replace(u);
}
</script>

Как перезагрузить страницу

<button type="button" onclick="location.reload()">обновить страницу из кэша (как F5)</button>


<button type="button" onclick="location.reload(true)">обновить страницу с сервера</button>

Как запретить показ страницы в iframe

Это плохой вариант:

<script>
if(top.location != location){
  top.location.replace(location);
}
</script>

В ответе заголовка сервера следует указать Content-Security-Policy.

Как перечислить всё свойства и методы у location


<button type="button" id="raz">получить список всех свойств и методов location</button>

<script>
document.getElementById('raz').onclick = function() {
    var a = '';
    for(var i in location) {
      a += i + ' = "' + location[i] + '";n'
    }
    alert(a);
}
</script>

Источник

Синтаксис

Примеры

Базовый пример

Пример №1: Переход на новую страницу

Пример №2: Принудительная перезагрузка текущей страницы с сервера

Пример №3

Пример №4: Отображение свойств текущего URL в диалоге alert

Пример №5: Отправка строки данных на сервер через изменение свойства search

Пример №6: Использование закладок без изменения свойства hash

Спецификации

Совместимость с браузерами

Смотрите также

Свойства window.location

Разница между host и hostname

Как изменить свойства URL

Объект Location

window.location vs location

Методы window.location

assign vs replace

Свойства объекта location

Методы объекта location

window.location

Описание, примеры

Объект Location

Свойства объекта Location

Методы объекта Location

Window Location Href

Window Location Origin

Window Location Protocol

Window Location Hostname

Window Location Port

Window Location Pathname

Window Location Search

Window Location Hash

Window Location Assign()

Window Location Reload()

Window Location Replace()

Window Location toString()

Пример

Location.href

Результат:

Location.protocol

Результат:

Location.port

Location.host

Результат:

Location.hostname

Результат:

Location.pathname

Результат:

Location.search

Результат:

Location.hash

Результат:

Узнать адрес страницы, открыть другую страницу в текущей вкладке

Редирект на JS: как заменить страницу в текущей вкладке

JavaScript переадресация

Разбить URL на части, изменить часть адреса страницы, перенаправить

Как перезагрузить страницу

Как запретить показ страницы в iframe

Как перечислить всё свойства и методы у location

Читайте также:

Объект `Location`

Свойства объекта `Location`

Методы объекта `Location`