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 相关文章推荐
XML的代替者----JSON
Jul 21 Javascript
jquery 使用简明教程
Mar 05 Javascript
JS动态改变表格边框宽度的方法
Mar 31 Javascript
详解JavaScript中的表单验证
Jun 16 Javascript
纯css实现窗户玻璃雨滴逼真效果
Aug 23 Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
Sep 27 Javascript
js文字横向滚动特效
Nov 11 Javascript
详解Bootstrap插件
Apr 25 Javascript
Javascript中内建函数reduce的应用详解
Oct 20 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
Dec 24 Javascript
详解vue-cli3开发Chrome插件实践
May 29 Javascript
layui实现三级导航菜单
Jul 26 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代码(抓取网页中的邮箱地址)
2012/07/17 PHP
php缓冲 output_buffering的使用详解
2013/06/13 PHP
php约瑟夫问题解决关于处死犯人的算法
2015/03/23 PHP
ZF框架实现发送邮件的方法
2015/12/03 PHP
thinkPHP批量删除的实现方法分析
2016/11/09 PHP
php表单习惯用的正则表达式
2017/10/11 PHP
PHP实现类似题库抽题效果
2018/08/16 PHP
prototype Element学习笔记(篇二)
2008/10/26 Javascript
Node.js中的事件驱动编程详解
2014/08/16 Javascript
JavaScript事件处理的方式(三种)
2016/04/26 Javascript
JavaScript 是什么意思
2016/09/22 Javascript
javascript实现日期三级联动下拉框选择菜单
2020/12/03 Javascript
微信小程序实现人脸检测功能
2018/05/25 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
2018/05/30 Javascript
JS构造一个html文本内容成文件流形式发送到后台
2018/07/31 Javascript
关于layui flow loading占位图的实现方法
2019/09/21 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
2020/08/19 Javascript
[02:34]肉山说——泡妞篇
2014/09/16 DOTA
[01:09]DOTAPLUS——DOTA2的新时代
2018/04/04 DOTA
[01:04:35]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第一场
2018/04/04 DOTA
python学习入门细节知识点
2018/03/29 Python
python将txt文档每行内容循环插入数据库的方法
2018/12/28 Python
Python依赖包整体迁移方法详解
2019/08/15 Python
python tornado修改log输出方式
2019/11/18 Python
顶撞领导检讨书
2014/01/29 职场文书
技能比赛获奖感言
2014/02/14 职场文书
广播体操口号
2014/06/18 职场文书
班级出游活动计划书
2014/08/15 职场文书
音乐之声音乐广播稿
2014/09/10 职场文书
2014年小学图书室工作总结
2014/12/09 职场文书
自我评价优缺点范文
2015/03/11 职场文书
2015年度个人教学工作总结
2015/05/20 职场文书
文化大革命观后感
2015/06/17 职场文书
Java用自带的Image IO给图片添加水印
2021/06/15 Java/Android
python三子棋游戏
2022/05/04 Python
TS 类型兼容教程示例详解
2022/09/23 Javascript