首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

Javascript复制实例详解

Posted in Javascript onJanuary 28, 2016

在做项目时有一个需求，是需要复制内容到剪切板，因为有众多浏览器，所以要兼容性很重要。

1、最简单的copy，只能在IE下使用

使用clipboardData方法

<script type="text/javascript">
function copy(){
window.clipboardData.setData("text",document.getElementById("name").value);
alert("The text is on the clipboard, try to paste it!");
}
</script>

2、跨浏览器的，但是Firefox无法复制

<head>
<script type="text/javascript">
function CopyToClipboard () {
var input = document.getElementById ("toClipboard");
var textToClipboard = input.value;
var success = true;
if (window.clipboardData) { // Internet Explorer
window.clipboardData.setData ("Text", textToClipboard);
}
else {
// create a temporary element for the execCommand method
var forExecElement = CreateElementForExecCommand (textToClipboard);
/* Select the contents of the element 
(the execCommand for 'copy' method works on the selection) */
SelectContent (forExecElement);
var supported = true;
// UniversalXPConnect privilege is required for clipboard access in Firefox
try {
if (window.netscape && netscape.security) {
netscape.security.PrivilegeManager.enablePrivilege ("UniversalXPConnect");
}
// Copy the selected content to the clipboard
// Works in Firefox and in Safari before version 5
success = document.execCommand ("copy", false, null);
}
catch (e) {
success = false;
}
// remove the temporary element
document.body.removeChild (forExecElement);
}
if (success) {
alert ("The text is on the clipboard, try to paste it!");
}
else {
alert ("Your browser doesn't allow clipboard access!");
}
}
function CreateElementForExecCommand (textToClipboard) {
var forExecElement = document.createElement ("div");
// place outside the visible area
forExecElement.style.position = "absolute";
forExecElement.style.left = "-10000px";
forExecElement.style.top = "-10000px";
// write the necessary text into the element and append to the document
forExecElement.textContent = textToClipboard;
document.body.appendChild (forExecElement);
// the contentEditable mode is necessary for the execCommand method in Firefox
forExecElement.contentEditable = true;
return forExecElement;
}
function SelectContent (element) {
// first create a range
var rangeToSelect = document.createRange ();
rangeToSelect.selectNodeContents (element);
// select the contents
var selection = window.getSelection ();
selection.removeAllRanges ();
selection.addRange (rangeToSelect);
}
</script>
</head>
<body>
<input id="toClipboard" value="text to clipboard"/>
<button onclick='CopyToClipboard ()'>Copy text to clipboard</button>
</body>

测试后，Firefox访问失败

3、万能的flash

不要重复造轮子了，有一个使用广泛的类库ZeroClipboard

Zero Clipboard 的实现原理

Zero Clipboard 利用 Flash 进行复制，之前有 Clipboard Copy 解决方案，其利用的是一个隐藏的 Flash。但最新的 Flash Player 10 只允许在 Flash 上进行操作才能启动剪贴板。所以 Zero Clipboard 对此进行了改进，用了一个透明的 Flash ，让其漂浮在按钮之上，这样其实点击的不是按钮而是 Flash ，也就可以使用 Flash 的复制功能了。

创建一个透明的flash

将这个flash浮在按钮上层

确定要复制的文本是什么

监听这个透明flash的鼠标点击事件

该flash被点击之后，完成剪切板处理

对于这几件事，ZeroClipboard分别提供了不同的api，来完成整个需求

如何使用 Zero Clipboard

git clone https://github.com/chenpingzhao/easycopy.git

关于ZeroClipboard.js

var ZeroClipboard = {
version: "1.0.7",
clients: {},
moviePath: "zeroclipboard.swf",
nextId: 1,
$: function(A) {
if (typeof(A) == "string") {
A = document.getElementById(A)
}
if (!A.addClass) {
A.hide = function() {
this.style.display = "none"
};
A.show = function() {
this.style.display = ""
};
A.addClass = function(B) {
this.removeClass(B);
this.className += " " + B
};
A.removeClass = function(D) {
var E = this.className.split(/\s+/);
var B = -1;
for (var C = 0; C < E.length; C++) {
if (E[C] == D) {
B = C;
C = E.length
}
}
if (B > -1) {
E.splice(B, 1);
this.className = E.join(" ")
}
return this
};
A.hasClass = function(B) {
return !!this.className.match(new RegExp("\\s*" + B + "\\s*"))
}
}
return A
},
setMoviePath: function(A) {
this.moviePath = A
},
dispatch: function(D, B, C) {
var A = this.clients[D];
if (A) {
A.receiveEvent(B, C)
}
},
register: function(B, A) {
this.clients[B] = A
},
getDOMObjectPosition: function(C, A) {
var B = {
left: 0,
top: 0,
width: C.width ? C.width : C.offsetWidth,
height: C.height ? C.height : C.offsetHeight
};
while (C && (C != A)) {
B.left += C.offsetLeft;
B.top += C.offsetTop;
C = C.offsetParent
}
return B
},
Client: function(A) {
this.handlers = {};
this.id = ZeroClipboard.nextId++;
this.movieId = "ZeroClipboardMovie_" + this.id;
ZeroClipboard.register(this.id, this);
if (A) {
this.glue(A)
}
}
};
ZeroClipboard.Client.prototype = {
id: 0,
ready: false,
movie: null,
clipText: "",
handCursorEnabled: true,
cssEffects: true,
handlers: null,
//我们可以通过下面这个api，将flash和按钮重叠，且浮在按钮之上
glue: function(D, B, E) {
this.domElement = ZeroClipboard.$(D);
var F = 99;
if (this.domElement.style.zIndex) {
F = parseInt(this.domElement.style.zIndex, 10) + 1
}
if (typeof(B) == "string") {
B = ZeroClipboard.$(B)
} else {
if (typeof(B) == "undefined") {
B = document.getElementsByTagName("body")[0]
}
}
var C = ZeroClipboard.getDOMObjectPosition(this.domElement, B);
this.div = document.createElement("div");
var A = this.div.style;
A.position = "absolute";
A.left = "" + C.left + "px";
A.top = "" + C.top + "px";
A.width = "" + C.width + "px";
A.height = "" + C.height + "px";
A.zIndex = F;
if (typeof(E) == "object") {
for (addedStyle in E) {
A[addedStyle] = E[addedStyle]
}
}
B.appendChild(this.div);
this.div.innerHTML = this.getHTML(C.width, C.height)
},
/*IE 的 Flash JavaScript 通信接口上有一个 bug 。
你必须插入一个 object 标签到一个已存在的 DOM 元素中。并且在写入 innerHTML 之前请确保该元素已经 appendChild 方法插入到 DOM 中*/
getHTML: function(D, A) {
var C = "";
var B = "id=" + this.id + "&width=" + D + "&height=" + A;
if (navigator.userAgent.match(/MSIE/)) {
var E = location.href.match(/^https/i) ? "https://" : "http://";
C += '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="' + E + 'download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="' + D + '" height="' + A + '" 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="' + B + '"/><param name="wmode" value="transparent"/></object>'
} else {
C += '<embed id="' + this.movieId + '" src="' + ZeroClipboard.moviePath + '" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="' + D + '" height="' + A + '" name="' + this.movieId + '" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="' + B + '" wmode="transparent" />'
}
return C
},
hide: function() {
if (this.div) {
this.div.style.left = "-2000px"
}
},
show: function() {
this.reposition()
},
destroy: function() {
if (this.domElement && this.div) {
this.hide();
this.div.innerHTML = "";
var A = document.getElementsByTagName("body")[0];
try {
A.removeChild(this.div)
} catch (B) {}
this.domElement = null;
this.div = null
}
},
/* 因为按钮上漂浮有一个 Flash 按钮，所以当页面大小发生变化时，Flash 按钮可能会错位，就点不着了
Zero Clipboard 提供了一个 reposition() 方法，可以重新计算 Flash 按钮的位置。我们可以将它绑定到 resize 事件上
bind(window, "resize", function(){ clip.reposition(); }); 
function bind(obj, type, fn) {
if (obj.attachEvent) {
obj['e' + type + fn] = fn;
obj[type + fn] = function() {
obj['e' + type + fn](window.event);
}
obj.attachEvent('on' + type, obj[type + fn]);
} else
obj.addEventListener(type, fn, false);
}*/
reposition: function(C) {
if (C) {
this.domElement = ZeroClipboard.$(C);
if (!this.domElement) {
this.hide()
}
}
if (this.domElement && this.div) {
var B = ZeroClipboard.getDOMObjectPosition(this.domElement);
var A = this.div.style;
A.left = "" + B.left + "px";
A.top = "" + B.top + "px"
}
},
setText: function(A) {
this.clipText = A;
if (this.ready) {
this.movie.setText(A)
}
},
addEventListener: function(A, B) {
A = A.toString().toLowerCase().replace(/^on/, "");
if (!this.handlers[A]) {
this.handlers[A] = []
}
this.handlers[A].push(B)
},
setHandCursor: function(A) {
this.handCursorEnabled = A;
if (this.ready) {
this.movie.setHandCursor(A)
}
},
/*鼠标移到按钮上或点击时，由于有 Flash 按钮的遮挡，所以像 css ":hover", ":active" 等伪类可能会失效。
setCSSEffects() 方法就是解决这个问题。首先我们需要将伪类改成类
copy - botton: hover {
border - color: #FF6633;
}

可以改成下面的 ":hover" 改成 ".hover"

copy - botton.hover {
border - color: #FF6633;
}

我们可以调用 clip.setCSSEffects( true ); 这样 Zero Clipboard 会自动为我们处理：将类 .hover 当成伪类 :hover*/

setCSSEffects: function(A) {
this.cssEffects = !! A
},
/*Zero Clipboard 提供了一些事件，你可以自定义函数处理这些事件。
Zero Clipboard 事件处理函数为 addEventListener(); 例如当 Flash 完全载入后会触发一个事件 "load" 
clip.addEventListener( "load", function(client) { 
alert("Flash 加载完毕！"); 
});*/
receiveEvent: function(D, E) {
D = D.toString().toLowerCase().replace(/^on/, "");
switch (D) {
case "load":
this.movie = document.getElementById(this.movieId);
if (!this.movie) {
var C = this;
setTimeout(function() {
C.receiveEvent("load", null)
}, 1);
return
}
if (!this.ready && navigator.userAgent.match(/Firefox/) && navigator.userAgent.match(/Windows/)) {
var C = this;
setTimeout(function() {
C.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
}
if (this.handlers[D]) {
for (var B = 0, A = this.handlers[D].length; B < A; B++) {
var F = this.handlers[D][B];
if (typeof(F) == "function") {
F(this, E)
} else {
if ((typeof(F) == "object") && (F.length == 2)) {
F[0][F[1]](this, E)
} else {
if (typeof(F) == "string") {
window[F](this, E)
}
}
}
}
}
}
};

以上所述是小编给大家介绍的Javascript复制实例详解，希望对大家有所帮助。

Javascript复制实例详解

- Author -

chenpingzhao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
Nov 14 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
Apr 08 Javascript
jQuery中选择器小问题(新人难免遇到)
Mar 31 Javascript
js简单抽奖代码
Jan 16 Javascript
jQuery+json实现的简易Ajax调用实例
Dec 14 Javascript
JavaScript简单实现弹出拖拽窗口（二）
Jun 17 Javascript
微信小程序引用公共js里的方法的实例详解
Aug 17 Javascript
修改UA在PC中访问只能在微信中打开的链接方法
Nov 27 Javascript
javaScript动态添加Li元素的实例
Feb 24 Javascript
js判断输入框不能为空格或null值的实现方法
Mar 02 Javascript
解决layui弹出层layer的area过大被遮挡的问题
Sep 21 Javascript
记一次vue跨域的解决
Oct 21 Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
Jan 28 #Javascript
基于JavaScript的操作系统你听说过吗？
Jan 28 #Javascript
js+canvas绘制矩形的方法
Jan 28 #Javascript
js+canvas简单绘制圆圈的方法
Jan 28 #Javascript
谈一谈javascript闭包
Jan 28 #Javascript
JavaScript统计字符串中每个字符出现次数完整实例
Jan 28 #Javascript
基于javascript实现checkbox复选框实例代码
Jan 28 #Javascript
AE3805(1) 新加坡购物网站(41) 爱尔兰购物网站(30) SLi Minor 2020(63) CPU(2) 美国购物网站(1542) 天梯图(1) 英国购物网站(954) 香港购物网站(84) 纸巾盒(1)
You might like
那些年一起学习的PHP（一）
2012/03/21 PHP
destoon切换城市后实现logo旁边显示地区名称的方法
2014/08/21 PHP
PHP基于imap获取邮件实例
2014/11/11 PHP
PHP中file_get_contents函数抓取https地址出错的解决方法(两种方法)
2015/09/22 PHP
浅谈PHP安全防护之Web攻击
2017/01/03 PHP
ThinkPHP中类的构造函数_construct()与_initialize()的区别详解
2017/03/13 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
PHP7创建销毁session的实例方法
2020/02/03 PHP
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
清空上传控件input file的值
2010/07/03 Javascript
jquery获取iframe中的dom对象(两种方法)
2013/07/02 Javascript
JS中的异常处理方法分享
2013/12/22 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
2015/02/04 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
2016/08/19 Javascript
jQuery如何防止Ajax重复提交
2016/10/14 Javascript
微信小程序 实现tabs选项卡效果实例代码
2016/10/31 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
2017/01/14 Javascript
JS中setTimeout和setInterval的最大延时值详解
2017/02/13 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
2017/11/09 Javascript
详解nuxt路由鉴权(express模板)
2018/11/21 Javascript
countUp.js实现数字滚动效果
2019/10/18 Javascript
解决vue 表格table列求和的问题
2019/11/06 Javascript
JSON stringify方法原理及实例解析
2020/10/23 Javascript
VUE项目实现主题切换的多种方法
2020/11/26 Vue.js
[35:44]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG
2014/05/26 DOTA
python3实现表白神器
2019/04/09 Python
关于python多重赋值的小问题
2019/04/17 Python
为什么你还不懂得怎么使用Python协程
2019/05/13 Python
Python使用贪婪算法解决问题
2019/10/22 Python
使用Python进行防病毒免杀解析
2019/12/13 Python
基于python实现破解滑动验证码过程解析
2020/05/28 Python
使用python将微信image下.dat文件解密为.png的方法
2020/11/30 Python
临床医学专业毕业生的自我评价
2013/10/17 职场文书
班级文化标语
2014/06/23 职场文书
民间借贷借条范本
2015/05/25 职场文书
离职证明范本
2015/06/12 职场文书