关于navigator.clipboard.writeText使用遇到的坑

这篇具有很好参考价值的文章主要介绍了关于navigator.clipboard.writeText使用遇到的坑。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

navigator.clipboard.writeText在http协议下不可用的坑,浏览器禁用了非安全域的 navigator.clipboard 对象,安全域包括本地访问与开启TLS安全认证的地址,如 https 协议的地址、127.0.0.1 或 localhost 。(其实主要是http属于非安全域)下面的方法属于兼容了http的

function copyToClipboard(textToCopy) {
            // navigator clipboard 需要https等安全上下文
            if (navigator.clipboard && window.isSecureContext) {
                // navigator clipboard 向剪贴板写文本
                return navigator.clipboard.writeText(textToCopy);
            } else {
                // 创建text area
                let textArea = document.createElement("textarea");
                textArea.value = textToCopy;
                // 使text area不在viewport,同时设置不可见
                textArea.style.position = "absolute";
                textArea.style.opacity = 0;
                textArea.style.left = "-999999px";
                textArea.style.top = "-999999px";
                document.body.appendChild(textArea);
                textArea.focus();
                textArea.select();
                return new Promise((res, rej) => {
                    // 执行复制命令并移除文本框
                    document.execCommand('copy') ? res() : rej();
                    textArea.remove();
                });
            }
        }

文章来源地址https://www.toymoban.com/news/detail-777574.html

到了这里,关于关于navigator.clipboard.writeText使用遇到的坑的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 小程序嵌套h5页面,使用navigator.mediaDevices.getUserMedia的坑点

    基本上在使用这个方法的时候,网上都是全部做好兼容性考虑的,直接复制即可,但是如果微信小程序嵌套了页面就会出现问题; 当苹果手机用户使用时,如果ios版本低于14.3的时候就会提示报错:undefned is not an object (evaluating navigator.mediaDevices.getUserMedia\\\') 这个时由于iOS webk

    2024年02月03日
    浏览(34)
  • 关于uniapp全局挂载变量/方法的问题,没遇到过点进来吧,记录一下我踩过的坑。

    事情是这样的,我在用uniapp做一个微信小程序,遇到了个问题,是在封装uni.request()到全局方法的时候,其实就很简单的,是关于 this的指向问题 (若想了解此问题的话,点这里去看大佬的文章!!!) ,找几个小时的博客都未能解决。 建uniapp项目时用了vue3,那么就要遵

    2024年02月16日
    浏览(48)
  • eventBus使用遇到的坑

    **问题:**通过eventBus传递的参数,在子组件的methods中无法通过this.使用。 **思路:**考虑组件方法的执行顺序(vue生命周期执行顺序) **解决办法:**在传递参数的组件外 this.$nextTick 创建eventBus.js文件 在需要传递消息的兄弟组件引入该js文件 传递消息 bus.$emit(“test”,param1,pa

    2024年02月14日
    浏览(44)
  • 使用ffmpeg合并视频遇到的坑

    下面以Linux环境介绍为主 1.ffmpeg可执行命令不同的环境是不同的,Linux在执行命令前还需要授权。 2.合并视频命令: 坑一:其中第一个花括号替换的是可执行命令所在的绝对路径,这里必须要使用ffmpeg的绝对路径,因为把应用打成jar包是无法获取到绝对路径的,具体可参考:

    2024年02月16日
    浏览(52)
  • 使用vite打包时候遇到的坑

    最近使用vite写了一个小demo. 记录下其中感悟和遇到的\\\"坑\\\" 开发: 使用vite的开发过程还是很爽的 vite快速生成各种已经搭好的脚手架供开发者选择 开发的运行速度相对于传统的webpack确实快了不少 打包: 在打包的时候遇到了一些坑 打包时资源的路径问题,跟vue-cli里面一样,需要修

    2024年02月04日
    浏览(52)
  • elasticsearch 中热词使用遇到的坑

    在使用es检索时,一般会创建索引以及索引下mapping和setting一样配置,如下: 命令创建配置方式: PUT /my_index {   \\\"settings\\\": {     \\\"number_of_shards\\\": 1   },   \\\"mappings\\\": {     \\\"properties\\\": {       \\\"title\\\": {         \\\"type\\\": \\\"text\\\"       },       \\\"releaseTime\\\": {         \\\"type\\\": \\\"date\\\"

    2024年01月19日
    浏览(42)
  • pdfh5.js的使用以及遇到的坑

    pdfh5的地址: https://www.npmjs.com/package/pdfh5 在项目中引入pdfh5 完成事件on函数的事件名 遇到的坑 引入css的坑 在引入css文件的时候,官方给出了两种方式 第一种:在style标签里面通过@import \\\'pdfh5/css/pdfh5.css’方式,这种方式可能会报错 第二种:在script标签里面通过import ‘pdfh5/c

    2024年02月11日
    浏览(40)
  • 小程序页面跳转使用reLaunch遇到的坑

    开发的当前功能总共有4个页面1.2.3.4其中1为首页2为列表页3为详情页4为退货详情页 跳转顺序需要4--2 实现方式:1.redirectTo 【关闭当前页面跳转到目的页面,会造成多个列表页的关闭情况】  wx.redirectTo({        url: \\\'/packagePos/pages/pos/delivery/deliveryOrder/deliveryOrder\\\',      });

    2024年02月08日
    浏览(43)
  • 开发小程序使用 vant 遇到的坑 vant popup

    目录 vant popup vant Popover   小程序中H5页面使用van-uploader上传图片安卓手机调取相机失效问题 小程序上的vant用的是跟网页版的不一样的方法,网页版的可以使用v-model,但是小程序的要用\\\"show\\\"属性来控制显示与否。   由于是用show属性来控制,所以需要写一个close方法,这样一

    2024年02月13日
    浏览(50)
  • unity关于navigation使用的问题——Window没有AI选项以及Navigation烘焙没有效果

    在Window中Package Manager的unity register下载AI Register包,然后你就发现window中有AI选项了 这个我看了其他人的解决方法都没用,然后我自己捣鼓出来了,希望可以给其他遇到这种情况的朋友一点帮助。  1.Gizmos一定要选上为蓝色,也就是右上角的那个类似地球的图标 2.Show only Selec

    2024年02月08日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包