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 '行 4954 错误: 不支持该属性或方法' 的问题解决方法
Jan 19 Javascript
jQuery表格插件ParamQuery简单使用方法示例
Dec 05 Javascript
被遗忘的javascript的slice() 方法
Apr 20 Javascript
老生常谈遮罩层 滚动条的问题
Apr 29 Javascript
jQuery Ajax全解析
Feb 13 Javascript
利用JS hash制作单页Web应用的方法详解
Oct 10 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
Dec 04 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
Sep 02 Javascript
基于Vue实现图片在指定区域内移动的思路详解
Nov 11 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
Apr 30 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
Jun 24 Javascript
vue使用原生swiper代码实例
Feb 05 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轻松实现中英文混排字符串截取
2014/05/28 PHP
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
2007/08/15 Javascript
js 获取服务器控件值的代码
2010/03/05 Javascript
jQuery 源码分析笔记(6) jQuery.data
2011/06/08 Javascript
文本框获得焦点和失去焦点的判断代码
2012/03/18 Javascript
JSON字符串和对象相互转换实例分析
2016/06/16 Javascript
实例浅析js的this
2016/12/11 Javascript
原生js实现秒表计时器功能
2017/02/16 Javascript
微信小程序中多个页面传参通信的学习与实践
2017/05/05 Javascript
Javascript 实现匿名递归的实例代码
2017/05/25 Javascript
微信小程序开发之好友列表字母列表跳转对应位置
2017/09/26 Javascript
微信小程序 POST请求的实例详解
2017/09/29 Javascript
微信小程序如何实现全局重新加载
2019/06/05 Javascript
node.js express框架简介与实现
2019/07/23 Javascript
webpack DllPlugin xxx is not defined解决办法
2019/12/13 Javascript
js实现特别简单的钟表效果
2020/09/14 Javascript
[02:16]DOTA2超级联赛专访Burning 逆袭需要抓住机会
2013/06/24 DOTA
利用Python抓取行政区划码的方法
2016/11/28 Python
python数据批量写入ScrolledText的优化方法
2018/10/11 Python
用python3教你任意Html主内容提取功能
2018/11/05 Python
如何基于python实现脚本加密
2019/12/28 Python
TensorFlow学习之分布式的TensorFlow运行环境
2020/02/05 Python
Python图像处理库PIL的ImageFont模块使用介绍
2020/02/26 Python
html5 拖拽及用 js 实现拖拽功能的示例代码
2020/10/23 HTML / CSS
台湾流行服饰购物平台:OB严选
2018/01/21 全球购物
Whittard官方海外旗舰店:英国百年茶叶品牌
2018/02/22 全球购物
澳大利亚在线时尚精品店:Hello Molly
2018/02/26 全球购物
世界上最大的艺术社区:SAA
2020/12/30 全球购物
吃空饷专项治理工作实施方案
2014/03/04 职场文书
初中三好学生自我鉴定
2014/04/07 职场文书
2014年五四青年节演讲比赛方案
2014/04/22 职场文书
python绘制箱型图
2021/04/27 Python
Python基础之变量的相关知识总结
2021/06/23 Python
Django Paginator分页器的使用示例
2021/06/23 Python
Django模型层实现多表关系创建和多表操作
2021/07/21 Python
Java数据开发辅助工具Docker与普通程序使用方法
2021/09/15 Java/Android