浏览器的复制到剪切板功能,兼容全部浏览器,悬浮层不能复制问题解决

      浏览器复制实际上是一个十分使人头疼的问题,由于这涉及到浏览器安全,因此浏览器本生不会提供相应接口,咱们也没有办法经过纯js来实现这个功能,可是你会看到不少网站,如百度云盘他们却作到了这个功能,那究竟他们是如何实现的,今天就让我带你去看看他们的秘密。javascript

      首先这个功能对我是十分重要的,由于去转盘网的私密分享必需要具有这个功能,截图以下:html

   

只要你点击点我复制按钮,网盘私密分享的密码就会自动的被复制到你的浏览器。其实这个功能本人最开始作的时候仍是付出不少时间,由于他涉及到悬浮层的复制,问题的难度陡然增大许多,不过如今我仍是愿意公开代码,但愿你们喜欢。顺便我我指出其余几篇我写的博客代码,但愿喜欢:java

百度网盘爬虫ajax

百度图片爬虫算法

ok搜搜爬虫源码数据库

java分词算法json

邀请好友注册浏览器

数据库自动备份安全

  好的,如今让咱们言归正转,浏览器复制须要两个插件,请先下载:下载地址1 下载地址2ide

  代码以下:

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

最后要影藏。

相关文章
相关标签/搜索