Наверняка вы сталкивались с ситуацией, когда при копировании текста с какого-то сайта после этого самого текста была ссылка на источник. С одной стороны, это раздражает, когда вы пишите реферат и вам не нужны источники в самом тексте, с другой - вы понимаете, что это способ создателя сайта, с которого вы текст скопировали, оставить информацию о своем авторском праве.
Когда вы становитесь владельцем собственного сайта, то уже думаете о том, как добавить ссылку на ваш сайт уже при копировании вашего текста. Как будет видно из этой статьи, сделать это довольно просто с помощью JavaScript, да еще и двумя способами.
Способ 1. Используем метод window.getSelection()
Вставить ссылку на сайт и/или копирайт можно на основе JavaScript-кода с помощью метода window.getSelection().
Сначала мы получаем скопированный текст, вставляем его в div, сгененированный "на лету" с помощью метода document.createElement(), но при этом еще добавляем в него текст со ссылкой на ваш сайт. В этом нам поможет замечательный объект window.location.
Этот div, кстати, нельзя увидеть за счет добавленных к нему свойств в виде абсолютного позиционирования и координатой left с большим смещением влево за пределы браузера.
Затем мы сразу удаляем сгенерированный div, но человек, скопировавший текст, уже получает его с нашей "добавкой"-ссылкой.
Кстати, происходят все эти действия при обработке события oncopy.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | function addSiteLink() { const bodyElement = document.body; let selection = window.getSelection(); let pagelink = `<br /><br /> Источник: <a href="${location.href}">${location.href}</a><br />©${location.hostname}`; let copytext = selection + pagelink; let newdiv = document.createElement('div'); newdiv.style.position='absolute'; newdiv.style.left='-99999px'; newdiv.innerHTML = copytext; bodyElement.appendChild(newdiv); selection.selectAllChildren(newdiv); window.setTimeout(function() { bodyElement.removeChild(newdiv); },0); } document.oncopy = addSiteLink; |
Вместо свойства location.href можно использовать свойство document.URL.
Способ 2. Используем метод event.clipboardData.setData()
Для события oncopy можно получить данные о копировании. Для этого в объекте Event есть свойство clipboardData и метод setData(), позволяющий добавить текст или html-разметку в зависимости от типа данных, из скопированного текста в буфер обмена. На основе использования этого метода мы также можем сгенерировать ссылку на наш сайт.
JavaScript-код для добавления ссылки на сайт:
| 1 2 3 4 5 6 | document.addEventListener('copy', (event) => { const selection = window.getSelection(); const text = selection.toString(); event.clipboardData.setData('text/plain', `${text}\nИсточник: ${location.href}`); event.preventDefault(); }); |
Здесь, как вы видите, мы тоже используем метод window.getSelection() для получения скопированного текста.
Попробуйте скопировать текст этой статьи и вставить в какой-нибуть текстовый файл. Вы также увидите ссылку на данную статью :))
Вместо резюме
Если вы предоставляете какую-то общеизвестную информацию, задумайтесь, стоит ли внедрять этот код для массы людей, которые будут эту информацию копировать, например, в учебных целях. Другое дело, если у вас новостной сайт или сайт с уникальным контентом.
