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

Сегодня мы будем копировать ссылку в js. Естественно, что скопировать ссылку нам потребовалось не просто так! как впрочем и всегда! У нас есть отдельная тема, где мы немного пытаемся разобраться вообще с копированием в 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