使用?JS?復(fù)制頁(yè)面內(nèi)容的三種方案

更新時(shí)間：2022年08月18日 09:29:32 作者：西炒蛋

這篇文章主要為大家介紹了使用?JS?復(fù)制頁(yè)面內(nèi)容的三種方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

現(xiàn)在有很多第三方插件能夠?qū)崿F(xiàn) copy 功能，但如果讓我們自己去做，我們知道如何去實(shí)現(xiàn)嗎？

這篇文章介紹三種實(shí)現(xiàn)方案。

方式一：Async Clipboard API

使用 Async Clipboard API

這種方式使用起來(lái)最簡(jiǎn)單，但兼容性不太好，而且要求比較多。

示例代碼：

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

需要注意，方法的返回值是個(gè) Promise。并且使用此方法時(shí)，頁(yè)面必須處于 focus 狀態(tài)，否則會(huì)報(bào)錯(cuò)。

方式二：Document.execCommand API

使用 Document.execCommand

此方法雖然警告被廢棄，不再屬于 web 標(biāo)準(zhǔn)，但歷史因素較多，相信瀏覽器還會(huì)支持很久。

復(fù)制 DOM 元素內(nèi)容

<div id="content">123456</div>
<button id="copyButton">復(fù)制</button>

復(fù)制 DOM 元素的時(shí)候，需要額外使用到 selection API 和 Range API。

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();
  // 設(shè)置選中內(nèi)容
  range.selectNodeContents(content);
  // 清空選中內(nèi)容
  selection.removeAllRanges();
  // 添加選中內(nèi)容
  selection.addRange(range);
  document.execCommand('copy');
});

selection 需要先清空再添加 range。

這里會(huì)有一個(gè)細(xì)節(jié)問(wèn)題，點(diǎn)擊復(fù)制按鈕之后，被復(fù)制的內(nèi)容處于選中狀態(tài)，有些突兀。

解決方式是在復(fù)制完成之后調(diào)用 selection.removeAllRanges() 清空選中內(nèi)容即可。

再考慮一種情況，用戶(hù)在復(fù)制之前就選中了頁(yè)面的部分內(nèi)容。在復(fù)制完成之后，除了清空選中的復(fù)制內(nèi)容，還需要還原用戶(hù)在復(fù)制之前就選中的內(nèi)容。

實(shí)現(xiàn)代碼如下：

const copyButton = document.getElementById('copyButton');
const content = document.getElementById('content');
copyButton.addEventListener('click', function () {
  const selection = window.getSelection();
  const range = document.createRange();
  // 緩存用戶(hù)選中的內(nèi)容
  const currentRange =
    selection.rangeCount === 0 ? null : selection.getRangeAt(0);
  // 設(shè)置文檔片段
  range.selectNodeContents(content);
  // 清空選中內(nèi)容
  selection.removeAllRanges();
  // 將文檔片段設(shè)置為選中內(nèi)容
  selection.addRange(range);
  try {
    // 復(fù)制到剪貼板
    document.execCommand('copy');
  } catch (err) {
    // 提示復(fù)制失敗
  } finally {
    selection.removeAllRanges();
    if (currentRange) {
      // 還原用戶(hù)選中內(nèi)容
      selection.addRange(currentRange);
    }
  }
});

先緩存用戶(hù)選中的內(nèi)容，復(fù)制完成之后，再還原。

復(fù)制 input 元素內(nèi)容

使用 input 元素對(duì)象的 select 方法即可選中內(nèi)容，無(wú)需創(chuàng)建 range 片段設(shè)置選中內(nèi)容。

示例代碼：

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 內(nèi)容
  inputEl.select();
  // 復(fù)制到剪貼板
  try {
    document.execCommand('copy');
  } catch (err) {
    // 提示復(fù)制失敗
    // 。。。
  } finally {
    selection.removeAllRanges();
    if (currentRange) {
      // 還原用戶(hù)選中內(nèi)容
      selection.addRange(currentRange);
    }
  }
});

點(diǎn)擊復(fù)制按鈕，同樣不會(huì)移除之前選中的內(nèi)容。

方法三：覆寫(xiě) copy 事件

w3c.github.io/clipboard-a…

引用上面鏈接內(nèi)的一段代碼作為示例：

// 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();
});

在頁(yè)面復(fù)制任何內(nèi)容，粘貼輸出的內(nèi)容都會(huì)是 “西炒蛋”。

以上就是使用 JS 復(fù)制頁(yè)面內(nèi)容的三種方案的詳細(xì)內(nèi)容，更多關(guān)于JS 復(fù)制頁(yè)面內(nèi)容的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: