- Как сделать HTML обратную ссылку?
- 12 ответов
- Как сделать кнопку «Вернуться назад» и скрыть её если нет истории переходов
- Способы создания кнопки «назад» на JavaScript
- Способ 1
- Способ 2
- Как скрыть кнопку «Вернуться назад» при прямом посещении
- Кнопка возврата назад на PHP
- Кнопка перехода «Назад» с дочерних страниц на родительскую для WordPress
- Где использовать кнопку «назад»
- Оставьте комментарий
- Из последнего
- Как удалить часть шаблона в редакторе сайта WordPress
- Как передать IP посетителей в Яндекс Метрику и Google Аналитику
- Оптимизация сайта WP с плагином LiteSpeed и QUIC.cloud
- Какие права доступа к файлам и папкам WordPress нужно установить и как исправить ошибку failed (13: Permission denied)
- Как установить XAMPP и WordPress на домашний компьютер
- How to create an HTML back button
- Using history.back
- Using history.go
- Related information
- Как сделать — Кнопки вперед и назад
- Кнопки вперед и назад
- Создать кнопки вперед и назад
- Пример
- Пример
- ВЫБОР ЦВЕТА
- Сообщить об ошибке
- Ваше предложение:
- Спасибо Вам за то, что помогаете!
Как сделать HTML обратную ссылку?
JavaScript — это клиентская технология, некоторые клиенты (например, я) просто отключают ее (по умолчанию). Это сила клиента! : D Но да, HTML не может самостоятельно определить, какой была предыдущая страница.
12 ответов
Это решение имеет преимущество отображения URL-адреса привязанной страницы при наведении курсора, как это делает большинство браузеров по умолчанию, вместо history.go(-1) или аналогичного:
Это также дает преимущество, заключающееся в том, что ссылающаяся страница открывается с атрибутом target=»_blank» в ссылке, чего не имеет history.go(-1) .
Недостатком этого решения является то, что вы не сможете вернуться более чем на одну страницу. Пример; перейти на страницы a, b, c, d — несколько раз нажать кнопку возврата c, d, c, d, c, d. Сравните это с .history.back () a, b, c, d несколько раз нажмите кнопку возврата d, c, b, a
Как сделать так, чтобы в случае отсутствия задней страницы, затем перенаправить на фиксированный URL history.back() || «myaction/mycontroller»
@orangesherbert Я обратился к этому в новом ответе (который также удовлетворяет требованию «показывать URL»).
Недостатком этого подхода является то, что стандартные функции браузера, такие как «навести курсор на URL» и щелчок правой кнопкой мыши -> копия, будут повреждены.
Я думаю, что это больше о семантике. Кнопка возврата назад более подходящая, чем ссылка возврата. Оба варианта хороши, и оба варианта верны по-своему.
Самый простой способ — использовать history.go(-1);
вы можете попробовать javascript
и отправьте элемент a в onmouseover, как следует
Вы можете объяснить это последнее редактирование? я просто хочу нормальную ссылку, как это показано в нижней части большинства браузеров.
так как все браузеры показывают все для этого, вам не нужно ничего делать, но если вы хотите показать это в своем собственном div, вы можете указать tabledescription div в tabledescription месте страницы, чтобы показывать ссылку при наведении tabledescription на тег привязки.
Обратная ссылка — это ссылка, которая перемещает браузер назад на одну страницу, как если бы пользователь нажал кнопку «Назад», доступную в большинстве браузеров. Обратные ссылки используют JavaScript. Он перемещает браузер на одну страницу, если ваш браузер поддерживает JavaScript (что он делает), и если он поддерживает объект window.history , который необходим для обратных ссылок.
В общем случае обратная ссылка не нужна. обычно кнопка «Назад» обычно достаточно хорошо, и обычно вы также можете просто ссылаться на предыдущую страницу на своем сайте. Однако иногда вам может потребоваться ссылка на одну из нескольких «предыдущих» страниц, а также там, где вам понадобится обратная связь. Поэтому я отсылаю вас ниже учебника, если вы хотите сделать это более продвинутым способом:
В отличие от решения с наибольшим количеством голосов, оно сохраняет позицию прокрутки, которую имел пользователь.
@Ketri, можешь ли ты поддержать заявление? они должны быть идентичны: w3schools.com/jsref/met_his_back.asp
Это решение дает вам лучшее из обоих миров
- Пользователи могут навести курсор мыши на ссылку, чтобы увидеть URL-адрес
- Пользователи не получают поврежденный back-stack
Подробнее в комментариях к коду ниже.
var element = document.getElementById('back-link'); // Provide a standard href to facilitate standard browser features such as // - Hover to see link // - Right click and copy link // - Right click and open in new tab element.setAttribute('href', document.referrer); // We can't let the browser use the above href for navigation. If it does, // the browser will think that it is a regular link, and place the current // page on the browser history, so that if the user clicks "back" again, // it'll actually return to this page. We need to perform a native back to // integrate properly into the browser history behavior element.onclick = function()
Потрясающий ответ. Я использую это почти во всех моих нокаут-проектах в контексте пользовательского связывания.
Отличный ответ! Я должен был добавить return false; к функции onclick в Chrome, чтобы предотвратить добавление текущей страницы в историю браузера.
Самый простой способ привязать ваш браузер к предыдущей странице.
Как сделать кнопку «Вернуться назад» и скрыть её если нет истории переходов
Из этой статьи вы узнаете, как сделать специальную кнопку возврата назад на JS или PHP, чтобы помочь заблудившимся посетителям попасть на предыдущую страницу. А также, как скрыть эту кнопку, если в браузере посетителя отсутствует история переходов по сайту.
Способы создания кнопки «назад» на JavaScript
Чтобы при нажатии кнопки заставить браузер переместиться на одну страницу назад, воспользуемся JavaScript методом history.back() . Объект history отвечает за историю переходов, которые пользователь совершил в переделах одной вкладки браузера. Эти переходы браузер сохраняет в сессию текущего окна. Если предыдущая страница отсутствует, данный вызов метода не делает ничего.
Способ 1
Самый простой способ сделать кнопку «назад» — прописать событие onclick wp-block-syntaxhighlighter-code «>
Способ 2
Несмотря на удобство 1 способа всё же правильнее будет настроить события из кода JavaScript методом addEventListener.
Скопируйте этот скрипт и вставьте его на нужную страницу.
В том месте, где требуется установить кнопку, добавьте HTML код:
Как скрыть кнопку «Вернуться назад» при прямом посещении
Если посетитель сделает прямой переход к странице содержащей кнопку «назад» и воспользуется этой кнопкой, то ничего не произойдёт, так как переходить будет некуда, либо его вернёт обратно на пустую вкладку. Поэтому логичнее будет эту кнопку скрыть.
Для этого будем использовать свойство history.length которое возвращает количество переходов (шагов) вперёд или назад, выполняемых в пределах текущей вкладки или окна.
Рассмотрим несколько возможностей history.length и поведение пользователя:
- Пользователь посещает страницу с новой вкладки браузера, тогда history.length = 2 . Если он кликнет по кнопке «назад», то перейдет на пустую вкладку.
- Пользователь открывает страницу на новой вкладке или окне, кликая по ссылке, тогда history.length = 1 . В этом случае возвращаться будет некуда, т.к. это новая сессия.
- Пользователь переходит на страницу после посещения нескольких страниц, в этом случае history.length > 2 и теперь мы можем ему показать кнопку «назад». В скрипте применим этот вариант.
Добавим кнопке класс, чтобы скрыть её при прямом заходе с помощью CSS, а когда посетитель выполнит переход с предыдущей страницы — удалим указанный класс методом classList.remove .
Скопируйте скрипт и вставьте на странице, где будет установлена кнопка. Если используете WordPress, то скрипт можно разместить в блоке «Произвольный HTML» редактора Гутенберг.
HTML код кнопки будет таким:
.history-hide < display: none!important; >#history-button
Ещё свойства объекта history, которые можно использовать для создания кнопок вперёд/назад:
- history.go(n) — свойство, позволяющее перемещаться по истории. В качестве аргумента передается смещение, относительно текущей позиции. Например, history.go(-2) вернёт вас на две страницы назад. Данный метод сработает только если страница, на которую нужно вернуться, существует в журнале;
- history.forward() — идентично вызову history.go(-1) , т.е. загружает следующую страницу, если она есть в истории. Можно использовать вместе с history.back() .
Кнопка возврата назад на PHP
Данный способ подходит для сайтов на PHP, в том числе и для WordPress. Установите этот код в файл с расширением .php в том месте, где требуется вывести кнопку:
В данном случае реферер, т.е. URL источника запроса, будет всегда пуст если страница загружается не по ссылке, а путем ввода URL-адреса в адресную строку, соответственно, кнопка не отобразится. Она появится когда реферер будет содержать адрес предыдущей страницы.
Кнопка перехода «Назад» с дочерних страниц на родительскую для WordPress
Если стоит задача установить на дочерних страницах кнопку «вернуться назад» с URL-адресом родительской страницы, скопируйте и вставьте в файл page.php этот код:
Где использовать кнопку «назад»
Кнопка «вернуться назад» особенно часто используют пользователи мобильных приложений и сайтов. Её можно добавить на промежуточные и дочерние страницы, на те страницы где отсутствует постраничная навигация и нет блоков с анонсами статей или карточек товаров.
Оставьте комментарий
Комментарии, считающиеся спамом или исключительно рекламные по своему содержанию, будут удалены. Допускается включение ссылки на соответствующий контент, но текст должен иметь отношение к теме поста. Также будут удалены анонимные, оскорбительные, содержащие ненормативную лексику, вводящие в заблуждение или клеветнические комментарии.
Для публикации кода в комментариях используйте следующие шорткоды —
[php]ваш код[/php] — для PHP, [css]ваш код[/css] — для CSS, [code lang=»js»]ваш код[/code] — для HTML или JS, указав соответствующий lang.
Из последнего
Как удалить часть шаблона в редакторе сайта WordPress
Если неиспользуемая часть шаблона в редакторе сайта WP не удаляется и появляется уведомление «Подходящий маршруту …
Как передать IP посетителей в Яндекс Метрику и Google Аналитику
Рассмотрим два варианта передачи IP посетителей сайта в Яндекс Метрику и Google Аналитику: через код …
Оптимизация сайта WP с плагином LiteSpeed и QUIC.cloud
Какие права доступа к файлам и папкам WordPress нужно установить и как исправить ошибку failed (13: Permission denied)
Как установить XAMPP и WordPress на домашний компьютер
Из этой пошаговой инструкции вы узнаете, как установить локальный веб-сервер XAMPP на операционную систему Windows, …
How to create an HTML back button
You can add a back button to your web page. When a visitor to your page clicks the button, they’re taken to the last page they visited, as if they clicked the back button in their browser.
You can accomplish this by editing the HTML (hypertext markup language) of your page, and adding a little JavaScript.
These buttons don’t work if the user has no browsing history. For example, if the user opens your page in a new browser tab or window, nothing happens when they click the button.
Using history.back
In a web browser, the built-in JavaScript object window has an object called history containing the URLs a user has visited in their current browser window. You can use the history.back() method to tell the browser to go back to the user’s previous page.
One way to use this JavaScript is to add it to the onclick event attribute of a button. Here, we create the button using a element, containing an element of the button type.
Insert the following HTML into your web page:
The result looks like the button below. If you click it, you go back to the previous page in your history.
Using history.go
The history.go() method tells the browser to go to a specific page in the user’s browsing history. You can specify which history item by putting a number inside the parentheses. With computer programming, this is called an argument.
If you specify the number -1 as your argument, the browser goes back one page in the browser’s history. Here’s the same code as above, using history.go(-1) instead of history.back().
Related information
- How to create an HTML push-button link.
- See our back and push-button definitions for further information and related links.
- See our and HTML element definitions for more examples of them in use.
- HTML and web design help and support.
Как сделать — Кнопки вперед и назад
Узнайте, как создать кнопки «вперед» и «назад» с помощью CSS.
Кнопки вперед и назад
Создать кнопки вперед и назад
Шаг 1) Добавить HTML:
Пример
Шаг 2) Добавить CSS:
Пример
a <
text-decoration: none;
display: inline-block;
padding: 8px 16px;
>
a:hover background-color: #ddd;
color: black;
>
.previous background-color: #f1f1f1;
color: black;
>
.next background-color: #4CAF50;
color: white;
>
Мы только что запустили
SchoolsW3 видео
ВЫБОР ЦВЕТА
Сообщить об ошибке
Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:
Ваше предложение:
Спасибо Вам за то, что помогаете!
Ваше сообщение было отправлено в SchoolsW3.
ТОП Учебники
ТОП Справочники
ТОП Примеры
Получить сертификат
SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.