常规利用JS编写的网页复制功能只对IE有效,无法做到兼容其它浏览器,代码如下:

function copyToClipBoard(){
var clipBoardContent="";
clipBoardContent+=document.getElementById("giftNumber").value; //可以是任何html ElementId,自己设置
if(window.clipboardData){
window.clipboardData.clearData();
window.clipboardData.setData("Text", clipBoardContent);
alert("已成功复制!");
}else if(navigator.userAgent.indexOf("Opera") != -1){
window.location = clipBoardContent;
alert("复制失败"); //链接跳转
}else if (window.netscape){
try{
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
}catch (e){
alert("您的当前浏览器设置已关闭此功能!请按以下步骤开启此功能!\n新开一个浏览器,在浏览器地址栏输入'about:config'并回车。\n然后找到'signed.applets.codebase_principal_support'项,双击后设置为'true'。\n声明:本功能不会危极您计算机或数据的安全!");
}
var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
if (!clip) return;
var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
if (!trans) return;
trans.addDataFlavor('text/unicode');
var str = new Object();
var len = new Object();
var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);
var copytext = clipBoardContent;
str.data = copytext;
trans.setTransferData("text/unicode",str,copytext.length*2);
var clipid = Components.interfaces.nsIClipboard;
if (!clip) return false;
clip.setData(trans,null,clipid.kGlobalClipboard);
}else if(navigator.userAgent.indexOf("Safari") != -1){
$("#copyTip").html("您使用的浏览器不支持复制功能,请使用右键复制").show();
//alert("您使用的浏览器不支持复制功能,请使用右键复制")
}
}

ZeroClipboard是利用flash为媒介实现兼容各浏览器复制功能一款jquery插件(测试通过浏览器IE6-8/chrome27/firefox22/safari 5.1.5/opera12.12),通过简单的调用实现复制功能:

$(document).ready(function() {
var clip = new ZeroClipboard($("#d_clip_button"), {
moviePath: "ZeroClipboard.swf"
}); clip.on('load', function (client) {
debugstr("Flash movie loaded and ready.");
}); clip.on('noFlash', function (client) {
$(".demo-area").hide();
debugstr("Your browser has no Flash.");
}); clip.on('wrongFlash', function (client, args) {
$(".demo-area").hide();
debugstr("Flash 10.0.0+ is required but you are running Flash " + args.flashVersion.replace(/,/g, "."));
}); clip.on('complete', function (client, args) {
debugstr("Copied text to clipboard: " + args.text);
}); // jquery stuff (optional)
function debugstr(text) {
$("#d_debug").append($("<p>").text(text));
} });

demo下载

注意:

1、需以web形式访问才有效。

2、IE下复制按钮为可点击的那层DOM最后一级(不是最后一级有时会出问题,如把b换成span在IE下无效)
<button id="copyBtn" class="my_clip_button" title="Click me to copy to clipboard." data-clipboard-target="giftNumber" data-clipboard-text="Default clipboard text from attribute"><b>Copy To Clipboard...</b></button>

参考资料:

http://jonrohan.github.io/ZeroClipboard/
https://github.com/zeroclipboard/ZeroClipboard
http://js8.in/407.html

ZeroClipboard插件:兼容各浏览器网页复制功能的更多相关文章

  1. 图片旋转+剪裁js插件(兼容各浏览器) « 张鑫旭-鑫空间-鑫生活

    图片旋转+剪裁js插件(兼容各浏览器) « 张鑫旭-鑫空间-鑫生活 图片旋转+剪裁js插件(兼容各浏览器) by zhangxinxu from http://www.zhangxinxu.com 本 ...

  2. js兼容各个浏览器的复制功能

    看似简单的复制功能,用js做起来竟然遇到各种情况.刚开始在网上搜索到复制功能的几种实现方法,但是都不兼容.最后还是用的插件代码如下 html模板 <tr> <td>1</ ...

  3. ZeroClipboard.js兼容各种浏览器复制到剪切板上

    http://www.cnblogs.com/huijieoo/articles/5569990.html <script type="text/javascript" sr ...

  4. 兼容多浏览器的网页复制插件(ZeroClipboard)

    前言: 常规利用JS编写的网页复制功能是最简单的方法,但是只对IE有效,无法做到兼容其它浏览器,对其他浏览器也就只能弹窗提示用户手动复制了. <script type="text/ja ...

  5. 兼容各个浏览器的jquyer zclip复制文本插件 无效的解决办法

    项目中使用点击文本复制功能,用了这个兼容各个浏览器的插件,但是发现放在最前面正常,放到嵌套的html中就失效. 解决办法: <span style="position: relativ ...

  6. 一个实现浏览器网页与本地程序之间进行双向调用的轻量级、强兼容、可扩展的插件开发平台—PluginOK中间件

    通过PluginOK中间件插件平台(原名本网通WebRunLocal)可实现在网页中的JavaScript脚本无障碍访问本地电脑的硬件.调用本地系统的API及相关组件,同时可彻底解决ActiveX组件 ...

  7. [转载]html5直接在网页上播放视频音频兼容所有浏览器

    文章给大家分享一个html5直接在网页上播放视频兼容所有浏览器,有需要的同学可参考. HTML5可以用video标签来播放视频 当前,video 元素支持三种视频格式: 格式 IE Firefox O ...

  8. uploadPreview 兼容多浏览器图片上传及预览插件使用

    uploadPreview兼容多浏览器图片上传及预览插件 http://www.jq22.com/jquery-info2757 Html 代码 <div class="form-gr ...

  9. chorme插件 ,在浏览器上模拟手机,pad 查看网页|前端技术开发必备插件

    网址:http://lab.maltewassermann.com/viewport-resizer/使用方法:1在chrome浏览器上方右击,显示书签栏 2 打开插件网址,将<ignore_j ...

随机推荐

  1. SuperSocket源码解析之开篇

    一 简介 官方介绍:SuperSocket 是一个轻量级, 跨平台而且可扩展的 .Net/Mono Socket 服务器程序框架.你无须了解如何使用 Socket, 如何维护 Socket 连接和 S ...

  2. Windows Azure 社区新闻综述(#78 版)

    欢迎查看最新版本的每周综述,其中包含有关云计算和 Windows Azure 的社区推动新闻.内容和对话.以下是本周的亮点. 博客文章: 博客:Windows Azure BizTalk 服务:如何开 ...

  3. dsdfdsfd

    aibang.com/show/1816725179-1268699976/product/7069113.html aibang.com/show/1816725179-1268699976/pro ...

  4. 每天4个linux命令--步骤一

     1 :Linux的诞生 Linux由芬兰赫尔辛基大学的Linus Torvalds创建 1991年10月,Linux第一个公开版 0.02版发布 1994年3月,Linux 1.0版发布 Linus ...

  5. textarea内容有换行时存入数据库丢失问题的解决 (转载)

    http://blog.csdn.net/zhang_j_h/article/details/44563167 存入: function GetInputData(id, cmd) { var pos ...

  6. Ubuntu Crontab

    Ubuntu启用Crontab 启动cron服务: service cron start 如果需要设置为开机时自动启动,则执行 sysv-rc-conf --level 35 cron on 另外,u ...

  7. linux脚本: makefile以及链接库

    Linux makefile 教程 非常详细,且易懂 http://blog.csdn.net/liang13664759/article/details/1771246 //sort.c #incl ...

  8. JDK 环境变量配置(Mac)

    Mac JDK 安装过后 修改 ~/. bash_profile 配置环境变量 修改内容: JAVA_HOME=$(/usr/libexec/java_home) export JAVA_HOME P ...

  9. Java内部类——成员内部类

    成员内部类的意思就是,一个外层类里面包含着一个非static的class,举例如下: class OuterClass { //变量,函数定义... class InnerClass { //变量,函 ...

  10. Qt递归拷贝和删除目录

    最近在翻看项目代码时,看到了这两个函数,想到这个功能十分常用,因此拿出来与大家分享,希望对大家有用.几点说明: 1.记得当初写代码那会,是参考了网上的帖子写的,做了一点小修改.因此代码源于网络. 2. ...