常规利用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. mysql字符串连接,重复等字符串函数总结

    mysql concat()函数 MySQL的concat函数可以连接一个或者多个字符串,如 select concat('10'); 输出 10 select concat('11','22','3 ...

  3. printf格式控制详解

    format 参数输出的格式,定义格式为 %[flags][width][.precision][length]specifier specifier在最后面.定义了数据类型. Where the s ...

  4. CSS实现强制换行-------Day 78

    事实上最早的时候也考虑过这个问题,当时还在想须要判定文字的长度么,实在是傻到极点了,原来CSS中本来就有这个样式设置的.而今天正好看到了有这么一篇介绍.细致看了下,感觉还不错,这里也把实验的结果记录下 ...

  5. 设计模式(Abstract Factory)抽象工厂

    1. 需求: 设计一个电脑组装程序,对于组装品牌电脑. 用零件组装(主板.硬盘.显示器)由品牌提供的所有. 让我们组装一台联想电脑,板子.由联想提供. (眼下仅仅有Lenovo和Dell两种品牌) 2 ...

  6. android——使用pull解析xml文件

    1.persons.xml 将persons.xml文件放到src目录下.其代码如下: <?xml version='1.0' encoding='UTF-8' standalone='yes' ...

  7. 操作引入xml文件的书包(定位到指定节点)

    定位到指定节点:e0.1 <chtml><we>@{_samples/test.xml:HtokID=e0.1}</we></chtml> 上述表达式表 ...

  8. Principle of Computing (Python)学习笔记(5) BFS Searching + Zombie Apocalypse

    1 Generators   Generator和list comprehension非常类似 Generators are a kind of iterator that are defined l ...

  9. Spring中的p标签(转)good

    Spring的p标签是基于XML Schema的配置方式,目的是为了简化配置方式. 在XML文件头部添加xmlns:p="http://www.springframework.org/sch ...

  10. java反射小样例

    package reflect; import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundExc ...