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 相关文章推荐
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
Nov 21 Javascript
一个CSS+jQuery实现的放大缩小动画效果
Feb 19 Javascript
给html超链接设置事件不使用href来完成跳
Apr 20 Javascript
javascript写的异步加载js文件函数(支持数组传参)
Jun 07 Javascript
JavaScript数据结构和算法之图和图算法
Feb 11 Javascript
JavaScript设计模式学习之“类式继承”
Mar 12 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
Jun 06 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
Jun 21 Javascript
javascript 数组的正态分布排序的问题
Jul 31 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
Jan 14 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
详解ES6 Promise的生命周期和创建
Aug 18 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
Laravel使用memcached缓存对文章增删改查进行优化的方法
2016/10/08 PHP
php基于dom实现读取图书xml格式数据的方法
2017/02/03 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
用javascript实现自定义标签
2007/05/08 Javascript
IE autocomplete internet explorer's autocomplete
2007/06/30 Javascript
js onpropertychange输入框 事件获取属性
2009/03/26 Javascript
javascript基础第一章 JavaScript与用户端
2010/07/22 Javascript
div层的移动及性能优化
2010/11/16 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
2013/01/03 Javascript
jQuery中:nth-child选择器用法实例
2014/12/31 Javascript
javascript面向对象之访问对象属性的两种方式分析
2015/01/13 Javascript
JQuery跳出each循环的方法
2015/04/16 Javascript
JavaScript如何动态创建table表格
2020/08/02 Javascript
单击按钮发送验证码,出现倒计时的简单实例
2017/03/17 Javascript
微信小程序 侧滑删除(左滑删除)
2017/05/23 Javascript
js实现京东轮播图效果
2017/06/30 Javascript
easyui-datagrid开发实践(总结)
2017/08/02 Javascript
JS函数内部属性之arguments和this实例解析
2018/10/07 Javascript
vue中render函数的使用详解
2018/10/12 Javascript
微信小程序纯文本实现@功能
2020/04/08 Javascript
[46:47]2014 DOTA2国际邀请赛中国区预选赛 DT VS HGT
2014/05/22 DOTA
教你如何将 Sublime 3 打造成 Python/Django IDE开发利器
2014/07/04 Python
python脚本实现统计日志文件中的ip访问次数代码分享
2014/08/06 Python
Python实现针对含中文字符串的截取功能示例
2017/09/22 Python
python中使用xlrd读excel使用xlwt写excel的实例代码
2018/01/31 Python
Pandas之DataFrame对象的列和索引之间的转化
2019/06/25 Python
对YOLOv3模型调用时候的python接口详解
2019/08/26 Python
Django 解决新建表删除后无法重新创建等问题
2020/05/21 Python
关于HTML5的安全问题开发人员需要牢记的
2012/06/21 HTML / CSS
LEGO玩具英国官方商店:LEGO Shop GB
2018/03/27 全球购物
描述RIP和OSPF区别以及特点
2015/01/17 面试题
小学后勤管理制度
2014/01/14 职场文书
“学雷锋活动月”总结
2014/03/09 职场文书
英文演讲稿
2014/05/15 职场文书
2015年第十五个全民国防教育日宣传活动方案
2015/05/06 职场文书
sentinel支持的redis高可用集群配置详解
2022/04/01 Redis