Dev Blog

스크립트 & 소스코드 공유

실무에서 유용하게 쓰는 스크립트와 코드 조각을 블로그 게시판으로 저장하고 공유합니다.

JAVASCRIPT 현재 페이지 URL을 클릭 한 번으로 복사하는 방법 (JavaScript)

페이지 정보

조회 159회 작성일 22-02-11 12:41
버튼 클릭 한 번으로 현재 페이지 URL을 클립보드에 복사하는 JavaScript 방법이다. a 태그의 onclick으로 함수를 호출하고, 함수 안에서 임시 textarea 요소를 만들어 현재 주소(location.href)를 넣은 뒤 document.execCommand("copy")로 복사하고 textarea를 제거한 다음 알림창을 띄운다. 전체 HTML·JS 코드를 단계별로 설명한다.

HTML에서 버튼 생성과 스크립트에서 코드 몇줄이면 간단히 만들 수 있습니다.

HTML

a태그를 통해 onclick으로 함수를 호출합니다.

저는 URL주소복사란 이름의 버튼을 A태그를 통해 만들 예정입니다.

<span class="button gray medium"><a href="#" onclick="clip(); return false;">URL주소복사</a></span>

JAVASCRIPT

a태그에서 호출한 함수인 clip을 작성해줍니다.

url을 변수로 만들고

textarea라는 변수에 textarea의 요소를 생성해줍니다.

이 것을 body의 가장 아래, 즉 </body> 바로 위에 textarea를 추가해줍니다.

(임시 공간이기 때문에 위치는 상관이 없습니다.)

url에는 현재 주소값을 넣어줍니다.

textarea 값에 url를 넣어주고,

textarea를 설정합니다.

그리고 document.execCommand("copy"); 메서드를 사용하면 복사가 됩니다.

그리고 마지막으로 textarea 요소를 없애주고,

복사되었다는 알림창을 띄우면 끝입니다.

<script type="text/javascript">
function clip(){
var url = "<?php echo $_SERVER['SERVER_NAME']?>";
var textarea = document.createElement("textarea");
document.body.appendChild(textarea);
url = window.document.location.href;
textarea.value = url;
textarea.select();
document.execCommand("copy");
document.body.removeChild(textarea);
alert("URL이 복사되었습니다.")
}
</script>


Let's create something great together.

프로젝트 문의 및 견적 요청은 언제든 환영합니다.