浏览器的复制到剪切板功能,兼容所有浏览器,悬浮层不能复制问题解决
2016-06-12 00:00
567 查看
摘要: 浏览器复制其实是一个十分令人头疼的问题,因为这涉及到浏览器安全,所以浏览器本生不会提供相应接口,我们也没有办法通过纯js来实现这个功能,但是你会看到很多网站,如百度云盘他们却做到了这个功能,那究竟他们是如何实现的,今天就让我带你去看看他们的秘密。
浏览器复制其实是一个十分令人头疼的问题,因为这涉及到浏览器安全,所以浏览器本生不会提供相应接口,我们也没有办法通过纯js来实现这个功能,但是你会看到很多网站,如百度云盘他们却做到了这个功能,那究竟他们是如何实现的,今天就让我带你去看看他们的秘密。
首先这个功能对我是十分重要的,因为去转盘网的私密分享必须要具备这个功能,截图如下:
![](http://static.oschina.net/uploads/space/2016/0612/093809_0ydb_2303983.png)
只要你点击点我复制按钮,网盘私密分享的密码就会自动的被复制到你的浏览器。其实这个功能本人最开始做的时候还是付出很多时间,因为他涉及到悬浮层的复制,问题的难度陡然增大许多,不过现在我还是愿意公开代码,希望大家喜欢。顺便我我指出其他几篇我写的博客代码,希望喜欢:
百度网盘爬虫
百度图片爬虫
ok搜搜爬虫源码
java分词算法
邀请好友注册
数据库自动备份
好的,现在让我们言归正转,浏览器复制需要两个插件,请先下载:下载地址1 下载地址2
代码如下:
代码中的记录下载信息等都是和去转盘网有关系,你不必关心,下面一句:
非常重要,因为要悬浮层复制,如果是相对布局flash是找不见覆盖按钮的,所以开始的时候
document.getElementById("theme-popover").style.visibility="visible";//私密分享时显示
最后要影藏。
浏览器复制其实是一个十分令人头疼的问题,因为这涉及到浏览器安全,所以浏览器本生不会提供相应接口,我们也没有办法通过纯js来实现这个功能,但是你会看到很多网站,如百度云盘他们却做到了这个功能,那究竟他们是如何实现的,今天就让我带你去看看他们的秘密。
首先这个功能对我是十分重要的,因为去转盘网的私密分享必须要具备这个功能,截图如下:
![](http://static.oschina.net/uploads/space/2016/0612/093809_0ydb_2303983.png)
只要你点击点我复制按钮,网盘私密分享的密码就会自动的被复制到你的浏览器。其实这个功能本人最开始做的时候还是付出很多时间,因为他涉及到悬浮层的复制,问题的难度陡然增大许多,不过现在我还是愿意公开代码,希望大家喜欢。顺便我我指出其他几篇我写的博客代码,希望喜欢:
百度网盘爬虫
百度图片爬虫
ok搜搜爬虫源码
java分词算法
邀请好友注册
数据库自动备份
好的,现在让我们言归正转,浏览器复制需要两个插件,请先下载:下载地址1 下载地址2
代码如下:
var clip=null; clip = new ZeroClipboard.Client();//new 一个对像 clip.setText(null); ZeroClipboard.setMoviePath( '${pageContext.request.contextPath}/media/js/ZeroClipboard.swf'); //和html不在同一目录需设置setmoviepath //ZeroClipboard.setMoviePath( '../media/js/zeroclipboard10.swf'); clip.setHandCursor(true); clip.addEventListener('mousedown', function(client) { window.passwd = document.getElementById("file-password").value; clip.setText(window.passwd); }); clip.addEventListener('complete', function (client, text) { window.url = document.getElementById("file-url").value; var id=get_param("id"); var type=get_param("type"); window.open(window.url,'_self'); $('.theme-popover').hide(); $('.theme-popover-mask').hide();//将复制框dismiss document.getElementById("theme-popover").style.visibility="hidden";//影藏 //记录下载信息 $.ajax({ type: "post", url: "${pageContext.request.contextPath}/download/statistic.action", dataType:"json", data:{ id:id, type:type }, success:function(data){;} }); }); clip.glue('copy-password','copy-dialog');
代码中的记录下载信息等都是和去转盘网有关系,你不必关心,下面一句:
document.getElementById("theme-popover").style.visibility="hidden";//影藏
非常重要,因为要悬浮层复制,如果是相对布局flash是找不见覆盖按钮的,所以开始的时候
document.getElementById("theme-popover").style.visibility="visible";//私密分享时显示
最后要影藏。
相关文章推荐
- Extjs4.0 最新最全视频教程
- Javascript中toFixed方法的改进
- 5个常见可用性错误和解决方案
- js数组实现图片轮播
- js可突破windows弹退效果代码
- JSP脚本漏洞面面观
- 使用BAT一句话命令实现快速合并JS、CSS
- js显示当前星期的起止日期的脚本
- 爆炸式的JS圆形浮动菜单特效代码
- js select常用操作控制代码
- JS实现不使用图片仿Windows右键菜单效果代码
- 从jsp发送动态图像
- 原生js结合html5制作小飞龙的简易跳球
- js 页面模块自由拖动实例
- js实现小鱼吐泡泡在页面游动特效
- js 提交和设置表单的值
- PHP VBS JS 函数 对照表
- node.js抓取并分析网页内容有无特殊内容的js文件
- PHP+JS实现大规模数据提交的方法
- 仿51JOB的地区选择效果(可选择多个地区)