[공유하기] 모바일 웹 URL 복사 기능 구현하기

오늘은 공유하기 기능 중 URL 직접 복사 기능을 설명해보려고합니다.

 

 

URL 복사 기능 구현하기 

 

 

1. Android 또는 iOS 13.4 이상

// 클립보드로 링크 복사
navigator.clipboard.writeText('https://dc2348.tistory.com/')
	.then(function () {
		alert('URL 복사가 완료되었습니다.')
	})

iOS 최신버전이거나 Android 기기에서는 위 코드 처럼 Clipboard API를 통해 간단하게 구현이 가능합니다.

그러나 Clipboard APIP가 iOS 13.4 미만 버전에서는 지원이 안되기 때문에, 이 경우에는 다르게 구현이 필요합니다.

 

 

2. iOS 13.4 미만

// 클립보드로 링크 복사
const textArea = document.createElement('textarea')
document.body.appendChild(textArea)
textArea.value = value
textArea.select()
document.execCommand('copy')
document.body.removeChild(textArea)
alert('URL 복사가 완료되었습니다.')

다른 구현 방법은 위와 같습니다.

1. textarea 엘리먼트를생성합니다.

2. body에 임시로 추가해 줍니다.

3. 생성한 textarea를 선택합니다.

4. execCommand를 통하여 Copy를 실행해 줍니다.

5. 생성했던 textarea를 삭제하면 됩니다.

 

 

여기서 사용된 execCommand는 이제 사용을 권장하지 않는 함수입니다.

그러니 iOS 13.4 이상만 지원되는 사이트에서는 Clipboard API를 사용할 것을 권장합니다.

 

 

 

+ 개발하며 겪은 이슈

1. iOS 버전 파편화에 따른 분기 처리