클립보드에 URL 복사 기능

Jiwon Lee·2023년 5월 18일

현재 주소를 복사하려면 window.location.href를 사용하면 되지만 나는 공유용 url을 따로 만들어야 하기 때문에 location.host를 사용해서 직접 연결해줬당

원래는 execCommand()를 사용했었는데 표준에서 삭제되어 navigator.clipboard를 사용해야 하는데 사용 불가능한 브라우저가 있긴 한 것 같아서 두 가지 경우로 나눠서 작성해줬다

그런데 처음에 코드 작성하고 돌려보니깐 갑자기 domexception: document is not focused. 라는 에러가 떠서 ??? 하고 구글링하는데 뭐가... 나오지도 않고 ... 흠?? 하고 계속 테스트해보다 보니까 갑자기 됐다. await이 없어서 그런가 했는데 그것도 아니었던 것 같고 구글링해본 내용으로는 alert()then()으로 처리되지 않으면 발생한다는데 나는 첨부터 then()에서 처리했는데 ... 😕😕

  function copyUrl(){ 
    if ( !navigator.clipboard ) {
      // Clipboard API not available
      document.execCommand("http://" + window.location.host + `/tourney/open/${tourney ? tourney.comp_data.comp_id : localStorage.getItem('id')}`);
      alert("주소가 복사되었습니다!");
      return
    }

    navigator.clipboard.writeText("http://" + window.location.host + `/tourney/open/${tourney ? tourney.comp_data.comp_id : localStorage.getItem('id')}`)
    .then(res=>{
      alert("주소가 복사되었습니다!");
    })
  }
profile
노는 게 제일 좋은데 공부는 하고 싶어요 😗

0개의 댓글