美文网首页程序员
document.execCommand() 踩了个坑

document.execCommand() 踩了个坑

作者: Yard | 来源:发表于2018-03-06 15:10 被阅读1325次

不知大家对document.execCommand()这个api是否熟悉,在项目中使用这个api踩到了一个坑。

起始

刚开始发现这个问题是为了实现ajax请求结束后调用exec这个api去执行复制操作。但是在复制的时候显示复制错误,exec这个api返回false,然后去找了很多资料,最后在https://stackoverflow.com/questions/31925944/execcommandcopy-does-not-work-in-ajax-xhr-callback上找到答案,

You can only trigger a copy to the system clipboard in direct response to a trusted user action, such as a click event.

document.execCommand()这个api只能在真正的用户操作之后才能被触发,是为了安全考虑。原理大致是这样的,当用户操作之后,chrome会将当前作用域下的userAction变量置为True(编的变量名,逃),然后执行execCommand时就会去读取这个变量,当为True的时候才可以执行。

那么为什么ajax之后就不可以调用了呢?

因为ajax基本都是异步请求,而异步请求不同于同步请求的地方就在于重新创建了一个作用域去执行回调函数。
所以在重新创建一个作用域之后,之前作用域内的userAction就失效了,当前作用域下的userAction为false,所以复制不成功。

解决方法

  1. 用真正的用户操作去执行execCommand。(可能需要修改交互流程)
  2. 将异步请求改成同步请求。这样做就不会创建新的作用域,execCommand命令依旧在userAction为true的上下文下执行。(当然这种做法也不是很推荐,但为了满足需求只能这样做,只要把xhr.open里的最后一个参数改为false即可满足同步请求)

相关文章

  • document.execCommand() 踩了个坑

    不知大家对document.execCommand()这个api是否熟悉,在项目中使用这个api踩到了一个坑。 起...

  • JavaScript实现复制功能(兼容安卓、ios及微信内置浏览

    一、代码示例 二、document.execCommand 坑及兼容性 1、坑 execomond不能用在异步回调...

  • Pods踩了个坑

    刚公司给换了个新电脑,好开心呀,敲代码声音特别爽,就是特别烦要重新搭环境。 然后踩了个坑,呵呵。好开心 安装大家都...

  • 踩坑,使用cocoaPods import导入时没有提示的解决办

    续上篇写的,踩坑,cocoaPods ---- framework not found Pods之后 ,又踩坑了。...

  • 随笔

    读书啊,就是一个坑踩完了又掉进另一个坑,先说踩读书没用的坑,爬出来了,再踩读书要多的坑,之后再踩读书要精啊,读书要...

  • Cordova踩坑日记

    Cordova踩坑日记 1.配置环境 ​ 配置SDK踩了很多坑,其实只需要下载一个 android studi...

  • nacos2021.1配置踩坑记录

    前言 对比官网配置,踩了N个坑,最终还是归纳为版本问题 spring 环境 naocs包,这里比较新,踩坑!!! ...

  • 10 分钟搭建私服 NPM

    最近因为公司项目需要搭建一个私服 npm,安排我来研究,这两天也踩了不少坑,于是记录下踩坑经历,避免小伙伴们踩坑。...

  • 踩了坑

    这两天踩了坑了,第一次被骗了钱,一千不到,虽不多,还是有点不舒服。 也罢,买个教训,不提了,以后还是要管住嘴,守住...

  • 原生App植入React Native 踩坑记

    原生App植入React Native 踩坑记 为什么我踩坑了有一个需求要去可以在当前工程的feature/RN ...

网友评论

    本文标题:document.execCommand() 踩了个坑

    本文链接:https://www.haomeiwen.com/subject/jfzlfftx.html