使用?JS?復(fù)制頁面內(nèi)容的三種方案
引言
現(xiàn)在有很多第三方插件能夠?qū)崿F(xiàn) copy 功能,但如果讓我們自己去做,我們知道如何去實現(xiàn)嗎?
這篇文章介紹三種實現(xiàn)方案。
方式一:Async Clipboard API
這種方式使用起來最簡單,但兼容性不太好,而且要求比較多。

示例代碼:
const promise = navigator.clipboard.writeText(newClipText);
需要注意,方法的返回值是個 Promise。并且使用此方法時,頁面必須處于 focus 狀態(tài),否則會報錯。
方式二:Document.execCommand API
此方法雖然警告被廢棄,不再屬于 web 標(biāo)準(zhǔn),但歷史因素較多,相信瀏覽器還會支持很久。

復(fù)制 DOM 元素內(nèi)容
<div id="content">123456</div> <button id="copyButton">復(fù)制</button>
復(fù)制 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();
// 設(shè)置選中內(nèi)容
range.selectNodeContents(content);
// 清空選中內(nèi)容
selection.removeAllRanges();
// 添加選中內(nèi)容
selection.addRange(range);
document.execCommand('copy');
});
selection 需要先清空再添加 range。
這里會有一個細(xì)節(jié)問題,點擊復(fù)制按鈕之后,被復(fù)制的內(nèi)容處于選中狀態(tài),有些突兀。
解決方式是在復(fù)制完成之后調(diào)用 selection.removeAllRanges() 清空選中內(nèi)容即可。
再考慮一種情況,用戶在復(fù)制之前就選中了頁面的部分內(nèi)容。在復(fù)制完成之后,除了清空選中的復(fù)制內(nèi)容,還需要還原用戶在復(fù)制之前就選中的內(nèi)容。
實現(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);
}
}
});
點擊復(fù)制按鈕,同樣不會移除之前選中的內(nèi)容。
方法三:覆寫 copy 事件
引用上面鏈接內(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)容都會是 “西炒蛋”。
以上就是使用 JS 復(fù)制頁面內(nèi)容的三種方案的詳細(xì)內(nèi)容,更多關(guān)于JS 復(fù)制頁面內(nèi)容的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
微信小程序 wx.request(接口調(diào)用方式)詳解及實例
這篇文章主要介紹了微信小程序 wx.request(接口調(diào)用方式)詳解及實例的相關(guān)資料,wx.request請求方式比較簡單,但是在使用的時候出現(xiàn)錯,這里就記錄下,需要的朋友可以參考下2016-11-11
Intl對象DateTimeFormat?ListFormat?RelativeTimeFormat使用講解
這篇文章主要為大家介紹了Intl對象DateTimeFormat?ListFormat?RelativeTimeFormat使用講解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06
Web?Components實現(xiàn)類Element?UI中的Card卡片
這篇文章主要為大家介紹了Web?Components實現(xiàn)類Element?UI中的Card卡片實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07
微信小程序網(wǎng)絡(luò)請求wx.request詳解及實例
這篇文章主要介紹了微信小程序網(wǎng)絡(luò)請求wx.request詳解及實例的相關(guān)資料,需要的朋友可以參考下2017-05-05

