文档章节

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

赤尔宝丁
 赤尔宝丁
发布于 2016/06/12 09:40
字数 689
阅读 57
收藏 2

      浏览器复制其实是一个十分令人头疼的问题,因为这涉及到浏览器安全,所以浏览器本生不会提供相应接口,我们也没有办法通过纯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";//私密分享时显示

最后要影藏。

© 著作权归作者所有

共有 人打赏支持
赤尔宝丁
粉丝 6
博文 18
码字总数 20234
作品 0
成都
兼容所有浏览器的复制到剪切板功能,悬浮层不能复制问题解决

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

haoning747
2016/06/12
0
0
Zero Clipboard-js复制到剪切板(支持多浏览器)

在前端开发中经常会遇到这样的问题,要求用js将输入框或者div中的内容复制到剪切板。在ie下可以通过clipboardData.setData来实现,但是这个方法却不能兼容其他的浏览器。显然这种方法在这个浏...

mickelfeng
2014/01/22
0
0
前端er怎样操作剪切复制以及禁止复制+破解等

前言 有时候我们经常会碰到这些场景:玩掘金、知乎的时候复制一段文字,总是会在内容后面加上一些版权信息,以及像小说网站等都有禁止选中,禁止复制这种功能,还有点击自动复制账号的功能。...

OBKoro1
08/09
0
0
javascript 实现跨浏览器的粘贴,复制,剪切功能(转)

这两天在做跨浏览器的粘贴、复制、剪切功能。 本以为是很简单的事,原来并不简单。 网上查了很多资料。都是跨浏览器把文本复制到剪切板的实现方案(zero clipboard.js)。没有跨浏览器粘贴的...

苏叶晚晚
2012/09/26
0
0
xhEditor v1.1.8 发布,开源XHTML在线编辑器

xhEditor是一个基于jQuery开发的简单迷你并且高效的可视化XHTML编辑器,基于网络访问并且兼容IE6、IE7、IE8、IE9、Firefox 3.0+、Opera 9.6+、Chrome 1.0+、Safari 3.22+。 该版本主要提供以...

V
2011/07/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

咕泡-Factory设计模式笔记

个人感悟: 设计模式都是处理复杂问题的,如果问题本身很简单,使用设计模式反而累赘,增加了开发的复杂性 遇到最简单的情况,直接 new 如果创建对象的过程简单,但是需要匹配不同情况,返回...

职业搬砖20年
15分钟前
0
0
Java中的锁分类

在读很多并发文章中,会提及各种各样锁如公平锁,乐观锁等等,这篇文章介绍各种锁的分类。介绍的内容如下: 公平锁/非公平锁 可重入锁 独享锁/共享锁 互斥锁/读写锁 乐观锁/悲观锁 分段锁 偏...

Funcy1122
23分钟前
0
0
Ansible随机数

想为你的Ansible剧本取一个随机数?还想在接下来的运行中保持系统的等幂性?这里有一个答案。 假如,你要为一大批服务器设置cron任务,却不想让它们同时启动,你可以这样设置分钟数: minute...

大别阿郎
32分钟前
0
0
SpringCloud之服务注册中心Eureka

本系列介绍的配置均基于 Spring Boot 2.0.1.RELEASE 版本和 Spring Cloud Finchley.SR1 服务注册中心 Spring Cloud 已经帮我们实现了服务注册中心,我们只需要很简单的几个步骤就可以完成。 ...

熊小飞呀
今天
7
1
“Comparison method violates ...”异常的再现方法

前提条件:JDK8 代码: import java.util.ArrayList;import java.util.Collections;import java.util.Comparator;import java.util.List;public class Test { public stat......

hunterli
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部