打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
浏览器复制(解决悬浮层不能复制,兼容各大浏览器)

浏览器复制其实是一个十分令人头疼的问题,因为这涉及到浏览器安全,所以浏览器本生不会提供相应接口,我们也没有办法通过纯js来实现这个功能,但是你会看到很多网站,如百度云盘他们却做到了这个功能,那究竟他们是如何实现的,今天就让我带你去看看他们的秘密。

首先这个功能对我是十分重要的,因为去转盘网的私密分享必须要具备这个功能,截图如下:

只要你点击点我复制按钮,网盘私密分享的密码就会自动的被复制到你的浏览器。其实这个功能本人最开始做的时候还是付出很多时间,因为他涉及到悬浮层的复制,问题的难度陡然增大许多,不过现在我还是愿意公开代码,希望大家喜欢。顺便我我指出其他几篇我写的博客代码,希望喜欢:

百度网盘爬虫

百度图片爬虫

ok搜搜爬虫源码

java分词算法

邀请好友注册

数据库自动备份

好的,现在让我们言归正转,浏览器复制需要两个插件,请先下载:下载地址1下载地址2

代码如下:
  • varclip=null;

    clip =newZeroClipboard.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;

    varid=get_param("id");

    vartype=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";//私密分享时显示

最后要影藏。本人建个qq群,欢迎大家一起交流技术, 群号:512245829 喜欢微博的朋友关注:转盘娱乐 即可。


本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
跨浏览器复制神器 ZeroClipboard 2.x快速入门详解
ZeroClipboard.js替代方案:纯js实现不使用flash的跨浏览器复制内容到剪贴板利器 – AspxHtml学习分享网
ZeroClipboard支持IE,firefox,Chrome复制到剪贴板
[转载]使用ZeroClipboard解决跨浏览器复制到剪贴板的问题
10种JS控制DIV的显示隐藏代码
用clipboard.js实现纯JS复制文本到剪切板 比ZeroClipboard更好用
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服