jQuery获取剪贴板内容的方法


Posted in Javascript onJune 16, 2016

本文实例讲述了jQuery获取剪贴板内容的方法。分享给大家供大家参考,具体如下:

这两天弄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>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
Aug 22 Javascript
JS定时器实例详细分析
Oct 11 Javascript
不能不知道的10个angularjs英文学习网站
Mar 23 Javascript
js完整倒计时代码分享
Sep 18 Javascript
canvas红包照片实例分享
Feb 28 Javascript
Vue表单验证插件Vue Validator使用方法详解
Apr 07 Javascript
详解使用React全家桶搭建一个后台管理系统
Nov 04 Javascript
JavaScript闭包与作用域链实例分析
Jan 21 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
Mar 03 Javascript
js实现简单放大镜效果
Mar 07 Javascript
JQuery获得内容和属性方法解析
May 30 jQuery
解决VantUI popup 弹窗不弹出或无蒙层的问题
Nov 03 Javascript
javascript作用域、作用域链(菜鸟必看)
Jun 16 #Javascript
全面理解JavaScript中的继承(必看)
Jun 16 #Javascript
深入浅析JS的数组遍历方法(推荐)
Jun 15 #Javascript
JavaScript对象数组排序实例方法浅析
Jun 15 #Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
Jun 15 #Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
Jun 15 #Javascript
jQuery动态加载css文件实现方法
Jun 15 #Javascript
You might like
PHP中使用循环实现的金字塔图形
2014/11/08 PHP
Mac OS下配置PHP+MySql环境
2015/02/25 PHP
php简单实现查询数据库返回json数据
2015/04/16 PHP
PHP编写daemon process详解及实例代码
2016/09/30 PHP
学习YUI.Ext第五日--做拖放Darg&amp;Drop
2007/03/10 Javascript
一款js和css代码压缩工具[附JAVA环境配置方法]
2010/04/16 Javascript
setTimeout()递归调用不加引号出错的解决方法
2014/09/05 Javascript
JavaScript encodeURI 和encodeURIComponent
2015/12/04 Javascript
Angular 根据 service 的状态更新 directive
2016/04/03 Javascript
js无提示关闭浏览器窗口的两种方法分析
2016/11/06 Javascript
AngularJs 常用的过滤器
2017/05/15 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
2017/07/21 Javascript
微信小程序scroll-x失效的完美解决方法
2018/07/18 Javascript
谈谈React中的Render Props模式
2018/12/06 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
2019/04/14 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
2020/03/17 Javascript
js实现星星海特效的示例
2020/09/28 Javascript
python多线程threading.Lock锁用法实例
2014/11/01 Python
关于你不想知道的所有Python3 unicode特性
2014/11/28 Python
python结合shell查询google关键词排名的实现代码
2016/02/27 Python
Python进阶篇之字典操作总结
2016/11/16 Python
关于numpy中np.nonzero()函数用法的详解
2017/02/07 Python
python如何使用unittest测试接口
2018/04/04 Python
Python二进制串转换为通用字符串的方法
2018/07/23 Python
美国批发零售网站:GearXS
2016/07/26 全球购物
Troy-Bilt官网:草坪割草机、吹雪机、分蘖机等
2019/02/19 全球购物
家长对老师的评语
2014/04/18 职场文书
委托协议书范本
2014/04/22 职场文书
淘宝好评语句大全
2014/12/31 职场文书
2015年清明节扫墓演讲稿
2015/03/18 职场文书
教师工作证明范本
2015/06/12 职场文书
回复函格式及范文
2015/07/14 职场文书
Python一行代码实现自动发邮件功能
2021/05/30 Python
nginx服务器的下载安装与使用详解
2021/08/02 Servers
「约定的梦幻岛」作画发布诺曼生日新绘
2022/03/21 日漫
Win11无法安装更新补丁KB3045316怎么办 附KB3045316补丁修复教程
2022/08/14 数码科技