Гиперссылки предыдущую страницу html

Onclick javascript to make browser go back to previous page?

Is there a function I can attach as a click event of a button to make the browser go back to previous page?

14 Answers 14

Add this in your input element

This doesn’t work in all browsers for me, I had to do the following This answer is quite old, so it could have been an issue introduced into more modern versions of browsers. 🙂

@Adrien — its javascript, so it is running in the browser. The browser should reuse cached page (assuming browser settings and page http header settings permit doing so).

Any idea why this not always working from the first time? It doesn’t seem that this question was answered so far.

Put this to the button onclick handle. It should look like this:

For Going to previous page

First Method

Second Method

if we want to more than one step back then increase

For going 2 steps back history.go(-2) For going 3 steps back history.go(-3) For going 4 steps back history.go(-4) and so on. 

@JeromeJ it is a link that does nothing if JavaScript isn’t enabled/working (for whatever reason) on the page. If JavaScript is working, it takes the browser back one page.

Like Wim’s and Malik’s answer, but just in one line.

Works fine, but oftentimes if user decides to change language on specific page with the button like this, the back button to previous page will turn the language back, instead of page.

I prefer the .go(-number) method as then, for 1 or many ‘backs’ there’s only 1 method to use/remember/update/search for, etc.

Also, using a tag for a back button seems more appropriate than tags with names and types.

You just need to call the following:

Access window.history and then call back()

This is the only thing that works on all current browsers:

the only one that worked for me:

function goBackAndRefresh() < window.history.go(-1); setTimeout(() =>< location.reload(); >, 0); > 

You could use one of the following :

history.back() or window.history.back()

You also go back to N number of pages with this one
history.go(-1)

Isn’t history.back() the same as history.go(-1) & window.history.back() ? Please do add a bit more of context

The window.history object can be written without the window prefix, that’s why history.back(), history.go(-1) & window.history.back() will do the same. but if we want to go back to N number of pages then history.go(-n) can use. example: history.go(-1) will go 1 page back from current, history.go(-2) will go 2 pages back from the current. Thanks Raphaël Balet.

Источник

Как сделать 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, …

Источник