Вы веб-разработчик и хотите улучшить навигационные возможности своего веб-приложения на основе JavaScript? Не смотрите дальше! В этой статье мы окунемся в увлекательный мир манипулирования URL-адресами с помощью JavaScript и рассмотрим различные методы достижения этой цели. Так что пристегните ремни и готовьтесь к увлекательному путешествию!

Метод 1: window.location.href
Давайте начнем с упомянутого вами сообщения об ошибке: «window.location.href не является функцией». Эта ошибка возникает, когда вы ошибочно пытаетесь рассматривать window.location.hrefкак функцию, а не как свойство. Помните, что window.location.href — это строка, представляющая текущий URL-адрес страницы. Вы можете прочитать или обновить его напрямую, например:

// Read the current URL
const currentURL = window.location.href;
console.log(currentURL);
// Redirect to a new URL
window.location.href = 'https://www.example.com';

Метод 2: window.location.assign()
Если вы предпочитаете метод, который больше похож на функцию, вы можете использовать window.location.assign(). Он служит той же цели, что и window.location.href, позволяя перейти к новому URL-адресу:

// Navigate to a new URL
window.location.assign('https://www.example.com');

Метод 3: window.location.replace()
Аналогично window.location.assign(), window.location.replace()позволяет перенаправить на новый URL-адрес. Однако у него есть одно ключевое отличие. При использовании replace()текущая страница заменяется в истории браузера, что не позволяет пользователям вернуться к ней с помощью кнопки браузера «Назад»:

// Replace the current URL with a new one
window.location.replace('https://www.example.com');

Метод 4: window.location.reload()
Теперь давайте рассмотрим метод перезагрузки текущей страницы. Вы можете добиться этого, используя window.location.reload(). Он перезагружает текущий URL-адрес, вызывая полное обновление страницы:

// Reload the current page
window.location.reload();

Метод 5: window.location.search
Иногда вам может потребоваться извлечь параметры запроса из URL-адреса. В таких случаях вы можете использовать window.location.search. Это свойство возвращает часть строки запроса URL-адреса, включая ведущий вопросительный знак:

// Get the query string from the URL
const queryString = window.location.search;
console.log(queryString);

Метод 6: window.location.hash
Свойство window.location.hashпозволяет манипулировать идентификатором фрагмента и получать к нему доступ (часть URL-адреса после символа #). ). Вы можете использовать его для прокрутки к определенным разделам страницы или для управления маршрутизацией на стороне клиента:

// Get the fragment identifier from the URL
const fragmentIdentifier = window.location.hash;
console.log(fragmentIdentifier);
// Set the fragment identifier
window.location.hash = 'section-1';

Метод 7: window.location.protocol, window.location.hostname, window.location.port
Если вам нужно извлечь определенные части URL-адреса, например протокол (httpили https), имя хоста или порт, вы можете использовать следующие свойства:

// Extract URL components
const protocol = window.location.protocol;
const hostname = window.location.hostname;
const port = window.location.port;
console.log(protocol);
console.log(hostname);
console.log(port);

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

Подводя итог, мы рассмотрели несколько методов манипулирования URL-адресами в JavaScript, включая window.location.href, window.location.assign(), window.location.replace(), window.location.reload(), window.location.search, window.location.hash, window.location.protocol, window.location.hostnameи window.location.port. Не забывайте использовать их с умом и в соответствии с требованиями вашего приложения.

Теперь, когда вы владеете этими ценными методами, приступайте к усовершенствованию своих веб-приложений с помощью удобной навигации!