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

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

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

Длинный путь познания начинается с первого шага!

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

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

Скачать скрипт 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 не будем, мы уже один раз это сделали!

И результат:

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

---

Вас может еще заинтересовать список тем : #JS | #JS_COPY |

---

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