hsunny study blog

클립보드 복사하기 본문

programming/javascript

클립보드 복사하기

헤써니 2017. 7. 9. 23:43

기존에 클립보드 복사에 이용했던 방식은 아래와 같다.


.

.

<script>

function CopyUrl(url) {

window.clipboardData.setData("Text",url);

}

</script>

.

.


[URL 복사하기]버튼을 클릭했을 때, CopyUrl(url)이 동작해서, url이 클립보드에 복사되도록 구현하고 싶었다.

익스플로러에선 아래와 같이 창이 뜨고, 액세스 허용(A)을 클릭하면, url이 복사가 됐지만, 크롬에선 내가 지정한 url이 복사되지 않았다.


<익스플로러에서 클립보드로 복사시 뜨는 알림창>


크롬에서 url이 복사되지 않는 이유를 찾아보았더니, 보안 이슈상 클립보드에 넣는게 되지 않는다고 한다.

따라서 크롬에서 url을 복사할 수 있는 방법을 알아냈다.

방법은 임시저장소(input태그 안에)에 값을 복사해뒀다가,그 값을 복사해서 Document.execCommand('copy')를 실행시키는거다.

명령어 copy를 입력하면 클립보드에 현재 선택 영역의 내용을 복사한다.

(*브라우저 호환성 확인: https://developer.mozilla.org/ko/docs/Web/API/Document/execCommand)



*Document.execCommand()란..

bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

반환값

명령어가 지원되지 않거나 활성화되어 있지 않으면 false Boolean 값을 반환합니다.


매개 변수

aCommandName: 실행해야할 명령어 이름 DOMString을 나타냄

aShowDefaultUI: 기본 사용자 UI가 나타나야하는지를 보여주는 Boolean 값(Mozilla에서는 구현되어 있지 않음)

aValueArgument: 입력 변수가 필요한 명령어(insertImage와 같이 삽입할 이미지의 URL이 필요한)의 경우 이 DOMString으로 정보를 전달함. 변수가 필요하지 않으면 null을 표기






사용 예)))

.

.

<body>

<input id='clip_tmp' type='text' style='position:absolute;top:-2000px;' />

<!-- type을 hidden으로 하면 copy(url)이 안된다. 위치를 조절하여 화면에서 보이지 않도록 한다. -->


  <script>

   function copy(url)) {

     $('#clip_tmp).var(url);

     $('#clip_tmp).select();

     var successful = document.execCommand('copy');

     if (successful) {

        alert('url 주소가 복사되었습니다.');

     } else {

        alert('url 주소가 복사되지 않았습니다.');

     }

  </script>

.

.


이 방법이면 웹 크롬, 익스플로러에서 모두 복사가 가능하다. 하지만 모바일까지 고려를 한다면 사파리 모바일에서 되지 않으니 다른 방법을 또다시 생각해보아야 할 것 같다.

저작자표시 비영리 변경금지

'programming > javascript' 카테고리의 다른 글

querySelector vs querySelectorAll vs getElementsByClassName  (0) 2019.06.25
sort()를 이용한 정렬  (0) 2019.06.17
배열 중복 요소 제거  (0) 2019.06.17
[TypeScript] setInterval() 사용하기  (0) 2018.09.11
Ajax  (0) 2017.07.22
'programming/javascript' Related Articles more