首頁 > 軟體

使用 JS 複製頁面內容的三種方案

2022-08-18 14:02:43

引言

現在有很多第三方外掛能夠實現 copy 功能,但如果讓我們自己去做,我們知道如何去實現嗎?

這篇文章介紹三種實現方案。

方式一:Async Clipboard API

使用 Async Clipboard API

這種方式使用起來最簡單,但相容性不太好,而且要求比較多。

範例程式碼:

const promise = navigator.clipboard.writeText(newClipText);

需要注意,方法的返回值是個 Promise。並且使用此方法時,頁面必須處於 focus 狀態,否則會報錯。

方式二:Document.execCommand API

使用 Document.execCommand

此方法雖然警告被廢棄,不再屬於 web 標準,但歷史因素較多,相信瀏覽器還會支援很久。

複製 DOM 元素內容

<div id="content">123456</div>
<button id="copyButton">複製</button>

複製 DOM 元素的時候,需要額外使用到 selection API 和 Range API。

developer.mozilla.org/en-US/docs/…

developer.mozilla.org/en-US/docs/…

範例程式碼:

const copyButton = document.getElementById('copyButton');
const content = document.getElementById('content');
copyButton.addEventListener('click', function () {
  const selection = window.getSelection();
  const range = document.createRange();
  // 設定選中內容
  range.selectNodeContents(content);
  // 清空選中內容
  selection.removeAllRanges();
  // 新增選中內容
  selection.addRange(range);
  document.execCommand('copy');
});

selection 需要先清空再新增 range。

這裡會有一個細節問題,點選複製按鈕之後,被複制的內容處於選中狀態,有些突兀。

解決方式是在複製完成之後呼叫 selection.removeAllRanges() 清空選中內容即可。

再考慮一種情況,使用者在複製之前就選中了頁面的部分內容。在複製完成之後,除了清空選中的複製內容,還需要還原使用者在複製之前就選中的內容。

實現程式碼如下:

const copyButton = document.getElementById('copyButton');
const content = document.getElementById('content');
copyButton.addEventListener('click', function () {
  const selection = window.getSelection();
  const range = document.createRange();
  // 快取使用者選中的內容
  const currentRange =
    selection.rangeCount === 0 ? null : selection.getRangeAt(0);
  // 設定檔案片段
  range.selectNodeContents(content);
  // 清空選中內容
  selection.removeAllRanges();
  // 將檔案片段設定為選中內容
  selection.addRange(range);
  try {
    // 複製到剪貼簿
    document.execCommand('copy');
  } catch (err) {
    // 提示覆制失敗
  } finally {
    selection.removeAllRanges();
    if (currentRange) {
      // 還原使用者選中內容
      selection.addRange(currentRange);
    }
  }
});

先快取使用者選中的內容,複製完成之後,再還原。

複製 input 元素內容

使用 input 元素物件的 select 方法即可選中內容,無需建立 range 片段設定選中內容。

範例程式碼:

const copyButton = document.getElementById('copyButton');
const inputEl = document.getElementById('input');
copyButton.addEventListener('click', function () {
  const selection = window.getSelection();
  const currentRange =
    selection.rangeCount === 0 ? null : selection.getRangeAt(0);
  // 選中 input 內容
  inputEl.select();
  // 複製到剪貼簿
  try {
    document.execCommand('copy');
  } catch (err) {
    // 提示覆制失敗
    // 。。。
  } finally {
    selection.removeAllRanges();
    if (currentRange) {
      // 還原使用者選中內容
      selection.addRange(currentRange);
    }
  }
});

點選複製按鈕,同樣不會移除之前選中的內容。

方法三:覆寫 copy 事件

w3c.github.io/clipboard-a…

參照上面連結內的一段程式碼作為範例:

// Overwrite what is being copied to the clipboard.
document.addEventListener('copy', function (e) {
  // e.clipboardData is initially empty, but we can set it to the
  // data that we want copied onto the clipboard.
  e.clipboardData.setData('text/plain', '西炒蛋');
  // This is necessary to prevent the current document selection from
  // being written to the clipboard.
  e.preventDefault();
});

在頁面複製任何內容,貼上輸出的內容都會是 “西炒蛋”。

以上就是使用 JS 複製頁面內容的三種方案的詳細內容,更多關於JS 複製頁面內容的資料請關注it145.com其它相關文章!


IT145.com E-mail:sddin#qq.com