Как сделать HTML обратную ссылку?


288

Какой самый простой способ создать <a>тег, который ссылается на предыдущую веб-страницу? В основном смоделированная кнопка назад, но фактическая гиперссылка. Только клиентские технологии, пожалуйста.

Изменить
Поиск решений, которые имеют преимущество в отображении URL-адреса страницы, на которую вы собираетесь щелкнуть при наведении курсора, как обычная статическая гиперссылка. Я бы предпочел, чтобы пользователь не смотрел history.go(-1)при наведении на гиперссылку. Лучшее, что я нашел до сих пор:

<script>
  document.write('<a href="' + document.referrer + '">Go Back</a>');
</script>

Это document.referrerнадежно? Кроссбраузерный сейф? Я буду рад принять лучший ответ.


2
JavaScript - это клиентская технология, некоторые клиенты (например, я) просто отключают ее (по умолчанию). Это сила клиента! : D Но да, HTML не может самостоятельно определить, какой была предыдущая страница.
animuson

Ответы:


514

И еще один способ:

<a href="javascript:history.back()">Go Back</a>


9
И для кнопки:<button type="button" onclick="javascript:history.back()">Back</button>
Лев

1
Недостатком этого подхода является то, что стандартные функции браузера, такие как «навести курсор на URL» и щелчок правой кнопкой мыши -> копия, будут повреждены.
Вивек Махарадж

Я думаю, что это больше о семантике. Кнопка возврата назад более подходящая, чем ссылка возврата. Оба варианта хороши, и оба варианта верны по-своему.
Джасприт Сингх

111

Преимущество этого решения заключается в отображении URL-адреса страницы, на которую указывает ссылка, при наведении курсора, как это делают большинство браузеров по умолчанию, вместо history.go(-1)или аналогично:

<script>
    document.write('<a href="' + document.referrer + '">Go Back</a>');
</script>

9
Это также имеет преимущество в том, что ссылающаяся страница открыта с target="_blank"атрибутом в ссылке, чего history.go(-1)нет.
Крис Кричо

4
Это решение теряет часть ссылки после #, javascript: history.back () работает правильно.
Ливиу

16
Недостатком этого решения является то, что вы не сможете вернуться более чем на одну страницу. Пример; перейти к страницам a, b, c, d - несколько раз нажать кнопку возврата c, d, c, d, c, d. Сравните это с .history.back () a, b, c, d несколько раз нажмите кнопку возврата d, c, b, a
atreeon

Как сделать так, чтобы в случае отсутствия задней страницы, затем перенаправить на фиксированный URLhistory.back() || "myaction/mycontroller"
гнездо

@orangesherbert Я обратился к этому в новом ответе (который также удовлетворяет требованию «показывать URL».
Вивек Махарадж

44

Самый простой способ - это использовать history.go(-1);

Попробуй это:

<a href="#" onclick="history.go(-1)">Go Back</a>


42

Вы можете попробовать JavaScript

<A HREF="javascript:history.go(-1)">

см. JavaScript кнопку «Назад»

РЕДАКТИРОВАТЬ

отображать URL ссылки http://www.javascriptkit.com/javatutors/crossmenu2.shtml

и отправьте элемент a в onmouseover следующим образом

function showtext(thetext) {
  if (!document.getElementById)
    return
  textcontainerobj = document.getElementById("tabledescription")
  browserdetect = textcontainerobj.filters ? "ie" : typeof textcontainerobj.style.MozOpacity == "string" ? "mozilla" : ""
  instantset(baseopacity)
  document.getElementById("tabledescription").innerHTML = thetext.href
  highlighting = setInterval("gradualfade(textcontainerobj)", 50)
}
 <a href="http://www.javascriptkit.com" onMouseover="showtext(this)" onMouseout="hidetext()">JavaScript Kit</a>

проверьте jsfiddle


Вы можете объяснить это последнее редактирование? я просто хочу нормальную ссылку, как это показано в нижней части большинства браузеров.
Пейсли

поскольку все браузеры показывают все для этого, вам не нужно ничего делать, но если вы хотите показать это в своем собственном div, вы можете указать div в tabledescriptionлюбом месте страницы, чтобы показывать ссылку при наведении курсора на тег привязки
Hemant Metalia

40

Это решение дает вам лучшее из обоих миров

  • Пользователи могут навести курсор на ссылку, чтобы увидеть URL
  • Пользователи не получают поврежденный бэк-стек

Подробнее в комментариях к коду ниже.

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's history behavior
element.onclick = function() {
  history.back();
  return false;
}
<a id="back-link">back</a>


Потрясающий ответ. Я использую это почти во всех моих нокаут-проектах в контексте пользовательского связывания.
pimbrouwers

Отличный ответ! Мне пришлось добавить return false;функцию onclick в Chrome, чтобы она не добавляла текущую страницу в историю браузера.
Маршал Моррис

25

Для возврата на предыдущую страницу с использованием тега привязки <a>ниже представлены 2 метода работы, из них 1-й является более быстрым и имеет одно большое преимущество при переходе на предыдущую страницу.

Я попробовал оба метода.

1)

<a href="#" onclick="location.href = document.referrer; return false;">Go Back</a>

Выше метод (1) отлично работает, если вы нажали на ссылку и открыли ссылку в новой вкладке в текущем окне браузера.

2)

<a href="javascript:history.back()">Go Back</a>

Выше метод (2) работает нормально только если вы нажали на ссылку и открыли ссылку в текущей вкладке в текущем окне браузера.

Это не будет работать, если у вас есть открытая ссылка в новой вкладке. Здесь history.back()не будет работать, если ссылка открыта в новой вкладке веб-браузера.


18

Обратная ссылка - это ссылка, которая перемещает браузер назад на одну страницу, как если бы пользователь нажал кнопку «Назад», доступную в большинстве браузеров. Обратные ссылки используют JavaScript. Он перемещает браузер на одну страницу назад, если ваш браузер поддерживает JavaScript (что он делает) и если он поддерживает window.historyобъект, который необходим для обратных ссылок.

Простые способы

<a href="#" onClick="history.go(-1)">Go Back</a>

ИЛИ:

function goBack() {
  window.history.back()
}
<a href="#" onclick="goBack()" />Go Back</a>

Вообще говоря, обратная ссылка не обязательна… обычно достаточно кнопки «Назад», и обычно вы также можете просто сослаться на предыдущую страницу вашего сайта. Однако иногда вы можете захотеть предоставить ссылку на одну из нескольких «предыдущих» страниц, и здесь обратная ссылка пригодится. Поэтому я рекомендую вам учебник ниже, если вы хотите сделать это более продвинутым способом:

http://www.htmlcodetutorial.com/linking/linking_famsupp_108.html


2
В отличие от решения с наибольшим количеством голосов, оно сохраняет позицию прокрутки, которую имел пользователь.
Кетри

@Кетри, можешь ли ты поддержать заявление? они должны быть идентичны: w3schools.com/jsref/met_his_back.asp
FarO



1

Вы также можете использовать history.back()рядом, document.write()чтобы показать ссылку, только когда есть куда вернуться:

<script>
  if (history.length > 1) {
    document.write('<a href="javascript:history.back()">Go back</a>');
  }
</script>

document.writeпереписывает все на странице. Почему бы вам когда - нибудь использовать это?
jpaugh

Вы должны выполнить этот скрипт, пока страница еще загружается.
Леонид Васильев

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.