Как скопировать адрес страницы в буфер обмена

Скрипт
Работа кнопки копирования текущей ссылки зависит от файла - clipboard.js. Это такая библиотека, которая и будет совершать весь процесс. Данный файл можно подключить указав на него ссылку на сторонний источник или скопировать его содержимое в свой файл и подключить из своего хостинга. Вот собственно сам файл, можно его таким подключить:
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script>

Подключать его нужно после библиотеки jQuery. Она должна быть подключена на вашем сайте, только после нее нужно добавлять скрипт.

После подключения clipboard.js, нужно добавить небольшой скрипт, что запустит исполнение библиотеки clipboard при нажатии определенной кнопки. Код совсем не большой, как его подключить, можете посмотреть в той же статье, упомянутой выше.
jQuery(document).ready(function($){
var url = document.location.href;
new Clipboard('.copy_link', {text: function(){ return url;}});
});

Скрипт работает так, что при нажатии на кнопку, ссылка копируется и ничего не происходит. Можно вывести сообщение об успешном копировании, чтобы посетитель понимал. что все хорошо. Тогда код будет выглядеть так:
jQuery(document).ready(function($){
var url = document.location.href;
new Clipboard('.copy_link', {text: function(){ return url;}});
$('.copy_link').click(function(){alert('Cсылка успешно скопирована в буфер обмена.');});
});

Вместо alert, можно добавить модальное окно или появление текста под кнопкой. Все зависит от вашей фантазии. Можете кастомизировать идею как хотите.

В скрипте, стоит обратить внимание на класс кнопки, по нажатию на которую будет копироваться ссылка. .copy_link - и есть класс кнопки, если захотите указать свой. смените его.

HTML разметка
Теперь в нужное место на сайте, где должна быть размещена кнопка, добавьте такую HTML разметку:
<span class="copy_link">Копировать ссылку</span>

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

CSS стили
Стили могут быть любыми, как пример использовать можно эти:
.copy_link{cursor:pointer;display:inline-block;padding:0 10px;line-height:25px;background:#fc0;color:#000;}
Теги:
скопировать адрес, буфер обмена, адрес страницы
Добавлено: 09 Апреля 2021 06:59:37 Добавил: Андрей Ковальчук Нравится 0
Добавить
Комментарии:
Нету комментариев для вывода...