Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

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

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

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

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

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

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

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

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

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

  2. Подключаем скрипт для копирования ссылки 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>

  3. Копирование ссылки 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

  4. Копирование ссылки 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 |
Последняя дата редактирования : 2020-02-25 11:28
Название скрипта :Скопировать ссылку JS
Скрипт № 55.1Ссылка на скачивение: Все скрипты на одной странице
Теги:
скопировать ссылку скопировать ссылку Jsскопировать ссылку javascriptкопирование urlcopy link javascript

НАШИ ПРОЕКТЫ : Проекты находятся в разной степени готовности (просто их столько, что времени не хватает…) Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2020