首页
所有分类
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 相关文章推荐
jQuery实现网站添加高亮突出显示效果的方法
Jun 26 Javascript
javascript HTML+CSS实现经典橙色导航菜单
Feb 16 Javascript
Angularjs 实现一个幻灯片示例代码
Sep 08 Javascript
Bootstrap 模态框实例插件案例分析
Dec 28 Javascript
Node.js制作简单聊天室
Jan 12 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
Oct 31 Javascript
在 webpack 中使用 ECharts的实例详解
Feb 05 Javascript
vue单个组件实现无限层级多选菜单功能
Apr 10 Javascript
JS canvas绘制五子棋的棋盘
May 28 Javascript
微信小程序使用canvas的画图操作示例
Jan 18 Javascript
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
Vue的列表之渲染,排序,过滤详解
Feb 24 Vue.js
基于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
加载异常(1) caddy(1) localStorage(1) 表约束(2) NginxConfig(1) SVN(1) 共享文件夹(1) 骨架屏(1) ESXI(1) 横向滚动(1)
You might like
PHP Curl多线程原理实例详解
2013/11/06 PHP
学习php设计模式 php实现工厂模式(factory)
2015/12/07 PHP
深入讲解PHP的对象注入(Object Injection)
2017/03/01 PHP
PHP设计模式之原型设计模式原理与用法分析
2018/04/25 PHP
php 输出缓冲 Output Control用法实例详解
2020/03/03 PHP
Jquery Ajax请求代码(2)
2011/01/07 Javascript
自己动手制作jquery插件之自动添加删除行的实现
2011/10/13 Javascript
jQuery图片播放8款精美插件分享
2013/02/17 Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
2013/05/07 Javascript
firefox浏览器不支持innerText的解决方法
2013/08/07 Javascript
js打开新窗口方法整理
2014/02/17 Javascript
js实现div层缓慢收缩与展开的方法
2015/05/11 Javascript
jQuery实现带玻璃流光质感的手风琴特效
2015/11/20 Javascript
JS封装的选项卡TAB切换效果示例
2016/09/20 Javascript
nodejs用gulp管理前端文件方法
2018/06/24 NodeJs
深入理解es6块级作用域的使用
2019/03/28 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
2019/09/25 Javascript
JavaScript实现网页计算器功能
2020/10/29 Javascript
原生js中运算符及流程控制示例详解
2021/01/05 Javascript
Python性能优化技巧
2015/03/09 Python
在Python3中初学者应会的一些基本的提升效率的小技巧
2015/03/31 Python
对Python中DataFrame按照行遍历的方法
2018/04/08 Python
解决python删除文件的权限错误问题
2018/04/24 Python
Python turtle库绘制菱形的3种方式小结
2019/11/23 Python
Python numpy多维数组实现原理详解
2020/03/10 Python
H5混合开发app如何升级的方法
2018/01/10 HTML / CSS
美国婴儿服装购物网站：Gerber Childrenswear
2020/05/06 全球购物
请说出几个常用的异常类
2013/01/08 面试题
如何在.net Winform里面显示PDF文档
2012/09/11 面试题
what is the difference between ext2 and ext3
2013/11/03 面试题
乡镇党建工作汇报材料
2014/10/27 职场文书
2015年节能降耗工作总结
2015/05/22 职场文书
《三国志》赏析
2019/08/27 职场文书
《弟子规》读后感：知廉耻、明是非、懂荣辱、辨善恶
2019/12/03 职场文书
Java使用httpRequest+Jsoup爬取红蓝球号码
2021/07/02 Java/Android
Python作用域和名称空间的详细介绍
2022/04/13 Python