클립보드에 URL 복사 기능

Jiwon Lee·2023년 5월 18일
0

현재 주소를 복사하려면 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개의 댓글

관련 채용 정보