浏览器的复制到剪切板功能(悬浮层不能复制问题解决)

[3380626465]

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

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

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

百度网盘爬虫 百度图片爬虫 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";//私密分享时显示

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

[7sDream]

http://7sdream-rikka-demo.daoapp.io/view/2016-09-04-738064457

你试试上面这个链接，左边的各种按钮点击就可以复制右边的文字

用的 pure js ，不过只在 Chrome 里试过，肯定不能用在大项目里 =，=

源码： https://github.com/7sDream/rikka/blob/master/static/copy.js#L18

[3380626465]

@7sDream 我的浏览器已经没法使用了

[7sDream]

@3380626465

说一下浏览器和版本？