현재 주소 복사하는 코드 - 공유버튼 만들기 > 웹제작/운영

사이트 내 전체검색
[멀티검색] 먼저 왼쪽 검색창에 검색어를 입력하세요.
  • 네이버
  • 다음
  • 구글
  • 유튜브
  • 랜덤Go
[멀티검색] 먼저 왼쪽 검색창에 검색어를 입력하세요.
  • 네이버
  • 다음
  • 구글
  • 유튜브
  • 랜덤Go

웹제작/운영

SCRIPT 현재 주소 복사하는 코드 - 공유버튼 만들기

페이지 정보

profile_image
작성자 키스세븐
조회 1,056회 작성일 22-04-03 14:09

본문

현재 주소 복사

공유버튼 만들기

 

SNS가 발달하면서 점점 공유버튼의 중요성이 높아지고 있다. 이것은 결국 사이트 홍보와도 연결되므로 중요한 것이다. 

버튼을 클릭하면 현재 보고 있는 페이지의 주소가 복사되도록 하는 코드를 알아본다. 

버튼을 클릭한 후 다른 브라우저에서 붙여넣기를 해 보면 바로 결과를 확인할 수 있다. 

 

 

현재 주소 복사하는 코드 - 자바스크립트 주소 복사 방법

 

 

주소 복사 기본 구조

 

아래처럼 구성한 후 필요한 부분을 바꾸면 된다. 우선 자바스크립트 함수 부분을 만들어 넣는다.

[code]

<script language='javascript'>

  function 대표이름(){

        var dummy   = document.createElement("임시대상");

        var text    = location.href;        

        document.body.appendChild(dummy);

        dummy.value = text;

        dummy.select();

        document.execCommand("copy");

        document.body.removeChild(dummy);

    }

</script>

[/code]

대표이름은 아무 거나 정해도 된다. 핵심은 var text = location.href;로 현재 페이지의 주소를 복사하는 코드다.

임시대상이란, 주소를 잠간 저장했다가 없애버리는 역할을 한다. 중간에 dummy란 것이 있다. 바로 그것을 말한다. dummy.value는 글자로만 저장하라는 뜻이다. 

 

document.execCommand("copy");라는 부분이 실질적으로 복사를 하라는 명령이다.

문제는 execCommand("copy")이다. 이것은 원래는 드레그된 것을 복사하는 것이다. 그래서 임시로 textarea를 만들어서 선택하는 과정을 스크립트 코드에 넣은 것이다.

 

이 코드를 넣었다면, 그 아래에 복사하는 공유버튼을 넣어서 처리하면 된다.

[code]

<button onclick="대표이름()">COPY</button>

[/code]

여기서 중요한 것은, 위의 스크립트에서 정한 대표이름과 같은 것을 정해줘야 한다는 것이다.  

 

 

현재 주소 복사하기 예제

 

그렇다면, 이제는 Clipboardcopy라는 이름으로 복사를 실행시키는 예제를 보며 비교해 보자.

여기서는 임시로 textarea를 만들어서 복사한 후, 없애버린다.

[code] 

<script language='javascript'>

  function Clipboardcopy(){ // Clipboardcopy라는 함수 이름을 정했다.

        var dummy   = document.createElement("textarea"); // 임시로 textarea를 만든다.

        var text    = location.href; // 현재 페이지의 주소를 저장한다.

        

        document.body.appendChild(dummy); // 문서의 마지막에 임시로 추가한다.

        dummy.value = text; // 저장값을 텍스트로만 한다.

        dummy.select(); // 마지막에 추가한 부분을 선택한다.

        document.execCommand("copy"); // 복사한다.

        document.body.removeChild(dummy); // 임시로 추가했던 것을 없애버린다.

    } 

</script>

 

<button onclick="Clipboardcopy()">COPY</button> <!-- 카피 버튼을 누르면 위에 있는 Clipboardcopy라는 함수를 실행시킨다.-->

[/code]

 

여기서는 버튼을 누르면 임시로 만든 textarea의 내용을 복사하는 방법을 사용했다. 

하지만 여러 가지로 활용하다 보면, var copyText = document.getElementById("Input"); 처럼 사용할 수도 있다. [저작권법 표시] 원본 출처 : 키스세븐(www.kiss7.kr)

가장 중요한 것은 document.execCommand("Copy"); 부분이니 기억해 놓자.

추천0
총 87개 (1Page)
  • RSS
웹제작/운영 목록
번호 제목 조회 추천 날짜
공지 공지 456 0 03-26
86 그누보드 323 0 02-25
85 그누보드 1335 0 10-17
84 SCRIPT 619 0 10-17
83 CSS 630 0 09-10
82 PHP 1101 0 08-26
81 PHP 661 0 08-21
80 기타활용 600 0 08-15
79 그누보드 1139 0 08-05
78 CSS 844 0 08-04
77 HTML 1592 0 07-24
76 그누보드 441 0 07-24
75 HTML 764 0 07-21
74 CSS 677 0 07-18
73 그누보드 630 0 07-09

검색


    허브사이트 "키스세븐"
    [허브사이트란?]
    수많은 사이트와 포털을
    한 번에 모아서
    사용할 수 있는 서비스를 말합니다.