navigator.clipboard Cannot read properties of undefined (reading ‘writeText‘)兼容性处理方案

文章讨论了项目中使用navigator.clipboard在http非安全协议下的问题,提出在安全域使用navigator.clipboard提升效率,非安全域采用document.execCommand实现兼容,通过自定义逻辑避免大规模源代码修改。
摘要由CSDN通过智能技术生成

项目中大量使用了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);

        }

      }

    };

  }

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值