JavaScript로 여러 브라우저에서 텍스트를 클립보드에 효율적으로 복사하는 방법은 무엇입니까?

여러 브라우저용 JavaScript에서 텍스트를 클립보드에 복사

개요: 어떤 API를 사용할 것인가?

클립보드에 텍스트를 복사하기 위해 JavaScript는 다음을 제공합니다. 세 가지 주요 브라우저 API:

• 비동기 클립보드 API(navigator.clipboard.writeText):

  • Chrome 66에서 사용 가능
  • 비동기식 및 Promises 사용
  • 작성 가능 사용자 프롬프트가 중단되지 않도록
  • HTTPS 페이지에서만 지원됨

• document.execCommand('copy'):

  • 전 세계적으로 널리 지원됨 브라우저
  • 동기식, 완료될 때까지 페이지 실행 중단
  • DOM에서 텍스트를 읽어 클립보드에 저장

• 재정의 사본 이벤트:

  • 모든 복사 이벤트에 대한 클립보드 내용 수정 허용
  • 일반 텍스트 이외의 다양한 데이터 형식 지원
  • 여기서 직접 다루지 않음

일반 개발 참고

• 콘솔에서 코드를 테스트할 때 클립보드 명령이 작동하지 않을 수 있습니다.
• 활성 페이지(Async Clipboard API용) 또는 사용자 상호 작용(document.execCommand('copy')용) 종종 필요합니다.

비동기 폴백 접근 방식

다양한 이유로 인해 브라우저 지원을 위해서는 대체 방법을 사용하는 것이 좋습니다. 예:

function fallbackCopyTextToClipboard(text) {
  // ...
}

function copyTextToClipboard(text) {
  if (!navigator.clipboard) fallbackCopyTextToClipboard(text);
  // ...
}

데모 및 결론

코드를 테스트하고 실제로 작동하는 모습을 보려면 이 데모 페이지를 방문하세요. IFRAME의 권한 문제로 인해 포함된 예제가 작동하지 않을 수 있습니다.

완전한 브라우저 간 호환성을 위해 지원되는 경우 Async Clipboard API를 사용하고 그렇지 않은 경우 document.execCommand('copy')로 대체하세요.

위 내용은 JavaScript로 여러 브라우저에서 텍스트를 클립보드에 효율적으로 복사하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!