项目中大量使用了navigator.clipboard.writeText实现点击标签,可以复制指定内容至剪切板。在本地开发环境没有问题,上线测试发现出现bug,http非安全协议下,浏览器无法访问剪切板。
替代方案,在安全域下使用 navigator.clipboard 提升效率,非安全域退回到 document.execCommand('copy'); 保证功能一直可用。但是项目已经开发完成,进行逐个修改源代码,工作量太大。考虑在非安全域情况下,自定义navigator.clipboard的逻辑,将其改写为document.execCommand('copy'),然后全局引用该js代码。这样保证在安全域下使用navigator.clipboard,非安全域下使用document.execCommand('copy'),同时不需要对源代码进行大量修改,实现兼容性处理。
if (typeof navigator.clipboard === 'undefined' || typeof navigator.clipboard.writeText === 'undefined') {
navigator.clipboard = {
writeText: function copyTextToClipboard(copyText) {
const input = document.createElement('input');
input.setAttribute('value', copyText);
document.body.appendChild(input);
input.select();
try {
if (document.execCommand('copy')) {
console.log('传统方式复制成功');
} else {
console.error('传统方式复制失败');
}
} catch (error) {
console.error('传统方式复制出错:', error);
} finally {
document.body.removeChild(input);
}
}
};
}