Обновление текущей страницы без JavaScript и абсолютного пути

Быстрый ответ

Немедленное обновление страницы можно осуществить с помощью следующего HTML-кода:

<a href="javascript:void(0)" onclick="window.location.reload()">Перезагрузить страницу</a>

При нажатии на ссылку функция window.location.reload() производит обновление страницы, сохраняя её текущий адрес. Это имитирует поведение клиентских закладок.

Изучение различных подходов

Представленный "Быстрый ответ" – это лишь один из возможных способов обновления страницы. Давайте рассмотрим и другие методы.

Перезагрузка страницы с использованием href – HTML-решение

Если применение JavaScript нежелательно или вы предпочитаете строгое соблюдение HTML стандартов, можно прибегнуть к такому решению с атрибутом href:

<a href=".">Перезагрузить страницу</a>

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

Расширяем инструментарий

Существует множество подходов к решению задачи, которые могут расширить вашу "программистскую" копилку:

Динамическая перезагрузка: пример кода на стороне сервера

Для динамически создаваемых страниц применим серверный код, например, на PHP:

<a href="<?php echo $_SERVER["REQUEST_URI"]; ?>">Перезагрузить страницу</a>

Подробнее об этом расскажет наш спикер на видео

Использование пустых href

Отсутствующее значение атрибута href позволяет обновить страницу по умолчанию:

<a href="">Перезагрузить страницу</a>

Возвращаемся к JavaScript

Метод window.location.reload(true) обновляет страницу, обеспечивая загрузку последней версии с сервера:

window.location.reload(true);

Также можно обновить страницу, присвоив window.location.href текущее его же значение:

window.location.href = window.location.href;

Учет доступности и UX: без скриптов – без проблем

Мы учитываем потребности пользователей, для которых важна доступность сайта вне зависимости от наличия скриптов, предоставив альтернативные способы обновления страницы.

Обязанности создателей содержимого: учет сохранения данных

Важно помнить о том, что некоторые методы, вроде пустого href, могут привести к сбросу данных, переданных методом POST. Выбор подхода зависит от конкретной задачи.

Визуализация

Процесс обновления страницы можно сравнить с перезапуском любимого музыкального трека:

До: 🎵🕒 – Музыка звучит, трек на третьей минуте

<a href="javascript:location.reload()">🔄 Обновить композицию</a>

После: 🎵🕒➡️🎵🕛 – Музыка начинает звучать с начала

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

Переход по уровням каталога с помощью ".."

Две точки .. позволяют подняться на уровень выше в иерархии каталогов:

<a href="..">Перейти на уровень вверх</a>

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

Полезные материалы

1. Location: reload() method – Web APIs | MDN — Подробности о методе Location.reload() в JavaScript.
2. HTML a tag — Все возможности HTML-тега <a>.
3. How do I refresh a page using JavaScript? – Stack Overflow — Отзывы и рекомендации сообщества разработчиков по перезагрузке страницы с использованием JavaScript.
4. How to reload a page using JavaScript – Stack Overflow — Список эффективных способов для перезагрузки страницы с помощью JavaScript.
5. JavaScript Window Location — Обзор объекта window.location и его функций.