다양한 브라우저에서 JavaScript로 텍스트를 클립보드에 안정적으로 복사하려면 어떻게 해야 합니까?

JavaScript에서 클립보드에 복사: 멀티 브라우저 접근 방식

텍스트를 클립보드에 복사하려면 다양한 브라우저 API를 활용해야 합니다. 이 글에서는 다음 세 가지 기본 방법에 중점을 둡니다.

1. 비동기 클립보드 API: [navigator.clipboard.writeText]
Chrome 66에서 출시된 Async Clipboard API는 클립보드에 대한 비동기 액세스를 제공합니다. Promises를 사용하여 사용자 프롬프트가 JavaScript 실행을 중단하지 않도록 합니다. 이 방법에는 HTTPS가 필요하며 Chrome 66에서 비활성 탭을 지원합니다.

2. document.execCommand('copy') (더 이상 사용되지 않음)
2015년 이후 대부분의 브라우저에서 사용할 수 있는 이 메서드는 동기식이며 JavaScript 실행을 차단합니다. DOM에서 텍스트를 복사하여 클립보드에 배치합니다. 일부 브라우저에서는 프로세스 중에 권한 메시지가 표시될 수 있습니다.

3. 복사 이벤트 재정의
이 고급 기술을 사용하면 복사 이벤트에 따라 클립보드에 표시되는 내용을 수정할 수 있습니다. 클립보드로 복사하는 작업을 직접적으로 다루지 않으므로 여기서는 다루지 않습니다.

일반 개발 참고 사항

• 클립보드 작업을 수행하려면 일반적으로 페이지가 활성화되어 있거나 사용자 상호 작용이 필요합니다.
• 2020년 2월부터 교차 출처 IFRAME 및 IFRAME 샌드박싱으로 인해 일부 브라우저에서 작동하는 샘플 코드입니다.

비동기 폴백 접근 방식

브라우저 간 호환성을 보장하려면 문서로 폴백하는 비동기 접근 방식을 사용하는 것이 좋습니다. .execCommand('copy')(구형 브라우저용):

function copyTextToClipboard(text) {
  if (!navigator.clipboard) {
    fallbackCopyTextToClipboard(text);
    return;
  }
  navigator.clipboard.writeText(text).then(() => {
    console.log('Async: Copying to clipboard was successful!');
  }, (err) => {
    console.error('Async: Could not copy text: ', err);
  });
}

위 내용은 다양한 브라우저에서 JavaScript로 텍스트를 클립보드에 안정적으로 복사하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!