PHP функция замены прямых ссылок на JS с подтверждением перехода.
Содержание:
- Описание идеи замены прямых ссылок в тексте страницы.
- PHP функция замены прямых внешних ссылок
- JS код подтверждения перехода ро ссылке с применением SweetAlert.
- Стилизация конструкции перехода под привычную ссылку
- DEMO
При публикации контента на сайте часто требуется чтобы прямые ссылки в тексте заменялись на javascript конструкции, осуществляющие переход по внешней ссылке с предупреждением и подтверждением о таком действии. Такая необходимость обычно появляется при запуске комментариев на сайте, где пользователи естественно будут выкладывать ссылки на сторонние ресурсы в качестве подтверждающих источников или по любой другой мотивации. Можно просто отфильтровать ссылки удалением тегов через функцию strip_tags($html). Такие методы скорее всего сильно ограничат возможности пользователей по комментированию, а часть из них просто откажется поддерживать диалог. Но и благотворительность, в форме раздачи бесплатных прямых ссылок, крайне расточительна и даже опасна - спамеры, как пить дать, в два счёта сделают линкопомойку. Исходя из пожеланий - дать возможность пользователям ставить ссылки на внешние ресурсы и не отдавать за красивые слова репутацию сайта, появилась задача из следующих составляющих:
- Заменить ссылки на строковой тег span и
- Перед переходом на внешний ресурс будет выведено диалоговое окно для подтверждения или отказа перехода.
- Новая конструкция должна иметь стилистику обычных ссылок.
Сначала пишем PHP функцию замены прямых внешних ссылок:
JS код подтверждения перехода по ссылке с применением SweetAlert.
//Подключаем библиотеку sweetalert
<script src="lib/sweetalert/sweetalert2.all.min.js"></script>
//Подключаем стили sweetalert
<link rel='stylesheet' href='lib/sweetalert/sweetalert2.min.css' />
<script type="text/javascript">
function goRelink(url){
Swal.fire({//вызываем sweetalert окно
imageUrl: './img/exclamation_mark_a-90.gif', //иконка предупреждения
imageHeight: 90,
imageAlt: 'Внимание!',
title: 'Вы переходите по внешней ссылке!',
showDenyButton: true,
showCancelButton: true,
confirmButtonText: 'Перейти',
cancelButtonText:'Не переходить',
}).then((result) => {
if (result.isConfirmed) {
window.open(url, '_blank'); //осуществляем переход с новой вкладкой
Swal.fire('До свидания!', '', 'success')
} else if (result.dismiss === Swal.DismissReason.cancel) {
Swal.fire({
icon: 'info',
title: 'Переход отменён!',
showConfirmButton: false,
timer: 1500
})
}
})
}
</script>ПАМЯТКА! Обязательно скачивайте только проверенный дистрибутив библиотеки SweetAlert. Замечено заражение файлов политической рекламой. Или можете скачать эту рабочую версию.
Осталось только немного стилизировать новую конструкцию.
/* Стили внешних ссылок */
.goRelink{
color: blue;
cursor: pointer;
border-bottom: 1px dashed blue;
}
.goRelink:hover{
color: red;
border-bottom: 1px dashed red;
}ТОП 10 случайных публикаций
Последние публикации
