여씨의 개발이야기

[실무] 현재 페이지 링크 복사하는 법 본문

🐾 Programming Lang/🛸 Javascript

[실무] 현재 페이지 링크 복사하는 법

yeossi 2022. 1. 28. 09:17

요즘 여러 사이트를 보면 현재 페이지의 링크를 복사하는 버튼이 기본적으로 있는 편이다. 필자도 웹사이트를 만들면서 링크를 복사를 해야하는 상황이 생겨 어떻게 복사를 해야 할 지 고민을 해보게 되었다. 

textarea를 임시로 추가해 링크를 복사 및 붙여넣기를 한 뒤에 다시 body에서 삭제하는 방법을 알아내었다. 아래의 소스참고하도록 한다.

    const linkCopy = () => {

        var url = '';
        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이 복사되었습니다.")
    }
    ...
<div className='button yellow' onClick={() => { linkCopy() }}>링크 공유하기</div>

 

Comments