JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)


Posted in Javascript onMay 27, 2013

目前,如果使用javascript来写复制到剪贴板的代码,一般都是浏览器不兼容的。所以采用flash的方式,模拟一个层,再来复制,就可以做到全部浏览器都适用哦~

需要下载一个swf文件,和一个js文件。把这两个文件,和htm放到一起。
图示:

JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)


必须放在服务器端使用哦。
图示:

JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)


JS代码:
ZeroClipboard.js 
// Simple Set Clipboard System 
// Author: Joseph Huckaby 
var ZeroClipboard = { 
version: "1.0.7", 
clients: {}, // registered upload clients on page, indexed by id 
moviePath: 'ZeroClipboard.swf', // URL to movie 
nextId: 1, // ID of next movie 
$: function(thingy) { 
// simple DOM lookup utility function 
if (typeof(thingy) == 'string') thingy = document.getElementById(thingy); 
if (!thingy.addClass) { 
// extend element with a few useful methods 
thingy.hide = function() { this.style.display = 'none'; }; 
thingy.show = function() { this.style.display = ''; }; 
thingy.addClass = function(name) { this.removeClass(name); this.className += ' ' + name; }; 
thingy.removeClass = function(name) { 
var classes = this.className.split(/\s+/); 
var idx = -1; 
for (var k = 0; k < classes.length; k++) { 
if (classes[k] == name) { idx = k; k = classes.length; } 
} 
if (idx > -1) { 
classes.splice( idx, 1 ); 
this.className = classes.join(' '); 
} 
return this; 
}; 
thingy.hasClass = function(name) { 
return !!this.className.match( new RegExp("\\s*" + name + "\\s*") ); 
}; 
} 
return thingy; 
}, 
setMoviePath: function(path) { 
// set path to ZeroClipboard.swf 
this.moviePath = path; 
}, 
dispatch: function(id, eventName, args) { 
// receive event from flash movie, send to client 
var client = this.clients[id]; 
if (client) { 
client.receiveEvent(eventName, args); 
} 
}, 
register: function(id, client) { 
// register new client to receive events 
this.clients[id] = client; 
}, 
getDOMObjectPosition: function(obj, stopObj) { 
// get absolute coordinates for dom element 
var info = { 
left: 0, 
top: 0, 
width: obj.width ? obj.width : obj.offsetWidth, 
height: obj.height ? obj.height : obj.offsetHeight 
}; 
while (obj && (obj != stopObj)) { 
info.left += obj.offsetLeft; 
info.top += obj.offsetTop; 
obj = obj.offsetParent; 
} 
return info; 
}, 
Client: function(elem) { 
// constructor for new simple upload client 
this.handlers = {}; 
// unique ID 
this.id = ZeroClipboard.nextId++; 
this.movieId = 'ZeroClipboardMovie_' + this.id; 
// register client with singleton to receive flash events 
ZeroClipboard.register(this.id, this); 
// create movie 
if (elem) this.glue(elem); 
} 
}; 
ZeroClipboard.Client.prototype = { 
id: 0, // unique ID for us 
ready: false, // whether movie is ready to receive events or not 
movie: null, // reference to movie object 
clipText: '', // text to copy to clipboard 
handCursorEnabled: true, // whether to show hand cursor, or default pointer cursor 
cssEffects: true, // enable CSS mouse effects on dom container 
handlers: null, // user event handlers 
glue: function(elem, appendElem, stylesToAdd) { 
// glue to DOM element 
// elem can be ID or actual DOM element object 
this.domElement = ZeroClipboard.$(elem); 
// float just above object, or zIndex 99 if dom element isn't set 
var zIndex = 99; 
if (this.domElement.style.zIndex) { 
zIndex = parseInt(this.domElement.style.zIndex, 10) + 1; 
} 
if (typeof(appendElem) == 'string') { 
appendElem = ZeroClipboard.$(appendElem); 
} 
else if (typeof(appendElem) == 'undefined') { 
appendElem = document.getElementsByTagName('body')[0]; 
} 
// find X/Y position of domElement 
var box = ZeroClipboard.getDOMObjectPosition(this.domElement, appendElem); 
// create floating DIV above element 
this.div = document.createElement('div'); 
var style = this.div.style; 
style.position = 'absolute'; 
style.left = '' + box.left + 'px'; 
style.top = '' + box.top + 'px'; 
style.width = '' + box.width + 'px'; 
style.height = '' + box.height + 'px'; 
style.zIndex = zIndex; 
if (typeof(stylesToAdd) == 'object') { 
for (addedStyle in stylesToAdd) { 
style[addedStyle] = stylesToAdd[addedStyle]; 
} 
} 
// style.backgroundColor = '#f00'; // debug 
appendElem.appendChild(this.div); 
this.div.innerHTML = this.getHTML( box.width, box.height ); 
}, 
getHTML: function(width, height) { 
// return HTML for movie 
var html = ''; 
var flashvars = 'id=' + this.id + 
'&width=' + width + 
'&height=' + height; 
if (navigator.userAgent.match(/MSIE/)) { 
// IE gets an OBJECT tag 
var protocol = location.href.match(/^https/i) ? 'https://' : 'http://'; 
html += '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="'+protocol+'download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="'+width+'" height="'+height+'" id="'+this.movieId+'" align="middle"><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="false" /><param name="movie" value="'+ZeroClipboard.moviePath+'" /><param name="loop" value="false" /><param name="menu" value="false" /><param name="quality" value="best" /><param name="bgcolor" value="#ffffff" /><param name="flashvars" value="'+flashvars+'"/><param name="wmode" value="transparent"/></object>'; 
} 
else { 
// all other browsers get an EMBED tag 
html += '<embed id="'+this.movieId+'" src="'+ZeroClipboard.moviePath+'" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="'+width+'" height="'+height+'" name="'+this.movieId+'" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="'+flashvars+'" wmode="transparent" />'; 
} 
return html; 
}, 
hide: function() { 
// temporarily hide floater offscreen 
if (this.div) { 
this.div.style.left = '-2000px'; 
} 
}, 
show: function() { 
// show ourselves after a call to hide() 
this.reposition(); 
}, 
destroy: function() { 
// destroy control and floater 
if (this.domElement && this.div) { 
this.hide(); 
this.div.innerHTML = ''; 
var body = document.getElementsByTagName('body')[0]; 
try { body.removeChild( this.div ); } catch(e) {;} 
this.domElement = null; 
this.div = null; 
} 
}, 
reposition: function(elem) { 
// reposition our floating div, optionally to new container 
// warning: container CANNOT change size, only position 
if (elem) { 
this.domElement = ZeroClipboard.$(elem); 
if (!this.domElement) this.hide(); 
} 
if (this.domElement && this.div) { 
var box = ZeroClipboard.getDOMObjectPosition(this.domElement); 
var style = this.div.style; 
style.left = '' + box.left + 'px'; 
style.top = '' + box.top + 'px'; 
} 
}, 
setText: function(newText) { 
// set text to be copied to clipboard 
this.clipText = newText; 
if (this.ready) this.movie.setText(newText); 
}, 
addEventListener: function(eventName, func) { 
// add user event listener for event 
// event types: load, queueStart, fileStart, fileComplete, queueComplete, progress, error, cancel 
eventName = eventName.toString().toLowerCase().replace(/^on/, ''); 
if (!this.handlers[eventName]) this.handlers[eventName] = []; 
this.handlers[eventName].push(func); 
}, 
setHandCursor: function(enabled) { 
// enable hand cursor (true), or default arrow cursor (false) 
this.handCursorEnabled = enabled; 
if (this.ready) this.movie.setHandCursor(enabled); 
}, 
setCSSEffects: function(enabled) { 
// enable or disable CSS effects on DOM container 
this.cssEffects = !!enabled; 
}, 
receiveEvent: function(eventName, args) { 
// receive event from flash 
eventName = eventName.toString().toLowerCase().replace(/^on/, ''); 
// special behavior for certain events 
switch (eventName) { 
case 'load': 
// movie claims it is ready, but in IE this isn't always the case... 
// bug fix: Cannot extend EMBED DOM elements in Firefox, must use traditional function 
this.movie = document.getElementById(this.movieId); 
if (!this.movie) { 
var self = this; 
setTimeout( function() { self.receiveEvent('load', null); }, 1 ); 
return; 
} 
// firefox on pc needs a "kick" in order to set these in certain cases 
if (!this.ready && navigator.userAgent.match(/Firefox/) && navigator.userAgent.match(/Windows/)) { 
var self = this; 
setTimeout( function() { self.receiveEvent('load', null); }, 100 ); 
this.ready = true; 
return; 
} 
this.ready = true; 
this.movie.setText( this.clipText ); 
this.movie.setHandCursor( this.handCursorEnabled ); 
break; 
case 'mouseover': 
if (this.domElement && this.cssEffects) { 
this.domElement.addClass('hover'); 
if (this.recoverActive) this.domElement.addClass('active'); 
} 
break; 
case 'mouseout': 
if (this.domElement && this.cssEffects) { 
this.recoverActive = false; 
if (this.domElement.hasClass('active')) { 
this.domElement.removeClass('active'); 
this.recoverActive = true; 
} 
this.domElement.removeClass('hover'); 
} 
break; 
case 'mousedown': 
if (this.domElement && this.cssEffects) { 
this.domElement.addClass('active'); 
} 
break; 
case 'mouseup': 
if (this.domElement && this.cssEffects) { 
this.domElement.removeClass('active'); 
this.recoverActive = false; 
} 
break; 
} // switch eventName 
if (this.handlers[eventName]) { 
for (var idx = 0, len = this.handlers[eventName].length; idx < len; idx++) { 
var func = this.handlers[eventName][idx]; 
if (typeof(func) == 'function') { 
// actual function reference 
func(this, args); 
} 
else if ((typeof(func) == 'object') && (func.length == 2)) { 
// PHP style object + method, i.e. [myObject, 'myMethod'] 
func[0][ func[1] ](this, args); 
} 
else if (typeof(func) == 'string') { 
// name of function 
window[func](this, args); 
} 
} // foreach event handler defined 
} // user defined handler for event 
} 
};

html代码:
a.htm 
<html> 
<head> 
<title>Zero Clipboard Test</title> 
<style type="text/css"> 
body { font-family:arial,sans-serif; font-size:9pt; } 
.my_clip_button { width:150px; text-align:center; border:1px solid black; background-color:#ccc; margin:10px; padding:10px; cursor:default; font-size:9pt; } 
.my_clip_button.hover { background-color:#eee; } 
.my_clip_button.active { background-color:#aaa; } 
</style> 
</head> 
<body> 
<div id="d_clip_container" style="position:relative"> 
<div id="d_clip_button" class="my_clip_button"><b>Copy To Clipboard...</b></div> 
</div> 
<textarea id="myresource" class="clearfix" onChange="clip.setText(this.value)">我复制</textarea> 
<script type="text/javascript" src="ZeroClipboard.js"></script> 
<script language="JavaScript"> 
var clip = null; 
function $(id) { return document.getElementById(id); } 
function init() { 
clip = new ZeroClipboard.Client(); 
clip.setHandCursor( true ); 
clip.addEventListener('load', function (client) { 
debugstr("Flash movie loaded and ready."); 
}); 
clip.addEventListener('mouseOver', function (client) { 
// update the text on mouse over 
clip.setText( $('myresource').value ); 
}); 
clip.addEventListener('complete', function (client, text) { 
debugstr("Copied text to clipboard: " + text ); 
}); 
clip.glue( 'd_clip_button', 'd_clip_container' ); 
} 
setTimeout(function(){ 
init(); 
},1500); 
</script> 
</body> 
</html>

flash文件请自己到网上下载哈~
Javascript 相关文章推荐
模拟jQuery中的ready方法及实现按需加载css,js实例代码
Sep 27 Javascript
jQuery分别获取选中的复选框值的示例
Jun 17 Javascript
js实现Select下拉框具有输入功能的方法
Feb 06 Javascript
Javascript中的高阶函数介绍
Mar 15 Javascript
js数组依据下标删除元素
Apr 14 Javascript
javascript判断并获取注册表中可信任站点的方法
Jun 01 Javascript
用原生js统计文本行数的简单示例
Aug 19 Javascript
javascript实现简单的ajax封装示例
Dec 28 Javascript
在vue2.0中引用element-ui组件库的方法
Jun 21 Javascript
express 项目分层实践详解
Dec 10 Javascript
layer 关闭指定弹出层的例子
Sep 25 Javascript
JS实现可以用键盘方向键控制的动画
Dec 11 Javascript
jQuery数据缓存功能的实现思路及简单模拟
May 27 #Javascript
jQuery函数的等价原生函数代码示例
May 27 #Javascript
JS HTML5 音乐天气播放器(Ajax获取天气信息)
May 26 #Javascript
jQuery动态地获取系统时间实现代码
May 24 #Javascript
JavaScript事件处理器中的event参数使用介绍
May 24 #Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
May 24 #Javascript
js过滤HTML标签以及空格的思路及代码
May 24 #Javascript
You might like
一次编写,随处运行
2006/10/09 PHP
分享一个PHP数据流应用的简单例子
2012/06/01 PHP
PHP加密扩展库Mcrypt安装和实例
2013/11/10 PHP
php中smarty变量修饰用法实例分析
2015/06/11 PHP
php生成PDF格式文件并且加密
2015/06/22 PHP
使用php-timeit估计php函数的执行时间
2015/09/06 PHP
微信公众号开发之通过接口删除菜单
2017/02/20 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
用js判断用户浏览器是否是XP SP2的IE6
2007/03/08 Javascript
List Information About the Binary Files Used by an Application
2007/06/18 Javascript
var与Javascript变量隐式声明
2009/09/17 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
2011/10/18 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
2012/08/09 Javascript
JavaScript的RequireJS库入门指南
2015/07/01 Javascript
Angular实现form自动布局
2016/01/28 Javascript
零基础轻松学JavaScript闭包
2016/12/30 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
2017/07/06 Javascript
详解在Vue中有条件地使用CSS类
2017/09/30 Javascript
基于jquery的on和click的区别详解
2018/01/15 jQuery
vue实现短信验证码登录功能(流程详解)
2019/12/10 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
2020/09/09 Javascript
使用Python制作获取网站目录的图形化程序
2015/05/04 Python
python版学生管理系统
2018/01/10 Python
Python中利用xpath解析HTML的方法
2018/05/14 Python
linux下安装python3和对应的pip环境教程详解
2019/07/01 Python
Django 后台带有字典的列表数据与页面js交互实例
2020/04/03 Python
使用Python和百度语音识别生成视频字幕的实现
2020/04/09 Python
南非最大的花卉和送礼服务:NetFlorist
2017/09/13 全球购物
速卖通欧盟:Aliexpress EU
2020/08/19 全球购物
jQuery treeview树形结构应用
2021/03/24 jQuery
英语专业学生个人求职信
2014/01/28 职场文书
争先创优个人总结
2015/03/04 职场文书
老乡聚会通知
2015/04/23 职场文书
公务员保密工作承诺书
2015/05/04 职场文书
教师考核鉴定意见
2015/06/05 职场文书
在Windows下安装配置CPU版的PyTorch的方法
2021/04/02 Python