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

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

        }

      }

    };

  }