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 相关文章推荐
javaScript知识点总结(必看篇)
Jun 10 Javascript
jQuery插件实现图片轮播特效
Jun 16 Javascript
JavaScript实现鼠标点击导航栏变色特效
Feb 08 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
Jul 25 Javascript
webpack进阶——缓存与独立打包的用法
Aug 02 Javascript
详谈表单重复提交的三种情况及解决方法
Aug 16 Javascript
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
深入分析element ScrollBar滚动组件源码
Jan 22 Javascript
js图片无缝滚动插件使用详解
May 26 Javascript
js实现秒表计时器
Dec 16 Javascript
JavaScript实现跟随鼠标移动的盒子
Jan 28 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
来自PHP.NET的入门教程
2006/10/09 PHP
php设计模式 Observer(观察者模式)
2011/06/26 PHP
php简单实现多维数组排序的方法
2016/09/30 PHP
php快速导入大量数据的实例方法
2019/09/23 PHP
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
2012/08/14 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
2014/05/14 Javascript
Eclipse配置Javascript开发环境图文教程
2015/01/29 Javascript
JS判断页面是否出现滚动条的方法
2015/07/17 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
2015/11/30 Javascript
JavaScript知识点总结(十)之this关键字
2016/05/31 Javascript
几种tab切换详解
2017/02/03 Javascript
js 递归和定时器的实例解析
2017/02/03 Javascript
详解基于原生JS验证表单组件xy-form
2019/08/20 Javascript
vue实现表格合并功能
2020/12/01 Vue.js
[03:11]2014DOTA2国际邀请赛-VG掉入败者组 独家专访357
2014/07/19 DOTA
详解python 发送邮件实例代码
2016/12/22 Python
Python3 循环语句(for、while、break、range等)
2017/11/20 Python
Python学习之用pygal画世界地图实例
2017/12/07 Python
python模仿网页版微信发送消息功能
2018/02/24 Python
python+selenium 点击单选框-radio的实现方法
2019/09/03 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
使用pytorch和torchtext进行文本分类的实例
2020/01/08 Python
python+selenium 简易地疫情信息自动打卡签到功能的实现代码
2020/08/22 Python
python使用matplotlib:subplot绘制多个子图的示例
2020/09/24 Python
利用css3-animation实现逐帧动画效果
2016/03/10 HTML / CSS
W3C公布最新的HTML5标准草案
2008/10/17 HTML / CSS
英国受欢迎的运动鞋和街头服装商店:Footasylum
2018/06/12 全球购物
龟牌英国商店:Turtle Wax Brand Store UK
2019/07/02 全球购物
adidas菲律宾官网:adidas PH
2020/02/07 全球购物
材料成型专业个人求职信范文
2013/09/25 职场文书
招聘与培训专员岗位职责
2014/01/30 职场文书
历史专业大学生职业生涯规划书
2014/03/13 职场文书
有创意的广告词
2014/03/18 职场文书
家长意见书
2015/06/04 职场文书
详细聊聊vue中组件的props属性
2021/11/02 Vue.js
Python socket如何解析HTTP请求内容
2022/02/12 Python