JS获取剪贴板的内容

原创 2013年12月04日 09:53:03

这两天弄fckeditor粘贴功能,随着工作的深入和在网上查询资料,知道了在网页中一般是不允许访问“剪贴板”的,因为这样存在着很大的安全隐患,我自己也尝试着写了一个简单的demo

 

在IE和FF中剪贴板的访问是可控的,但是在Opera、Chrome、Safari浏览器中是不允许访问的,这样就产生了浏览器兼容的问题,怎么样才能让其他的浏览器兼容这个功能呢,在网上查找了一些资料——“使用flash去访问剪贴板”,然后把得到的值给JS,这样间接的访问了剪贴板里面的内容了

 

下面的代码只支持IE和FF,是我在网上找的DEMO,自己只是在这里汇总了一下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script src="lib/jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(
	function(){
		$("#show_clipbrd").click(function(){
			if($.browser.msie){
				ie_Show();
			}else{
				ff_show();
			}
		});
		
		$("#set_clipbrd").click(function(){
			if($.browser.msie){
				ie_set();
			}else{
				ff_set();
			}
		});
	}
);


function ie_Show()
{
	//得到剪贴板的内容
	var str1=window.clipboardData.getData("text");
	alert(str1);
}

function ff_show() {
    netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');
    var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
    if (!clip) return;
    var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
    if (!trans) return;
    trans.addDataFlavor('text/unicode');
    clip.getData(trans, clip.kGlobalClipboard);
    var str = new Object();
    var len = new Object();
    try {
        trans.getTransferData('text/unicode', str, len);
    } catch(error) {
        return null;
    }
    if (str) {
        if (Components.interfaces.nsISupportsWString) str = str.value.QueryInterface(Components.interfaces.nsISupportsWString);
        else if (Components.interfaces.nsISupportsString) str = str.value.QueryInterface(Components.interfaces.nsISupportsString);
        else str = null;
    }
    if (str) {
        alert(str.data.substring(0, len.value / 2));
        return (str.data.substring(0, len.value / 2));
    }
    return null;
}

function ie_set(){
	//显示剪贴板的内容是text类型的,给剪贴板的赋值为后面的字符串
	var str1=window.clipboardData.setData("text","<strong>my name is huangbiao</strong>");
	alert(window.clipboardData.getData("text"));
}

function ff_set(){
	//将copy变量的值放到内存当中去
	var copy="<strong>my name is huangbiao</strong>";
	netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');
	var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
	if (!clip) return;
	var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
	if (!trans) return;
	trans.addDataFlavor('text/unicode');
	var str = new Object();
	var len = new Object();
	var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);
	var copytext = copy;
	str.data = copytext;
	trans.setTransferData("text/unicode", str, copytext.length * 2);
	var clipid = Components.interfaces.nsIClipboard;
	if (!clip) return false;
	clip.setData(trans, null, clipid.kGlobalClipboard);
	alert("copy的信息为(可以用ctrl + v测试) :"+copy);
}

</script>
<title>浏览器访问剪贴板</title>
</head>
<body>
	<div>
		<span>在IE中是对外有接口的,可以通过window.clipboardData对象得到剪贴板的内容,这样就容易导致开发人员在后台写一个程序记录用户剪贴板的内容,这样可以把海量的数据集中起来做数据挖掘,这个对用户的安全来说是很可怕的,因此在访问的时候会提示用户是否允许访问剪贴板的内容。
		</span>
	</div><br>
	<div>
		<span>		在IE意外的浏览器是不允许访问剪贴板内容的,只有拒绝才是最安全的,所以在火狐等其他浏览器中不能通过window.clipboardData对象来访问剪贴板的内容
		</span>
	</div>
	<button id="show_clipbrd">显示剪贴板的内容</button>
	<button id="set_clipbrd">给剪贴板设置信息</button>
</body>
</html>

 

JS操作浏览器剪切板内容

当$('#input-signature')发生粘贴事件时获取剪切板上的内容 $('#input-signature').bind('paste',function(e){ var pastedT...
  • u010433704
  • u010433704
  • 2016年02月28日 09:05
  • 5439

js处理剪贴板的内容

在学习这个知识点之前需要了解的是: 在网页中一般是不允许访问“剪贴板”的,因为这样存在着很大的安全隐患 在IE和FF中剪贴板的访问是可控的,但是在Opera、Chrome、Safari浏览器中是不允许...
  • qq_31411389
  • qq_31411389
  • 2016年11月02日 14:28
  • 1509

clipboard.js 实现动态获取内容并复制到剪切板

使用背景: 项目组新重构的项目里面有利用zeroClipboard.js实现复制内容到剪切板的功能, 由于zeroClipboard.js依赖于Flash,而出于我所在公司的安全策略,大部分同事都没有...
  • cjFrontEnd
  • cjFrontEnd
  • 2017年10月25日 15:08
  • 975

js 文本框监听粘贴事件,获取粘贴板上的图片数据

Title document.getElementById('myInput').addEventLis
  • luyangbin01
  • luyangbin01
  • 2017年04月07日 12:47
  • 2159

通过JS+H5实现复制内容到剪贴板上

目前很多实现剪贴板复制操作是通过flash+js实现的,但是随着各个浏览器厂商屏蔽flash后,这种方法不再是可行的。由于Html5提供了剪贴板操作事件,我们可以通过Hhtml5的提供的oncopy,...
  • zouqingfang
  • zouqingfang
  • 2016年09月20日 18:14
  • 14118

jQuery/Js复制文本到剪贴板

jQuery/Js复制文本到剪贴板 http://www.baidu.com 复制 var content = $("#demo").html(); var c...
  • qq_21891743
  • qq_21891743
  • 2018年01月25日 18:39
  • 116

剪贴板 Clipbrd 直接用法

uses Clipbrd; procedure TForm1.Button1Click(Sender: TObject); begin Clipboard.Assign(SpeedButton...
  • ksrsoft
  • ksrsoft
  • 2013年08月23日 22:45
  • 984

【转载】js访问系统剪贴板

问题描述 IE 支持使用 window.clipboardData 对象内的一系列方法访问系统剪贴板; Chrome 和 Safari 中存在类似的 Clipboard 对象,且有与 IE...
  • gaoce227
  • gaoce227
  • 2017年05月27日 22:11
  • 1318

Javascript操作剪切板数据(支持IE、Chrome、360、搜狗)

近日,项目上需要在WEB页面上操作剪切板中的数据,经过一顿搜索,终于找到了一个比较完美的解决办法。 当然,在实际应用时还要自行修改一下。经过测试,目前支持IE、Chrome、360、搜狗等浏览器,其...
  • qwlovedzm
  • qwlovedzm
  • 2014年01月17日 17:13
  • 9456

实现JS复制、粘贴,Chrome/Firefox下可用

背景:       最近一直在做一个Web Excel项目,其中一项功能一直很纠结,就是数据的复制粘贴功能。功能要求:可以把Web端数据粘贴到Excel中,也可以从Excel中直接粘贴数据到页面编辑...
  • HackerSaillen
  • HackerSaillen
  • 2015年05月13日 16:15
  • 36550
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JS获取剪贴板的内容
举报原因:
原因补充:

(最多只允许输入30个字)