X
  • Дизайн та розробка сайту
  • Дизайн і створення сайтів. Розробка тем для WordPress. Створення Landing Page.
  • office@gnatkovsky.com.ua
  • @vgnat
  • Написати мені
Замовити послугу

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

Приклад
  • 2024-03-19
  • 8870 переглядів

  • Дизайн та розробка сайту

Доброго времени суток. 🙂

Недавно создавалась новая тема для заказчика, где был поставлен вопрос как скопировать адрес страницы в буфер обмена. Нужно было добавить такую кнопку, чтобы посетитель нажав на нее получил ссылку текущей страницы. Данная функция довольно полезна, если у вас есть кнопки шаринга в социальных сетях. Кнопка с копированием ссылки хорошо впишется к ним, если человек просто хочет отправить, а среди ваших кнопок нет нужной ему социальной сети. Когда-то я уже делал подобное и у меня была заготовка. Пытался найти новый рабочий метод, но как показала практика, данный все же лучший из всех. И так приступим.

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

Скрипт

Работа кнопки копирования текущей ссылки зависит от файла - 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;}

Пример того что получится в итоге можно посмотреть и скачать тут:



Пример



Скачать

На этом все, спасибо за внимание. 🙂

Якщо Вам була корисна моя праця, можете фінансово підтримати сайт або відключити блокувальник реклами, що займе 2 хвилини :)

Хочу підтримати фінансово Хочу відключити блокувальник

Оцініть статтю
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 3, в среднем: 5 из 5
Читайте також