欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用?JS?復制頁面內容的三種方案

 更新時間：2022年08月18日 09:29:32   作者：西炒蛋  
這篇文章主要為大家介紹了使用?JS?復制頁面內容的三種方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

引言

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

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

方式一：Async Clipboard API

使用 Async Clipboard API

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

示例代碼：

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

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

方式二：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。

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

解決方式是在復制完成之后調用 selection.removeAllRanges() 清空選中內容即可。

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

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

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 方法即可選中內容，無需創(chuàng)建 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 復制頁面內容的資料請關注腳本之家其它相關文章！

相關文章

最新評論