Edge 브라우저도 지원하는 클립보드 복사를 위한 자바스크립트 코드
제 웹 사이트에서 글 읽기를 해보면, 제목 옆에 "링크 복사"라는 것을 두었습니다. Internet Explorer까지만 해도 그 버튼을 누르면 클립보드에 복사할 수 있었는데 Edge 웹 브라우저로 오면서 그 기능이 동작하지 않게 되었습니다.
이제 좀 바뀌었을까 싶어서 검색해 봤더니... ^^ 오호, Edge까지 지원하는 클립보드 자바스크립트 코드가 있습니다. ^^
clipboard.js
; https://clipboardjs.com/
; https://github.com/zenorocha/clipboard.js
적용도 매우 쉽습니다.
다음의 압축 파일을 받아 해제하고,
clipboard.js
; https://github.com/zenorocha/clipboard.js/archive/master.zip
/dist 폴더에 있는 clipboard.min.js 파일을 복사해 여러분들의 웹 사이트에 추가하고, 원하는 페이지에 script 태그로 연결합니다.
<script type="text/javascript" src="/scripts/clipboard.min.js"></script>
그다음, 사용자가 click 동작을 했을 때 클립보드로 텍스트를 복사할 HTML 요소를 명시하는 스크립트를 작성합니다.
<span id="clipboardButton" data-clipboard-text="test is good"" style="cursor: pointer">복사</span>
<script type="text/javascript">
var clipboard = new Clipboard('#clipboardButton');
</script>
위의 스크립트는 span 영역을 사용자가 마우스로 누르면, 즉 "복사"라는 텍스트를 마우스로 누르면 span 태그 내 "data-clipboard-text" 요소의 텍스트인 "test is good" 문자열을 클립보드로 복사해 줍니다. (그 외에도 다양한 문자열 복사 방식을 지원하는데 자세한 것은
문서를 참고하세요.)
이 라이브러리는
Selection과 execCommand API에 의존한다고 하는데, Selection의 경우 현재 모든 브라우저에서 지원된다고 하며 execCommand의 경우 Chrome 42+, Edge 12+, Firefox 41+, IE 9+, Opera 29+, Safari 10+에서 지원한다고 합니다.
그런데, Edge에 버전이 있었나요?
확인해 보니까 Settings 부분에 다음과 같이 EdgeHTML이라는 것으로 14.14393이라는 버전이 있습니다.
아마도 저것이 Edge의 버전이 아닐까 싶습니다. ^^
[이 글에 대해서 여러분들과 의견을 공유하고 싶습니다. 틀리거나 미흡한 부분 또는 의문 사항이 있으시면 언제든 댓글 남겨주십시오.]