JavaScript – Подтверждение клика по ссылке.
Иногда, во избежание случайного клика по ссылке нам требуется обеспечить согласие пользователя на этот переход. Наблюдать подобное поведение можно например на сайте вконтакте, где при клике на ссылку, размещенную другим пользователем, сайт предупредит о возможной опасности перехода по ссылке и попросит подтверждения того, что переход запланирован пользователем и он осознает риски. Я хочу предложить два варианта реализации такой функциональности:
- Без создания дополнительных страниц, чистый JavaScript. Вариант простой но не дающий возможности кастомизации всплывающего окна запроса подтверждения.
- С созданием дополнительных страниц. Вариант посложнее, но теперь внешний вид окна запроса и отображаемые на нем данные – полностью в нашей власти.
Первый вариант основан на использовании атрибута onclick элемента <a>. Как известно, если вначале атрибута onclick записать ключевое слово return, то браузер продолжит переход по ссылке только если функция вызываемая в onlick возвратит true.
Для формирования диалогового окна запроса подтверждения используем стандартный диалог confirm, которому в качестве аргумента подается сообщение, отображаемое пользователю, сам же диалог, помимо сообщения будет содержать кнопки “OK” и “Cancel”.
<a href='http://yandex.ru' onclick='return confirm("Вы уверены,
что хотите покинуть сайт?")'>Перейти на Яндекс</a>
Проверьте, как это работает прямо на этой странице, щелкните на следующую ссылку:
Второй вариант чуть посложнее:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Leave this page</title>
<script type='text/javascript'>
function redirect(link) {
link.href = 'redirect.htm?' + link.href + '&' + window.location;
}
</script>
</head>
<body>
<a href='http://yandex.ru' onclick='redirect(this)'>
Перейти на Яндекс</a>
</body>
</html>
Итак, здесь мы видим, что ссылка в атрибуте onlcik содержит вызов функции redirect(), которой в качестве аргумента передается указатель на гиперссылку в документе. Сама же функция просто заменяет атрибут src гиперссылки на вызов страницы redirect.htm, которой в качестве QueryString передает треубемый URL перехода и URL текущей страницы, чтобы пользователь мог на нее вернуться, если передумает уходить.
(Я сделал передачу URL собственной страницы, а не использовал history.back() потому что при работе в FireFox неверно формировалась ссылка на предыдущую страницу при нескольких рекурсивных переходах туда-обратно)
А вот и сама страница redirect.htm, здесь все просто:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Redirect page</title>
</head>
<body>
Вы собираетесь покинуть сайт и перейти на страницу <span id='urltext'></span>.<br/>
Если Вы хотите перейти на эту страницу - кликните <a id='redirectlink'>
эту ссылку</a>. <br/>
Или <a id='backlink'>вернитесь назад</a>.
<script type='text/javascript'>
var urls = location.search.substring(1,location.search.length)
.split('&');
document.getElementById('urltext').innerHTML = urls[0];
document.getElementById('redirectlink').innerHTML = urls[0];
document.getElementById('redirectlink').href = urls[0];
document.getElementById('backlink').href = urls[1];
</script>
</body>
</html>
Как видим, скрипт, вызываемый после загрузки страницы, просто разбивает QueryString (location.search), на отдельные URL-ы и подставляет их в шаблон. Посмотрите, как это работает, щелкнув на ссылку ниже:
Перейти на Яндекс
Все просто.
А как сделать чтобы все ссылки на посторонние сайты сразу не открывались, а сначало выводилась страница redirect.htm?
Иван, September 9, 2012 9:59 pm
Так а статья-то об этом и есть. Последний вариант как раз и отображает не ссылку на Яндекс, а ссылку на страницу redirect. В чем проблема-то?
Вячеслав Гринин, September 10, 2012 8:05 pm
Благодарю. Постоянно, блин, забываю этот confirm(), постоянно гуглю))
Дима, October 9, 2013 7:33 am
Здравствуйте! Скажите пожалуйста,если использовать код: Перейти на Яндекс
Поисковики видят сайт куда будет переходить человек?
Антон, December 18, 2013 3:06 am
Здравствуйте, Антон.
Почитайте, пожалуйста, вот здесь http://help.yandex.ru/webmaster/site-indexing/links-to-website.xml#missing-links , у Яндекса все очень хорошо написано, в том числе и про nofollow.