Javascript复制实例详解

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

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复制实例详解,希望对大家有所帮助。

时间: 2016-01-25

深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制

我记得在刚开始接触动态HTML及JavaScript时就接触过关于鼠标右键屏蔽的脚本代码,当时这些代码很多会用在防止浏览者未经允许的复制网页上的文字或者其他内容,后来的实际应用证明这种做法是不符合用户体验的,而且破解的方法也有很多,比如我曾经写过一篇文章讲解如何解除网页禁止复制的办法. 由此可见,限制右键及复制是不明智的做法,但是今天我仍然要谈谈关于禁止网页复制.右键菜单的事儿,因为随着网页APP技术的发展,网页应用和桌面应用之间的界限越来越模糊,有一些桌面程序实际上是由网页配合JavaScri

用js将内容复制到剪贴板兼容浏览器

若想通过js将内容复制到剪贴板,本来不难,可是若考虑到浏览器的兼容性问题,就变的有点麻烦,使用jquery-zclip复制是一个不错的选择,借助flash实现浏览器的兼容.原理就不细讲了,下面说下如何实现. 比如我的html代码如下: 复制代码 代码如下: <div class="buttonBox"> <code rel="1"><span id="id_1">要复制的内容1</span><

Javascript 实现复制(Copy)动作方法大全

一.实现点击按钮,复制文本框中的的内容 <script type="text/javascript"> function copyUrl2() { var Url2=document.getElementById("biao1"); Url2.select(); // 选择对象 document.execCommand("Copy"); // 执行浏览器复制命令 alert("已复制好,可贴粘."); } <

网站内容禁止复制和粘贴、另存为的js代码

1.使右键和复制失效 方法1: 在网页中加入以下代码: 复制代码 代码如下: <script language="Javascript"> document.oncontextmenu=new Function("event.returnValue=false"); document.onselectstart=new Function("event.returnValue=false"); </script> 方法2:

js实现点击后将文字或图片复制到剪贴板的方法

本文实例讲述了js实现点击后将文字或图片复制到剪贴板的方法,代码非常简洁实用,具体功能代码如下所示: 实现复制文字代码: <table width="99%" border="0" cellpadding="0" cellspacing="0" class="firtable"> <tr> <th width="100%" style="color

兼容所有浏览器的js复制插件Zero使用介绍

这里需要三个插件,分别是: jquery.js ZeroClipboard.js ZeroClipboard.swf 祝你好运! 复制代码 代码如下: <meta charset="utf-8" /> <button id="d_clip_button" data-clipboard-target="fe_text" >点击复制</button> <input id="fe_text"

原生js实现复制对象、扩展对象 类似jquery中的extend()方法

jq的extend()方法能很方便的实现扩展对象方法,语法如下:$.extend(obj1,boj2,obj3); 现在要实现的是:原生js实现复制对象,扩展对象,类似jq中的extend()方法,具体实例如下: 现有3个对象字面量: var o1={hello:1,old:555}, o2 = { abc: 55555555, hello: 2, fun: function() { alert(111); } }, o3={third:9999}; 实现目标: 复制o1对象,把 o2,o3的对

JS将制定内容复制到剪切板示例代码

复制代码 代码如下: function copyText() { //复制内容 var txt = document.getElementById("table2").rows[1].cells[0].innerHTML; //去除空格 txt = txt.replace(/ /," "); //去除换行 txt = txt.replace(/<BR><BR>/," "); if (window.clipboardData

使用js完成节点的增删改复制等的操作

需求:完成节点的增删改复制的操作 用到的方法和属性: 1.获取某个节点的父节点 parentNode属性 2.获取某个节点的子节点集合 childNodes属性 3.创键一个新的节点 createTextNode(节点文本内容) document对象的方法 在某些浏览器上兼容性不是很好 createElement(对象) document对象的方法 例如:document.createElement("a"); 4.给某个节点对象添加属性和属性值 setAttribute(属性,属性值

兼容主流浏览器的JS复制内容到剪贴板

现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个通杀所有浏览器的js复制内容到剪贴板的方案: 这个方案是一个最流行的方法: 著名的Clipboard Copy解决方案 利用一个clipboard.swf作为桥梁,复制内容到剪贴板. 原理是:创建一个隐藏的flash文件,同时给给flash的变量FlashVars 赋值"clipboard=..",

js实现的复制兼容chrome和IE

IE js代码: 复制代码 代码如下: <script type="text/javascript"> function copyUrl2() { var Url2=document.getElementById("biao1"); Url2.select(); // 选择对象 document.execCommand("Copy"); // 执行浏览器复制命令 alert("已复制好,可贴粘."); } <

在Node.js中实现文件复制的方法和实例

Node.js 本身并没有提供直接复制文件的 API,如果想用 Node.js 复制文件或目录,需要借助其他的 API 来实现.复制单个的文件可以直接用 readFile.writeFile,这样比较简便.如果是复制一个目录下的所有文件,目录下可能还包含了子目录,那么此时就需要用到更高级点的 API 了. 流 流是 Node.js 移动数据的方式,Node.js 中的流是可读/可写的,HTTP 和文件系统模块都有用到流.在文件系统中,使用流来读取文件的时候,对于一个大文件可能并不会一次性读取完,

在 Node.js 中使用原生 ES 模块方法解析

从版本 8.5.0 开始,Node.js 开始支持原生 ES 模块,可以通过命令行选项打开该功能.新功能很大程度上得归功于 Bradley Farias. 1.演示 这个示例的代码目录结构如下: esm-demo/ lib.mjs main.mjs lib.mjs: export function add(x, y) { return x + y; } main.mjs: import {add} from './lib.mjs'; console.log('Result: '+add(2, 3

在 Node.js 中使用 async 函数的方法

借助于新版 V8 引擎,Node.js 从 7.6 开始支持 async 函数特性.今年 10 月 31 日,Node.js 8 也开始成为新的长期支持版本,因此你完全可以放心大胆地在你的代码中使用 async 函数了.在这边文章里,我会简要地介绍一下什么是 async 函数,以及它会如何改变我们编写 Node.js 应用的方式. 1 什么是 async 函数 利用 async 函数,你可以把基于 Promise 的异步代码写得就像同步代码一样.一旦你使用 async 关键字来定义了一个函数,那

Node.js 中使用 async 函数的方法

借助于新版 V8 引擎,Node.js 从 7.6 开始支持 async 函数特性.今年 10 月 31 日,Node.js 8 也开始成为新的长期支持版本,因此你完全可以放心大胆地在你的代码中使用 async 函数了.在这边文章里,我会简要地介绍一下什么是 async 函数,以及它会如何改变我们编写 Node.js 应用的方式. 1 什么是 async 函数 利用 async 函数,你可以把基于 Promise 的异步代码写得就像同步代码一样.一旦你使用 async 关键字来定义了一个函数,那

Node.js中安全调用系统命令的方法(避免注入安全漏洞)

在这篇文章中,我们将学习正确使用Node.js调用系统命令的方法,以避免常见的命令行注入漏洞. 我们经常使用的调用命令的方法是最简单的child_process.exec.它有很一个简单的使用模式;通过传入一段字符串命令,并把一个错误或命令处理结果回传至回调函数中. 这里是你通过child_process.exec调用系统命令一个非常典型的例子. 复制代码 代码如下: child_process.exec('ls', function (err, data) {     console.log(

node.js中使用socket.io的方法

使用socket.io的使用创建一个socket.io服务器即可.但是该服务器依赖于一个已经创建的http服务器. 在http服务器运行之后,使用listen方法为该http服务器附加一个socket.io服务器. 复制代码 代码如下: var sio=require("scoket.io"); var socket=sio.listen(server); socket就是在server基础上创建的一个socket.io服务器. 当客户端与服务器端建立连接时,触发socket.io服务

node.js中的http.response.end方法使用说明

方法说明: 结束响应,告诉客户端所有消息已经发送.当所有要返回的内容发送完毕时,该函数必须被调用一次. 如何不调用该函数,客户端将永远处于等待状态. 语法: 复制代码 代码如下: response.end([data], [encoding]) 接收参数: data                           end()执行完毕后要输出的字符,如果指定了 data 的值,那就意味着在执行完 response.end() 之后,会接着执行一条 response.write(data , e

node.js中的http.response.write方法使用说明

方法说明: 向请求的客户端发送响应内容. 在 response.end() 之前,response.write() 可以被执行多次. 语法: 复制代码 代码如下: response.write(chunk, [encoding]) 参数: chunk                      是一个buffer 或 字符串,表示发送的内容 encoding                如果chunk是字符串,就需要指定encoding来说明它的编码方式,默认utf-8 例子: 复制代码 代码如

Node.js中sequelize时区的配置方法

基本概念 我们先来介绍一些可能当年在地理课上学习过的基本概念. 说起来,时间真是一个神奇的东西.以前人们通过观察太阳的位置来决定时间(比如:使用日晷),这就使得不同经纬度的地区时间是不一样的.后来人们进一步规定以子午线为中心,向东西两侧延伸,每 15 度划分一个时区,刚好是 24 个时区.然后因为一天有 24 小时,地球自转一圈是 360 度,360 度 / 24 小时 = 15 度/小时,所以每差一个时区,时间就差一个小时. 最开始的标准时间(子午线中心处的时间)是英国伦敦的皇家格林威治天文台

node.js中fs文件系统目录操作与文件信息操作

目录操作 如果存在该目录,就创建失败 同步创建目录fs.mkdirSync(path, [mode]) const fs = require('fs'); let mkdir = './mkdir'; fs.mkdir(mkdir, (err) => { if (err) { console.log(`mkdir ${mkdir} file failed~`); } else { console.log(`mkdir ${mkdir} file success~`); } }); 读取目录 如果