JavaScript는 클립보드에 콘텐츠 복사를 구현합니다.

방법 1. 콘텐츠를 클립보드에 복사하는 방법은 브라우저마다 다릅니다. 다음은 Clipboard API를 사용하고 일부 브라우저 호환성 처리를 제공하는 작업 솔루션입니다.

여기의 코드는 지정된 링크를 포함하는 임시 textarea 요소를 생성하고 현재 문서의 본문에 추가합니다. document.execCommand("copy") 그런 다음 클립보드에 복사하는 명령을 사용하여 해당 요소 내의 텍스트를 선택하고 복사합니다  . 마지막으로 코드는 임시 요소를 삭제합니다.

이 방법을 사용하려면 사용자가 브라우저에서 클립보드에 대한 액세스를 허용해야 합니다. 특정 브라우저는 이 액세스 방법을 차단할 수 있으므로 신뢰할 수 없습니다.

// 获取要复制到剪切板的链接
const link = "https://www.example.com";

// 创建临时 <textarea> 元素，将链接写入其中
const textArea = document.createElement("textarea");
textArea.value = link;
document.body.appendChild(textArea);

// 选中并复制链接
textArea.select();
document.execCommand("copy");

// 将 <textarea> 元素删除
document.body.removeChild(textArea);

방법 2: 콘텐츠를 클립보드에 복사하는 방법은 브라우저에 따라 다릅니다. 다음은 Clipboard API를 사용하고 일부 브라우저 호환성 처리를 제공하는 작업 솔루션입니다.

여기에서 먼저 브라우저가 클립보드 API를 지원하는지 확인합니다. API가 현재 브라우저에서 지원되지 않는 경우 기존  document.execCommand("copy") 방법을 사용하여 텍스트를 복사합니다. 클립보드 API를 지원하는 브라우저의 경우  navigator.clipboard.writeText(text) 메서드를 호출하여 클립보드에 텍스트를 복사합니다. 이 방법은 더 번거롭지만 대부분의 브라우저에서 호환성을 보장할 수 있습니다.

function copyToClipboard(text) {
  // 检查浏览器是否支持 Clipboard API
  if (!navigator.clipboard) {
    // 如果不支持，则使用传统的 document.execCommand("copy") 方式
    const textArea = document.createElement("textarea");
    textArea.value = text;
    textArea.style.position = "fixed";
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();
    document.execCommand("copy");
    document.body.removeChild(textArea);
    return;
  }

  // 使用 Clipboard API 复制内容到剪切板
  navigator.clipboard.writeText(text).then(
    function() {
      console.log("复制成功");
    },
    function() {
      console.log("复制失败");
    }
  );
}

// 调用 copyToClipboard 函数，传入要复制的文本作为参数
copyToClipboard("这是一段需要复制到剪贴板的文本");