使用?JS?復(fù)制頁面內(nèi)容的三種方案
引言
現(xiàn)在有很多第三方插件能夠?qū)崿F(xiàn) copy 功能,但如果讓我們自己去做,我們知道如何去實(shí)現(xiàn)嗎?
這篇文章介紹三種實(shí)現(xiàn)方案。
方式一:Async Clipboard API
這種方式使用起來最簡單,但兼容性不太好,而且要求比較多。
示例代碼:
const promise = navigator.clipboard.writeText(newClipText);
需要注意,方法的返回值是個(gè) Promise。并且使用此方法時(shí),頁面必須處于 focus 狀態(tài),否則會報(bào)錯(cuò)。
方式二:Document.execCommand API
此方法雖然警告被廢棄,不再屬于 web 標(biāo)準(zhǔn),但歷史因素較多,相信瀏覽器還會支持很久。
復(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/…
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 事件
引用上面鏈接內(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)用方式)詳解及實(shí)例
這篇文章主要介紹了微信小程序 wx.request(接口調(diào)用方式)詳解及實(shí)例的相關(guān)資料,wx.request請求方式比較簡單,但是在使用的時(shí)候出現(xiàn)錯(cuò),這里就記錄下,需要的朋友可以參考下2016-11-11javascript 操作cookies詳解及實(shí)例
這篇文章主要介紹了javascript 操作cookies詳解及實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-02-02Intl對象DateTimeFormat?ListFormat?RelativeTimeFormat使用講解
這篇文章主要為大家介紹了Intl對象DateTimeFormat?ListFormat?RelativeTimeFormat使用講解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06Web?Components實(shí)現(xiàn)類Element?UI中的Card卡片
這篇文章主要為大家介紹了Web?Components實(shí)現(xiàn)類Element?UI中的Card卡片實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07微信小程序網(wǎng)絡(luò)請求wx.request詳解及實(shí)例
這篇文章主要介紹了微信小程序網(wǎng)絡(luò)請求wx.request詳解及實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-05-05