chrome浏览器下JavaScript实现clipboard时无法访问剪切板解决方案

摘要:
在用JavaScript实现某个简单的复制到剪切板功能的时候,会考虑一下浏览器兼容性,主要是重点在IE和FireFox,把这个两个浏览器搞定后,基本上其他浏览器也不用太操心了,Chrome也一样,没出什么问题。但是Chrome用的好好的,突然过了一个月,就无法实现复制到剪切板了。贴一下JavaScript一款通用的复制粘贴方法,引用clipboard类库,再去实现。有一种说法是,要必须利用JavaScript+flash来实现复制粘贴,解决兼容性,看了一下,这方方法很复杂。

在用JavaScript实现某个简单的复制到剪切板功能的时候,会考虑一下浏览器兼容性,主要是重点在IE和FireFox,把这个两个浏览器搞定后,基本上其他浏览器也不用太操心了,Chrome也一样,没出什么问题。但是Chrome用的好好的,突然过了一个月,就无法实现复制到剪切板了。一时不知道什么原因。网上查了一下,有这样一原因:安全问题,浏览器默认禁止访问剪贴板。

从代码层面,想了各种方法,去解决兼容性,都无济于事,就是解决不了Chrome的兼容性。

贴一下JavaScript一款通用的复制粘贴方法,引用clipboard类库,再去实现。具体大家可以参考一下

https://clipboardjs.com/

clipboard.on('success', function(e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);
    e.clearSelection();
});
clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
});

后来仔细想想,问题应该不在代码层面,于是就从浏览器默认设置里面去查找问题。

有一种说法是,要必须利用JavaScript + flash来实现复制粘贴,解决兼容性,看了一下,这方方法很复杂。于是就从flash方面下手。

允许浏览器默认设置里面的flash加载即可。

chrome浏览器下JavaScript实现clipboard时无法访问剪切板解决方案第1张chrome浏览器下JavaScript实现clipboard时无法访问剪切板解决方案第2张chrome浏览器下JavaScript实现clipboard时无法访问剪切板解决方案第3张chrome浏览器下JavaScript实现clipboard时无法访问剪切板解决方案第4张

这样可以从技术上解决这个问题。

但是在业务人员使用的时候,可能不知道这么做,可以加上一个业务上的友好提示:

clipboard.on('success', function(e) {
//复制粘贴成功回调函数。代码执行到这里,说明可以chrome设置成功
//成功后则写入本地
window.localStorage.setItem("chromeAllowFlash","true");
}

然后,在具体点击复制到剪切板的时候,前面加一个判断:

var chromeAllowFlash = window.localStorage.getItem("chromeAllowFlash");
                        //解决chrome浏览器由于安全原因,禁止脚本访问剪切板的问题
                        if(navigator.userAgent.indexOf("Chrome")>-1 && !chromeAllowFlash){
                            alert("如果chrome浏览器复制失败,请在[设置]-[高级设置]-[内容设置]-[Flash]设置下,设置允许Flash,关闭[先询问]");
                        }

以上,仅供参考。

免责声明:文章转载自《chrome浏览器下JavaScript实现clipboard时无法访问剪切板解决方案》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇【阿里云产品公测】消息队列服务MQS使用分享Java开启事务操作数据库下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

uni-app开发规范

为了实现多端兼容,综合考虑编译速度,运行性能等因素,uni-app约定了如下开发规范: 页面文件遵循Vue单文件组件(SFC)规范 组件标签靠近小程序规范,详见uni-app组件规范 接口能力(JS API)靠近微信小程序规范,但需将前缀wx替换为uni,详见uni-app接口规范 数据绑定及事件处理同Vue.js规范,同时补充了App及页面的生命...

oracle-gi安装

############################################### 在cs6.5,cs7.2上安装grid11.2.0.1 和database11.2.0.1还是有问题 1.i386与i686的问题 2.cs7.2中的semmni内核参数问题  已经设置了kernel.sem = 250 32000 100 128这四个值,但安...

初次使用BAT,请检查Chrome浏览器和ChromeDriver兼容性

ChromeDriver可以理解为Chrome驱动,它是架在BAT程序和Chrome之间的桥梁。但是ChromeDriver的问题是,每个版本的兼容范围很窄,通常只能兼容3个Chrome版本。 因此,需要检查BAT文件夹内的ChromeDriver版本是否能兼容本机的Chrome 步骤: 1. 查看Chrome版本 2. 查看ChromeDriver版本...

为什么使用C#开发软件的公司和程序员都很少?

特别是在国内, 在职位搜索网站indeed,职位关键字与数量的对应关系如下(搜索时实时数据): Java - 49624 Python - 16802 JavaScript - 25452 C ++ - 36569 C# - 14267 很显然,C#相关的职位数量是明显落后的,这是为什么呢? C#由编程界的神级人物Anders Hejlsberg主持...

【精彩回顾】第二届微医前端技术沙龙(附PPT下载)

5 月 25 日,以「无界」为主题的第二届微医前端技术沙龙成功举办。本届沙龙的演讲题目涵盖了前端技术几个主要的应用场景,包括服务端、桌面端以及跨平台的开发。最近几年前端技术发展非常快,各种可以提高开发效率的新技术和框架层出不穷,让原来的前端工程师蜕变成了新一代的全端工程师,技术之间的界限被打破,相互碰撞、融合和进化。 活动伊始,本届沙龙活动主持人,来自...

SharePoint 2016 修改左上角连接

SharePoint 2016默认会有左上角这样的一个功能。  估计都想把它改掉。 方法1: 打开,输入下面的命令,可将图中的sharepoint修改为想要的文字 $webapp = Get-SPWebApplication “http://XXXXX.com”   $webapp.SuiteNavBrandingText = “替换sharepoin...