Разница между window.location.href, window.location.replace и window.location.assign в JavaScript

Window.location — это свойство, которое возвращает объект Location с информацией о текущем местоположении документа. Этот объект Location представляет местоположение (URL) объекта, с которым он связан, т. е. содержит всю информацию о текущем местоположении документа (хост, href, порт, протокол и т. д.).

Все три команды используются для перенаправления страницы на другую страницу/веб-сайт, но различаются по своему влиянию на историю браузера.

Свойство window.location.href:

• Свойство href объекта location хранит URL-адрес текущей веб-страницы.
• При изменении свойства href пользователь может перейти к новому URL-адресу, т.е. перейти на новую веб-страницу.
• Он добавляет элемент в список истории (чтобы, когда пользователь нажимает кнопку «Назад», он мог вернуться на текущую страницу).
• Обновление свойства href считается более быстрым, чем использование функции assign() (поскольку вызов функции медленнее, чем доступ к свойству).

Синтаксис:

window.location.href = "https://www.geeksforgeeks.org";

Пример:

Выход:

Примечание . Следующие две строки кода выполняют ту же функцию.

window.location.replace Свойство:

• Функция замены используется для перехода к новому URL-адресу без добавления новой записи в историю.
• Как следует из названия, эта функция «заменяет» самую верхнюю запись из стека истории, т. е. удаляет самую верхнюю запись из списка истории, перезаписывая ее новой записью.
• Так, когда пользователь нажмет кнопку «Назад», он не сможет вернуться на текущую страницу.
• Следовательно, основное различие между методами assign() и replace() заключается в том, что функция replace() удалит текущую страницу из истории сеанса.
• Функция замены не стирает всю историю страниц и не делает кнопку «Назад» нефункциональной.

Синтаксис:

window.location.replace("https://geeksforgeeks.org/web-development/")

Пример:

Выход:

window.location.assign Свойство:

• Функция назначения аналогична свойству href, поскольку она также используется для перехода к новому URL-адресу.
• Однако метод assign не показывает текущее местоположение, он используется только для перехода в новое местоположение.
• В отличие от метода replace, метод assign добавляет новую запись в историю (чтобы при нажатии кнопки «Назад» пользователь мог вернуться на текущую страницу).
• Однако вместо обновления свойства href вызов функции считается более безопасным и читабельным.
• Метод assign() также предпочтительнее, чем href, поскольку он позволяет пользователю имитировать функцию и проверять входные параметры URL во время тестирования.

Синтаксис:

window.location.assign("https://geeksforgeeks.org/")

Пример:

Выход:

Разница между свойствами window.location.replace, window.location.assign и window.location.href: