Узнайте, как легко получить URL-адрес последней посещенной страницы в JavaScript.

Мы можем получить URL последней страницы в JavaScript с помощью свойства document.referrer.

Например:

const lastPageUrl = document.referrer;
console.log(`Last visited page URL: ${lastPageUrl}`);

document.referrer — это свойство только для чтения, которое возвращает URL-адрес страницы, используемый для перехода на текущую страницу.

Вот более практический пример:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Coding Beauty Tutorial</title>
  </head>
  <body>
    <a href="get-last-page.html">Link</a>
  </body>
</html>

получить последнюю страницу.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Coding Beauty Tutorial</title>
  </head>
  <body>
    You visited this page from: <span id="last-page"></span>
    <script src="get-last-page.js"></script>
  </body>
</html>

получить последнюю страницу.js

const lastPage = document.getElementById('last-page');
lastPage.textContent = document.referrer;

Ограничения document.referrer

Однако свойство document.referrer работает не всегда. Обычно он дает правильное значение в тех случаях, когда пользователь щелкнул ссылку на последней странице, чтобы перейти на текущую страницу.

Но если пользователь посетил URL-адрес напрямую, введя адресную строку или используя закладку, document.referrer не будет иметь значения.

document.referrer также не будет иметь значения, если нажатая ссылка была помечена атрибутом rel="noreferrer". Установка с rel на noreferrer специально предотвращает передачу реферальной информации на веб-страницу, на которую делается ссылка.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Coding Beauty Tutorial</title>
  </head>
  <body>
    <a href="get-last-page.html">Link</a>
    <a href="get-last-page" rel="noreferrer">Link (noreferrer)</a>
  </body>
</html>

Переход на последнюю страницу

Возможно, вы хотели бы получить URL-адрес последней страницы, чтобы вы могли перейти на эту страницу. Вы можете легко сделать это с помощью метода history.back().

получить последнюю страницу.js

...
const backButton = document.getElementById('back');
backButton.onclick = () => {
  history.back();
};

получить последнюю страницу.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Coding Beauty Tutorial</title>
  </head>
  <body>
    You visited this page from: <span id="last-page"></span> <br />
    <br />
    <button id="back">Back</button>
    <script src="get-last-page.js"></script>
  </body>
</html>

Первоначально опубликовано на codingbeautydev.com

Все сумасшедшие вещи, которые делает JavaScript

Увлекательное руководство по тонким предостережениям и менее известным частям JavaScript.

Зарегистрируйтесь и сразу же получите бесплатную копию.