Как копировать ссылки с помощью javascript примеры

Поддержи проект!!!

Скопировать ссылку в javascript. Копирование ссылок из текста, из атрибута. Примеры скопировать текст по нажатию на кнопку! Естественно, что скопировать ссылку нам потребовалось не просто так! как впрочем и всегда! У нас есть отдельная тема, где мы немного пытаемся разобраться вообще с копированием в javascript .

Копировать ссылку в буфер обмена с помощью javascript

1. Скачать скрипт clipboard
2. Подключаем скрипт для копирования ссылки clipboard.
3. Копирование ссылки javascript которая выведена текстом
4. Копирование ссылки javascript из атрибута

Смотри еще: универсальная функция DwCopy

Скопировать ссылку

Скачать скрипт clipboard

Первым шагом к копированию ссылки нам нужен скрипт:

который распространяется пока бесплатно -> ссылка разработчика.

Чтобы не случилось с выше идущей ссылкой на сайт разработчика, мы добавили этот скрипт в свой каталог скриптов -> скачать


Скопировать ссылку

Подключаем скрипт для копирования ссылки clipboard.

Скачали скрипт для копирования, бросаем куда-тов папку на сервере с помощью ftp

<script src="путь до файла/2.0.0.clipboard.min.js"></script>

У нас код подключения вот такой:

<script src="https://dwweb.ru/__a-data/js/2.0.0.clipboard.min.js"></script>

И далее основной скрипт копирования ссылки:

<script>

var clipboard = new ClipboardJS('.toCopy');

clipboard.on('success', function(e) {

new_text = ('Text:', e.text); alert('Скопировано : ' + new_text);

e.clearSelection();

});

clipboard.on('error', function(e) {

alert('не скопировано');

});

</script>

Скопировать ссылку

Копирование ссылки javascript с id

Далее один из способов копирования ссылки - например у нас есть тег ссылки:

Необходимые условия для копирования ссылки из данного тега наличие id!

<a href="здесь ссылка..." target="_blank" id="my_copy">здесь текст ссылки</a>

Далее нам понадобится кнопка, которая и будет производить копирование!

Обязательное наличие class="toCopy" + data-clipboard-target="#my_copy", где my_copy - это ид из ссылки


<button class="toCopy" data-clipboard-target="#my_copy">Скопировать</button>

Теперь... соединим весь код для копирования вместе, как это должно выглядеть в коде(копировать ссылку будем там, где выделено красным!):

<script src="путь до файла/2.0.0.clipboard.min.js"></script>

<script>

var clipboard = new ClipboardJS('.toCopy');

clipboard.on('success', function(e) {

new_text = ('Text:', e.text); alert('Скопировано : ' + new_text);

e.clearSelection();

});

clipboard.on('error', function(e) {

alert('не скопировано');

});

</script>

<a href="здесь ссылка..." target="_blank" id="my_copy">здесь ссылка...</a>


<button class="toCopy" data-clipboard-target="#my_copy">Скопировать</button>

Результат;

https://dwweb.ru/page/js/019_ckopirovat_ssyilku_js.html
Нажми на меня, чтобы скопировать ссылку!
Скопировать ссылку

Копирование ссылки javascript из атрибута

Опять же будем использовать скрипт clipboard.js, теперь создадим, например кнопку - это не обязательно должна быть кнопка, можно просто див.

Нам снова понадобится класс - class="toCopy" и добавим в кнопку атрибут data-clipboard-text, созначением копируемой ссылки, итого у нас получилось:


<button class="toCopy" data-clipboard-text="https://dwweb.ru/page/js/019_ckopirovat_ssyilku_js.html#paragraph_5">Скопировать ссылку</button>

Второй раз объявлять и запускать clipboard.js не будем, мы уже один раз это сделали!

И результат:

Скопировать ссылку

---

Еще никто не прокомментировал! COMMENTS+   BBcode

🞨

Загрузить свой аватар

(max ширина, высота = 200px)

Подписаться + =

Теги:
скопировать ссылку скопировать ссылку Js скопировать ссылку javascript копирование url copy link javascript