今天小編給大家分享一下JavaScript怎么復(fù)制頁面內(nèi)容的相關(guān)知識點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

成都創(chuàng)新互聯(lián)公司是一家專業(yè)從事網(wǎng)站設(shè)計(jì)制作、成都做網(wǎng)站、網(wǎng)頁設(shè)計(jì)的品牌網(wǎng)絡(luò)公司。如今是成都地區(qū)具影響力的網(wǎng)站設(shè)計(jì)公司,作為專業(yè)的成都網(wǎng)站建設(shè)公司,成都創(chuàng)新互聯(lián)公司依托強(qiáng)大的技術(shù)實(shí)力、以及多年的網(wǎng)站運(yùn)營經(jīng)驗(yàn),為您提供專業(yè)的成都網(wǎng)站建設(shè)、營銷型網(wǎng)站建設(shè)及網(wǎng)站設(shè)計(jì)開發(fā)服務(wù)！

方式一：Async Clipboard API

使用 Async Clipboard API

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

示例代碼：

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

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

方式二：Document.execCommand API

使用 Document.execCommand

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

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

123456

復(fù)制

復(fù)制 DOM 元素的時(shí)候，需要額外使用到 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();
  // 設(shè)置選中內(nèi)容
  range.selectNodeContents(content);
  // 清空選中內(nèi)容
  selection.removeAllRanges();
  // 添加選中內(nèi)容
  selection.addRange(range);
  document.execCommand('copy');
});

selection 需要先清空再添加 range。

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

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

再考慮一種情況，用戶在復(fù)制之前就選中了頁面的部分內(nèi)容。在復(fù)制完成之后，除了清空選中的復(fù)制內(nèi)容，還需要還原用戶在復(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();
  // 緩存用戶選中的內(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) {
      // 還原用戶選中內(nèi)容
      selection.addRange(currentRange);
    }
  }
});

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

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

使用 input 元素對象的 select 方法即可選中內(nèi)容，無需創(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) {
      // 還原用戶選中內(nèi)容
      selection.addRange(currentRange);
    }
  }
});

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

方法三：覆寫 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();
});

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

以上就是“JavaScript怎么復(fù)制頁面內(nèi)容”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。