ZeroClipboard插件:兼容各浏览器网页复制功能
常规利用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));
}
});
注意:
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插件:兼容各浏览器网页复制功能的更多相关文章
- 图片旋转+剪裁js插件(兼容各浏览器) « 张鑫旭-鑫空间-鑫生活
图片旋转+剪裁js插件(兼容各浏览器) « 张鑫旭-鑫空间-鑫生活 图片旋转+剪裁js插件(兼容各浏览器) by zhangxinxu from http://www.zhangxinxu.com 本 ...
- js兼容各个浏览器的复制功能
看似简单的复制功能,用js做起来竟然遇到各种情况.刚开始在网上搜索到复制功能的几种实现方法,但是都不兼容.最后还是用的插件代码如下 html模板 <tr> <td>1</ ...
- ZeroClipboard.js兼容各种浏览器复制到剪切板上
http://www.cnblogs.com/huijieoo/articles/5569990.html <script type="text/javascript" sr ...
- 兼容多浏览器的网页复制插件(ZeroClipboard)
前言: 常规利用JS编写的网页复制功能是最简单的方法,但是只对IE有效,无法做到兼容其它浏览器,对其他浏览器也就只能弹窗提示用户手动复制了. <script type="text/ja ...
- 兼容各个浏览器的jquyer zclip复制文本插件 无效的解决办法
项目中使用点击文本复制功能,用了这个兼容各个浏览器的插件,但是发现放在最前面正常,放到嵌套的html中就失效. 解决办法: <span style="position: relativ ...
- 一个实现浏览器网页与本地程序之间进行双向调用的轻量级、强兼容、可扩展的插件开发平台—PluginOK中间件
通过PluginOK中间件插件平台(原名本网通WebRunLocal)可实现在网页中的JavaScript脚本无障碍访问本地电脑的硬件.调用本地系统的API及相关组件,同时可彻底解决ActiveX组件 ...
- [转载]html5直接在网页上播放视频音频兼容所有浏览器
文章给大家分享一个html5直接在网页上播放视频兼容所有浏览器,有需要的同学可参考. HTML5可以用video标签来播放视频 当前,video 元素支持三种视频格式: 格式 IE Firefox O ...
- uploadPreview 兼容多浏览器图片上传及预览插件使用
uploadPreview兼容多浏览器图片上传及预览插件 http://www.jq22.com/jquery-info2757 Html 代码 <div class="form-gr ...
- chorme插件 ,在浏览器上模拟手机,pad 查看网页|前端技术开发必备插件
网址:http://lab.maltewassermann.com/viewport-resizer/使用方法:1在chrome浏览器上方右击,显示书签栏 2 打开插件网址,将<ignore_j ...
随机推荐
- wince下GetManifestResourceStream得到的Stream是null的解决
问题的引入 在编程过程中遇到下面这样一个问题: 有这样一个方法: public static AlphaImage CreateFromResource(string imageResourceNam ...
- Ajax的三种实现及JSON解析
本文为学习笔记,属新手文章,欢迎指教!! 本文主要是比较三种实现Ajax的方式,为以后的学习开个头. 准备: 1. prototype.js 2. jquery1.3.2.min.js 3. j ...
- 四大流行的java连接池之BoneCP篇
BoneCP 是一个开源的快速的 JDBC 连接池.BoneCP很小,只有四十几K(运行时需要log4j和Google Collections的支持,这二者加起来就不小了),而相比之下C3P0 要六百 ...
- HTML——左右側边栏布局
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- 异常configure: *** apu library not found.
安装modsecurity时,出现"configure: *** apu library not found.". 解决方法: yum install apr-util- ...
- PHP - 验证用户名
/** * * 函数名:_check_username($user_str,$min_num,$max_num); * 作用:检测用户名是否符合格式 * 参数: * 1:用户名 * 2:不得小于多少位 ...
- C# - MemoryStream
代码: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; ...
- Session 转台服务器的使用方法
Session的缺陷:为了保持自身的稳定,IIS在访问量大的时候,可能会不自觉的重启,这时候Session就会丢失用户就会被迫下线 解决方案1:将Session放到一个专门的转台服务器上 方案2:将S ...
- Internet基础
互联网是什么? Internet是一个互联网,它是将提供不同服务的,使用不同技术的,具有不同功能的物理网络互连起来而形成的. TCP/IP是一个协议集,它对Internet中主机的寻址方式,主机的命名 ...
- 【学习opencv第六篇】图像的反转操作
考试终于完了,现在终于有时间可以继续学习这个了.写这篇博客主要是因为以前一直搞不清楚图像数据到底是怎么存储的,以及这个step到底是什么,后来查了一下才知道原来step就是数据行的长度.. #incl ...