Zclip复制页面内容到剪贴板兼容各浏览器

Zclip:复制页面内容到剪贴板兼容各浏览器

WEB开发中,要让用户复制页面中的一段代码、URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮,点击这个复制按钮,内容将会被复制,然后用户可以粘贴到想粘贴的地方,下面介绍一种使用Zclip实现的兼容主流浏览器的方式。

利用插件来写的话就比较简单,源码下载

<html>
<head>
    <title>Index</title>
    <script src="jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="jquery.zclip.js"></script>
    <script type="text/javascript">
        $(function () {
            $(‘.copy‘).zclip({
                path: ‘ZeroClipboard.swf‘,
                copy: function () {//复制内容
                     return $(this).prev().prev().val();
                },
                afterCopy: function () {//复制成功
                    var msg= $(this).next().show();
                    setTimeout(function () { msg.hide() }, 2000);
                }
            });

        });
    </script>

</head>
<body>
<div>
  <textarea>请输入内容</textarea><br/>
  <a href="#" class="copy">复制内容</a>
  <span style="color:red; display:none;">复制成功</span>
</div>

</body>
</html>

参数说明

path:swf调用路径,必填项,默认为:ZeroClipboard.swf

copy:复制的内容,必填项,任意字符串,也可以是回调函数返回的内容

beforeCopy:复制内容前回调函数,可选

afterCopy:复制内容后回调函数,可选

更多属性参考:http://steamdev.com/zclip/

Table中循环绑定复制链接

工作中碰到一个问题,在这里把问题和解决方案列出来,仅供参考,要求实现下面的形式:

下面的写法有并不能直接实现效果:

<!DOCTYPE html>
<html>
<head>
    <title>table</title>
    <script src="jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="jquery.zclip.js"></script>
    <script type="text/javascript">
        $(function () {
            $(‘.copy‘).zclip({
                path: ‘ZeroClipboard.swf‘,
                copy: function () {//复制内容
                     return $(this).prev().prev().html();
                },
                afterCopy: function () {//复制成功
                    var msg= $(this).next().show();
                    setTimeout(function () { msg.hide() }, 2000);
                }
            });

        });
    </script>

</head>
<body>

<table cellspacing="0" cellpadding="3" rules="all" border="1" style="background-color: White; border-color: #CCCCCC; width: 70%;  border-collapse: collapse;">
<tr>
    <th>编号</th>
    <th>姓名</th>
    <th>链接</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>
    <span>http://www.baidu.com</span><br/>
    <a href="#" class="copy">复制链接</a>
    <span style="color:red; display:none;">复制成功</span>
</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>
    <span>http://www.taobao.com</span><br/>
    <a href="#" class="copy">复制链接</a>
    <span style="color:red; display:none;">复制成功</span>
</td>
</tr>

</table>

</body>
</html>

加入定位(position: relative;)之后就行了,我也没有搞明白是为什么,在此记录一下,如果有高手路过,请指点一下。源码下载

<!DOCTYPE html>
<html>
<head>
    <title>table</title>
     <style type="text/css">
        .pos{
          position: relative;
        }
    </style>
    <script src="jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="jquery.zclip.js"></script>
    <script type="text/javascript">
        $(function () {
            $(‘.copy‘).zclip({
                path: ‘ZeroClipboard.swf‘,
                copy: function () {//复制内容
                     return $(this).prev().prev().html();
                },
                afterCopy: function () {//复制成功
                    var msg= $(this).next().show();
                    setTimeout(function () { msg.hide() }, 2000);
                }
            });

        });
    </script>

</head>
<body>

<table cellspacing="0" cellpadding="3" rules="all" border="1" style="background-color: White; border-color: #CCCCCC; width: 70%;  border-collapse: collapse;">
<tr>
    <th>编号</th>
    <th>姓名</th>
    <th>链接</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td class="pos">
    <span>http://www.baidu.com</span><br/>
    <a href="#" class="copy">复制链接</a>
    <span style="color:red; display:none;">复制成功</span>
</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td class="pos">
    <span>http://www.taobao.com</span><br/>
    <a href="#" class="copy">复制链接</a>
    <span style="color:red; display:none;">复制成功</span>
</td>
</tr>

</table>

</body>
</html>

说明

1、代码下载后需要部署到服务器上运行才行,比如在本地用IIS建一个网站或者虚拟目录

2、参考文章: http://www.helloweba.com/view-blog-222.html

http://www.cnblogs.com/RascallySnake/archive/2010/05/07/1729563.html

时间: 07-21

Zclip复制页面内容到剪贴板兼容各浏览器的相关文章

Zclip:复制页面内容到剪贴板兼容各浏览器

WEB开发中,要让用户复制页面中的一段代码.URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮,只需要轻轻一点这个复制按钮,内容将会被复制,然后用户可以粘贴到想粘贴的地方. 效果如下所示: 下面将结合实例讲解如何使用一款基于jQuery的插件——Zclip来实现复制内容到剪贴板的功能,只说如何使用,不讲原理.其实IE上有个方法可以实现点击复制,但是由于只是IE独有,所以我们不提倡.而Zclip是利用一个隐藏的flash文件来完成复制的功

JS复制内容到剪贴板(兼容FF/Chrome/Safari所有浏览器)

现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个通杀所有浏览器的js复制内容到剪贴板的方案: 这个方案是一个最流行的方法: 著名的Clipboard Copy解决方案 利用一个clipboard.swf作为桥梁,复制内容到剪贴板. 原理是:创建一个隐藏的flash文件,同时给给flash的变量FlashVars 赋值“clipboard=..”,通过这个赋

js实现复制到粘贴板,兼容各浏览器

网上搜js实现复制粘贴的文章一大堆,但是没几个能用的.有的文章说Clipboard Copy解决,利用一个clipboard.swf作为桥梁,复制内容到剪贴板. 听说的是兼容IE.Firefox.Opera.chrome. Safari,但是必须浏览器支持Flash,考虑到Flash支持不是100%,所以我摒弃了这个方案. 说说我的实现,灵感来自优酷分享的复制,在此之上加以修改的.经测试,支持IE.Firefox.Opera.chrome.搜狗浏览器.360等主流浏览器,Safari是本身不支持

使用clipboard.js复制页面内容到剪切板

最近在做一个的智能客服Web端浏览器应用,其中有一项需求是客户在获取系统返回的 答案后点击“复制答案”按钮将答案复制到系统剪切板.本以为这是一个小case,但是发现如果 要对各种主流浏览器都有良好的兼容性并不简单.原因在于出于安全原因,大多数现代浏览 器都未提供通用的剪贴板复制接口(或即便有,也默认被禁用). 上网搜索了一下,现有的方案大致有两种: 一:使用原生javascript中window.clipboardData实现复制到剪贴板功能: 二:使用Zero Clipboard库: 在尝试了

脚本禁止复制页面内容

1 <script> 2 //禁止鼠标右键 3 $(document).bind("contextmenu", function (e) { 4 return false; 5 }); 6 //禁止选中内容 7 $(document).bind("selectstart", function (e) { 8 return false; 9 }); 10 </script>

兼容各浏览器 复制内容到剪贴板

<script type="text/javascript" src="../Scripts/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="../js/ZeroClipboard/ZeroClipboard.js"></script> <script type="text/ja

《JS实现复制内容到剪贴板功能,可兼容所有PC浏览器,不兼容手机端》

前记:本来原生的JS是有提供一个函数来实现这个功能(window.clipboardData),但是很遗憾,这个函数仅仅支持IE和FF浏览器,所以基本用处不大.下边介绍的是一个第三方插件库(ZeroClipboard.js). ZeroClipboard.js在Git上的地址为:https://github.com/zeroclipboard/zeroclipboard 注意:此js库不支持兼容手机端(包括Android.IOS),仅支持PC端浏览器. 第一步:将插件库引入到工程中. 把Git上

黄聪:JS实现复制到剪贴板功能,兼容所有浏览器(转)

两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能会更大.成长以来,很多朋友也听说到不少激励自己上进的话,但不是每个人都能一直坚持做下来,其实,这个跟自己的性格以及周围的环境都有很大关系,只能说多找方法.条件给自己鼓励,不断提高对自己的要求,才有机会获得多一点的成就. 今年下半年打算在组内建个叫『移动开发指南』的站点,在网站框架搭建过程,有一个功能

【转】js实现复制到剪贴板功能,兼容所有浏览器

两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能会更大.成长以来,很多朋友也听说到不少激励自己上进的话,但不是每个人都能一直坚持做下来,其实,这个跟自己的性格以及周围的环境都有很大关系,只能说多找方法.条件给自己鼓励,不断提高对自己的要求,才有机会获得多一点的成就. 今年下半年打算在组内建个叫『移动开发指南』的站点,在网站框架搭建过程,有一个功能