JavaScript實(shí)現(xiàn)頁(yè)面點(diǎn)擊復(fù)制到剪粘版并解決報(bào)錯(cuò)問(wèn)題
發(fā)現(xiàn)問(wèn)題
navigator.clipboard.writeText(text);
這段代碼是用于將文本寫入用戶的剪貼板。如果在執(zhí)行這段代碼時(shí)出現(xiàn)錯(cuò)誤,可能有以下幾種原因:
瀏覽器不支持: 某些瀏覽器可能不支持此功能,或者需要在特定的安全上下文中(如HTTPS)使用。
用戶拒絕權(quán)限: 在請(qǐng)求剪貼板訪問(wèn)權(quán)限時(shí),用戶可能拒絕了權(quán)限。
網(wǎng)站未經(jīng)過(guò)HTTPS加密: 出于安全考慮,大多數(shù)現(xiàn)代瀏覽器要求網(wǎng)站通過(guò)HTTPS進(jìn)行訪問(wèn),以便允許剪貼板訪問(wèn)。
解決方法:
確保瀏覽器支持: 確認(rèn)用戶的瀏覽器支持
navigator.clipboard
API。使用HTTPS: 確保網(wǎng)站通過(guò)HTTPS提供服務(wù),以便允許使用剪貼板功能。
處理權(quán)限請(qǐng)求的拒絕: 如果用戶拒絕了權(quán)限,可以引導(dǎo)用戶手動(dòng)開啟,或者給出提示,解釋為什么需要這個(gè)權(quán)限。
檢查控制臺(tái)錯(cuò)誤: 查看開發(fā)者控制臺(tái)是否有更詳細(xì)的錯(cuò)誤信息,根據(jù)具體的錯(cuò)誤消息進(jìn)行解決。
如果你遇到了這個(gè)錯(cuò)誤,首先要確認(rèn)你的網(wǎng)站是通過(guò)HTTPS提供服務(wù)的,然后檢查用戶是否授予了剪貼板訪問(wèn)權(quán)限。如果是開發(fā)階段,可以考慮使用本地的HTTPS服務(wù)器或者使用一些開發(fā)者工具來(lái)繞過(guò)一些安全限制。如果是生產(chǎn)環(huán)境,則需要確保所有內(nèi)容都通過(guò)HTTPS提供。
在 Chrome 的 DevTools 控制臺(tái)下執(zhí)行 navigator.clipboard 返回 undefined,經(jīng)查找資料發(fā)現(xiàn)是瀏覽器禁用了非安全域的 navigator.clipboard 對(duì)象,哪些地址是安全的呢?
代碼解決:
const copyText = (item) => { console.log(item); if (navigator.clipboard && window.isSecureContext) { navigator.clipboard .writeText(item) .then(() => { alert("復(fù)制成功"); }) .catch(() => { alert("復(fù)制失敗"); }) }else { // 創(chuàng)建text area const textArea = document.createElement('textarea') textArea.value = item // 使text area不在viewport,同時(shí)設(shè)置不可見 document.body.appendChild(textArea) textArea.focus() textArea.select() return new Promise((resolve, reject) => { // 執(zhí)行復(fù)制命令并移除文本框 document.execCommand('copy') ? resolve() : reject(new Error('出錯(cuò)了')) textArea.remove() }).then( () => { alert("復(fù)制成功"); }, () => { alert("復(fù)制失敗"); })} // navigator.clipboard.writeText(item.value).then( // () => alert('復(fù)制成功'), // () => alert('復(fù)制失敗') // ); };
總結(jié)
到此這篇關(guān)于JavaScript實(shí)現(xiàn)頁(yè)面點(diǎn)擊復(fù)制到剪粘版并解決報(bào)錯(cuò)問(wèn)題的文章就介紹到這了,更多相關(guān)JS頁(yè)面點(diǎn)擊復(fù)制到剪粘版內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- js實(shí)現(xiàn)各種復(fù)制到剪貼板的方法(分享)
- JavaScript復(fù)制內(nèi)容到剪貼板的兩種常用方法
- vue中js實(shí)現(xiàn)點(diǎn)擊復(fù)制文本到剪貼板的3種方案
- JS實(shí)現(xiàn)復(fù)制內(nèi)容到剪貼板功能兼容所有瀏覽器(推薦)
- js復(fù)制內(nèi)容到剪貼板代碼,js復(fù)制代碼的簡(jiǎn)單實(shí)例
- 一段多瀏覽器的"復(fù)制到剪貼板"javascript代碼
- JavaScript實(shí)現(xiàn)復(fù)制或剪切內(nèi)容到剪貼板功能的方法
- JS復(fù)制到剪貼板示例代碼
- JS實(shí)現(xiàn)復(fù)制內(nèi)容到剪貼板功能
相關(guān)文章
微信小程序?qū)崿F(xiàn)橫向滾動(dòng)導(dǎo)航欄效果
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)橫向滾動(dòng)導(dǎo)航欄效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12JavaScript數(shù)據(jù)存儲(chǔ) Cookie篇
這篇文章主要為大家介紹了JavaScript數(shù)據(jù)存儲(chǔ) Cookie篇,感興趣的朋友可以參考一下2016-07-07JavaScript實(shí)現(xiàn)電商平臺(tái)商品細(xì)節(jié)圖
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)電商平臺(tái)商品細(xì)節(jié)圖,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-06-06JS onmousemove鼠標(biāo)移動(dòng)坐標(biāo)接龍DIV效果實(shí)例
這篇文章主要介紹了JS onmousemove鼠標(biāo)移動(dòng)坐標(biāo)接龍DIV效果實(shí)例,有需要的朋友可以參考一下2013-12-12JavaScript中forEach和map方法的使用與區(qū)別
眾所周知map和forEach是數(shù)組的操作方法,下面這篇文章主要給大家介紹了關(guān)于JavaScript中forEach和map方法的使用與區(qū)別,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02javascript 發(fā)布-訂閱模式 實(shí)例詳解
這篇文章主要介紹了javascript 發(fā)布-訂閱模式,結(jié)合實(shí)例形式詳細(xì)分析了javascript發(fā)布-訂閱模式基本功能、原理、實(shí)現(xiàn)方法與相關(guān)使用技巧,需要的朋友可以參考下2023-06-06用Fundebug插件記錄網(wǎng)絡(luò)請(qǐng)求異常的方法
這篇文章主要介紹了用Fundebug插件記錄網(wǎng)絡(luò)請(qǐng)求異常的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02