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 ...
随机推荐
- android switch语句case expressions must be constant expressions
在项目中遇到这样的Exception:case expressions must be constant expressions public class StandingCityActivity e ...
- 异常:未能载入文件或程序集”DAL”或它的某一个依赖项——解决的方法
以下是我再使用抽象工厂+反射重构机房时,在Factoy中出现了以下一个问题: 去网上查了一下资料,发现这是一个非常普遍的问题,它出现的原因主要有两种: 第一种: 载入DLL路径错误.解决的方法是调整D ...
- CSS:重量和级联规则,确定其优先级
资源:http://www.ido321.com/1063.html 首先,给大家看一篇关于CSS优先级的演示样例:http://www.ido321.com/76.html 一.主要的优先级规则 比 ...
- cocos2dx-lua捕获用户touch事件的几种方式
这里仅仅针对lua 1.为每一个关心的事件注冊回调函数 详细分为下面几种 1>单点触摸 注冊函数为 cc.Handler.EVENT_TOUCH_BEGAN = 40 cc.Handl ...
- CodeForces Round #173 (282E) - Sausage Maximization 字典树
练习赛的时候这道题死活超时....想到了高位确定后..低位不能对高位产生影响..并且高位要尽可能的为1..就是想不出比较好的方法了实现... 围观大神博客..http://www.cnblogs.co ...
- Excel 公式(细节若干)
查找与引用: 1.如果需要找出匹配元素的位置而不是匹配元素本身,则应该使用 MATCH 函数而不是 LOOKUP 函数. 2.VLOOKUP的第一个参数允许使用通配符“*”来表示包含的意思,把*放在字 ...
- Maven+Eclipse+Spring MVC简单实例
1. ToolsVersion and Preparations: Eclipse: 3.5 (eclipse-jee-galileo-win32) Maven: 2.0.11 Spring MVC ...
- Codeforces Round #112 (Div. 2)---A. Supercentral Point
Supercentral Point time limit per test 2 seconds memory limit per test 256 megabytes input standard ...
- linux命令:rm
删文件要一个个回答y,谁有好办法自动删除? rm -rf 用rm递归删除目录下面的所有.o文件: find . -name "*.o" | xargs rm -f :
- Android程序检测网络是否可用
在做Android应用程序中,连接网络的时候,常常要用到检测网络状态是否可用,在这里分享一个比较好用的方法. 本人参考:http://blog.csdn.net/sunboy_2050/article ...