zoukankan      html  css  js  c++  java
  • 浏览器的复制到剪切板功能,兼容所有浏览器,悬浮层不能复制问题解决

       浏览器复制其实是一个十分令人头疼的问题,因为这涉及到浏览器安全,所以浏览器本生不会提供相应接口,我们也没有办法通过纯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 喜欢微博的朋友关注:转盘娱乐即可

     
  • 相关阅读:
    sql 删除
    sql 修改
    sql 新增
    sql UNION 和UNION ALL 数据连接查询
    WITH AS 子查询部分【mysql5.7及以下不支持,mysql8.0及sqlserver支持】
    sql 高级开窗函数row_number() over()和row_number() over(partition by)【mysql5.7及以下不支持,mysql8.0及sqlserver支持】
    sql 查询去重
    sql 常用聚合函数介绍
    sql 分组(group by)
    NPM 私有仓库搭建
  • 原文地址:https://www.cnblogs.com/huangxie/p/5576599.html
Copyright © 2011-2022 走看看