V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
3380626465
V2EX  ›  程序员

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

  •  
  •   3380626465 · 2016-09-04 21:28:45 +08:00 · 2177 次点击
    这是一个创建于 2988 天前的主题,其中的信息可能已经有所发展或是发生改变。

    浏览器复制其实是一个十分令人头疼的问题,因为这涉及到浏览器安全,所以浏览器本生不会提供相应接口,我们也没有办法通过纯 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
        1
    7sDream  
       2016-09-04 22:35:43 +08:00
    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
        2
    3380626465  
    OP
       2016-09-05 10:01:42 +08:00
    @7sDream 我的浏览器已经没法使用了
    7sDream
        3
    7sDream  
       2016-09-05 10:35:27 +08:00
    @3380626465

    说一下浏览器和版本?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2726 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 07:13 · PVG 15:13 · LAX 23:13 · JFK 02:13
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.