复制内容显示navigator.clipboard undefined的问题与解决Cannot read properties of undefined (reading 'writeText')

源码资源网 · 发表于 2024-8-2 14:50:32

复制内容显示navigator.clipboard undefined的问题与解决Cannot read properties of undefined (reading 'writeText')
分析问题
起因是测试提了个不管：点击单号复制小图标，会报脚本错误。
报错信息显示的就是 TypeError: Cannot read properties of undefined (reading ‘writeText’)
但是我自己在本地测试时，是没有问题的，在demo网站也没有问题。

在我要了测试的ip地址去测试，发现确实是会报错。
在查看相关代码发现问题在于，navigator对象下是否有clipboard对象。

复制内容显示navigator.clipboard undefined的问题与解决Cannot read properties of undefined (reading 'w ...

在翻阅MDN文档后，发现问题所在。这个Navigator的clipboard属性是有限制的，必须是在支持的浏览器和安全上下文中可用。那么像我们的本地localhost，和我刚才的demo网站是用https的这些都属于安全上下文，所以测试并没有问题。在测试的机器里，因为是自己的ip域，并不是https。这个功能就会失效，所以就会报错undefined了

复制内容显示navigator.clipboard undefined的问题与解决Cannot read properties of undefined (reading 'w ...

我们可以通过window.isSecureContext来判断是否是安全上下文。

复制内容显示navigator.clipboard undefined的问题与解决Cannot read properties of undefined (reading 'w ...

如何解决

1.代码兼容非安全域的写法。

在安全域下使用 navigator.clipboard 提升效率，非安全域退回到 document.execCommand(‘copy’); 保证功能一直可用。

const handleCopy = (val) => {
if (window.isSecureContext && navigator.clipboard) {
navigator.clipboard
.writeText(val)
.then(() => {
ElMessage({
showClose: false,
message: t('audit_center.other_source.success_copy'),
type: 'success',
});
})
.catch((err) => {
ElMessage({
showClose: false,
message: `${t('audit_center.other_source.fail_copy')}：${err}`,
type: 'error',
});
});
} else {
const copyElem = document.createElement('textarea');
let styles = copyElem.style;
styles.position = 'fixed';
styles.zIndex = '0';
styles.left = '-500px';
styles.top = '-500px';
copyElem.value = val;
document.body.appendChild(copyElem);
copyElem.focus();
copyElem.select();
let result = false;
result = document.execCommand('copy');
if (result) {
ElMessage({
showClose: false,
message: t('audit_center.other_source.success_copy'),
type: 'success',
});
copyElem.remove();
} else {
ElMessage({
showClose: false,
message: `${t('audit_center.other_source.fail_copy')}`,
type: 'error',
});
}
}
};

复制代码

引用第三方库

社区上有很多开源的复制剪切的jS库可以使用，第三方库考虑的比较全面，兼容问题都会处理好。

https://github.com/soerenmartius/vue3-clipboard

https://github.com/x-extends/xe-clipboard

PS:上面两个库如果无法下载，可以从本文附件中下载（两个都在附件中）

--------------------------vue3-clipboard----------------------------------

Install

npm install --save @soerenmartius/vue3-clipboard

复制代码

Import the v-clipboard directive globally

src/main.ts

import { createApp } from 'vue'
import App from './App.vue'
import { VueClipboard } from '@soerenmartius/vue3-clipboard'
createApp(App).use(VueClipboard).mount('#app')

复制代码

Apply the v-clipboard directive to an element

<template>
<input v-model="value" />
<button v-clipboard="value">Copy</button>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
setup() {
const value = ref('lorem')
return { value }
},
})
</script>

复制代码

Copy value of an input, and handle events separately.

<template>
<input v-model="value" />
<button
v-clipboard:copy="value"
v-clipboard:success="onSuccess"
v-clipboard:error="onError"
>
Copy
</button>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
setup() {
const value = ref('lorem')
const onSuccess = () => {
console.log('success')
}
const onError = () => {
console.log('error')
}
return { value, onSuccess, onError }
},
})
</script>

复制代码

Standalone usage of the toClipboard function

<template>
<input v-model="value" />
<button @click="toClipboard(value)">Copy</button>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import { toClipboard } from '@soerenmartius/vue3-clipboard'
export default defineComponent({
setup() {
const value = ref('lorem')
return { value, toClipboard }
},
})
</script>

复制代码

本文示例：

import { toClipboard } from '@soerenmartius/vue3-clipboard';
const handleCopy = (val) => {
toClipboard(val)
.then((res) => {
ElMessage({
showClose: false,
message: t('audit_center.other_source.success_copy'),
type: 'success',
});
})
.catch((err) => {
ElMessage({
showClose: false,
message: `${t('audit_center.other_source.fail_copy')}：${err}`,
type: 'error',
});
});
};

复制代码

---------------------------------xe-clipboard-----------------------------------

Installing

npm install xe-clipboard

复制代码

<script src="https://cdn.jsdelivr.net/npm/xe-clipboard"></script>

复制代码

Example

<button id="btn1">Copy</button>

复制代码

document.getElementById('btn1').addEventListener('click', function (evnt) {
// 由于浏览器的安全机制，操作剪贴板必须在事件之内才能有效
if (XEClipboard.copy('Copy this content to the clipboard.')) {
alert('Copy success.')
} else {
alert('The browser is not supported.')
}
})

复制代码

游客，本帖隐藏的内容需要积分高于 2 才可浏览，您当前积分为 0

提取码下载：

文件名称:提取码下载.txt
下载次数:0 文件大小:13 Bytes 售价:5金钱 [记录]
下载权限: 不限 [购买VIP] [充值] [在线充值] 【VIP会员5折；永久VIP免费】

安全检测，请放心下载

		自动登录	找回密码
密码			立即注册

复制内容显示navigator.clipboard undefined的问题与解决Cannot read properties of undefined (reading 'writeText')

相关帖子