JavaScript實現(xiàn)頁面點擊復制到剪粘版并解決報錯問題

更新時間：2025年06月03日 10:54:42 作者：L.2017

這篇文章主要介紹了JavaScript實現(xiàn)頁面點擊復制到剪粘版并解決報錯問題的相關(guān)資料,常見錯誤包括瀏覽器兼容性、權(quán)限拒絕、未加密域名,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

發(fā)現(xiàn)問題

navigator.clipboard.writeText(text); 這段代碼是用于將文本寫入用戶的剪貼板。如果在執(zhí)行這段代碼時出現(xiàn)錯誤，可能有以下幾種原因：

瀏覽器不支持: 某些瀏覽器可能不支持此功能，或者需要在特定的安全上下文中（如HTTPS）使用。
用戶拒絕權(quán)限: 在請求剪貼板訪問權(quán)限時，用戶可能拒絕了權(quán)限。
網(wǎng)站未經(jīng)過HTTPS加密: 出于安全考慮，大多數(shù)現(xiàn)代瀏覽器要求網(wǎng)站通過HTTPS進行訪問，以便允許剪貼板訪問。

解決方法：

確保瀏覽器支持: 確認用戶的瀏覽器支持 navigator.clipboard API。
使用HTTPS: 確保網(wǎng)站通過HTTPS提供服務，以便允許使用剪貼板功能。
處理權(quán)限請求的拒絕: 如果用戶拒絕了權(quán)限，可以引導用戶手動開啟，或者給出提示，解釋為什么需要這個權(quán)限。
檢查控制臺錯誤: 查看開發(fā)者控制臺是否有更詳細的錯誤信息，根據(jù)具體的錯誤消息進行解決。

如果你遇到了這個錯誤，首先要確認你的網(wǎng)站是通過HTTPS提供服務的，然后檢查用戶是否授予了剪貼板訪問權(quán)限。如果是開發(fā)階段，可以考慮使用本地的HTTPS服務器或者使用一些開發(fā)者工具來繞過一些安全限制。如果是生產(chǎn)環(huán)境，則需要確保所有內(nèi)容都通過HTTPS提供。

在 Chrome 的 DevTools 控制臺下執(zhí)行 navigator.clipboard 返回 undefined，經(jīng)查找資料發(fā)現(xiàn)是瀏覽器禁用了非安全域的 navigator.clipboard 對象，哪些地址是安全的呢？

代碼解決：

	const copyText = (item) => {
		console.log(item);
		if (navigator.clipboard && window.isSecureContext) {
                    navigator.clipboard
                        .writeText(item)
                        .then(() => {
                            alert("復制成功");
                        })
                        .catch(() => {
                            alert("復制失敗");
                        })
                }else {
                    // 創(chuàng)建text area
                    const textArea = document.createElement('textarea')
                    textArea.value = item
                    // 使text area不在viewport，同時設置不可見
                    document.body.appendChild(textArea)
                    textArea.focus()
                    textArea.select()
                    return new Promise((resolve, reject) => {
                        // 執(zhí)行復制命令并移除文本框
                        document.execCommand('copy') ? resolve() : reject(new Error('出錯了'))
                        textArea.remove()
                    }).then(
                        () => {
                            alert("復制成功");
                        },
                        () => {
                            alert("復制失敗");
                        })}
// 		navigator.clipboard.writeText(item.value).then(
//     () => alert('復制成功'),
//     () => alert('復制失敗')
//   );
	};