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 相关文章推荐
javascript操作文本框readOnly
May 15 Javascript
jquery 必填项判断表单是否为空的方法
Sep 14 Javascript
JavaScript入门教程(6) Window窗口对象
Jan 31 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
Jun 24 Javascript
Windows8下搭建Node.js开发环境教程
Sep 03 Javascript
Javascript 读取操作Sql中的Xml字段
Oct 09 Javascript
javascript中局部变量和全局变量的区别详解
Feb 27 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
Mar 04 Javascript
Jquery使用小技巧汇总
Dec 29 Javascript
jQuery实现摸拟alert提示框
May 22 Javascript
react-native ListView下拉刷新上拉加载实现代码
Aug 03 Javascript
图片加载完成再执行事件的实例
Nov 16 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 ajax 静态分页过程形式
2011/09/02 PHP
PHP函数spl_autoload_register()用法和__autoload()介绍
2012/02/04 PHP
用PHP代码给图片加水印
2015/07/01 PHP
PHP实现json_decode不转义中文的方法
2017/05/20 PHP
javascript中的107个基础知识收集整理 推荐
2010/03/29 Javascript
腾讯UED 漂亮的提示信息效果代码
2011/09/12 Javascript
ko knockoutjs动态属性绑定技巧应用
2012/11/14 Javascript
正则表达式搭配js轻松处理json文本方便而老古
2013/02/17 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
2013/11/13 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
2013/11/20 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
2015/03/04 Javascript
javascript实现可拖动变色并关闭层窗口实例
2015/05/15 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
2016/06/13 Javascript
JavaScript面试开发常用的知识点总结
2016/08/08 Javascript
js 作用域和变量详解
2017/02/16 Javascript
javascript九宫格图片随机打乱位置的实现方法
2017/03/15 Javascript
jQuery插件imgAreaSelect基础讲解
2017/05/26 jQuery
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
2017/08/24 Javascript
详解Angular5 路由传参的3种方法
2018/04/28 Javascript
javascript实现移动端轮播图
2020/12/09 Javascript
使用Python制作一个打字训练小工具
2019/10/01 Python
Python for循环与getitem的关系详解
2020/01/02 Python
详解PyQt5中textBrowser显示print语句输出的简单方法
2020/08/07 Python
ProForm英国站点:健身房和健身器材网上商店
2019/06/05 全球购物
亿阳信通股份有限公司笔试题(C#)
2016/03/04 面试题
J2EE中的容器都包括哪些
2013/08/21 面试题
广告学专业毕业生自荐信
2013/09/24 职场文书
难忘的一课教学反思
2014/04/30 职场文书
中国梦读书活动总结
2014/07/10 职场文书
新课培训心得体会
2014/09/03 职场文书
2016新党章学习心得体会
2016/01/15 职场文书
python设置 matplotlib 正确显示中文的四种方式
2021/05/10 Python
浅谈mysql执行过程以及顺序
2021/05/12 MySQL
使用php的mail()函数实现发送邮件功能
2021/06/03 PHP
python基础入门之普通操作与函数(三)
2021/06/13 Python
Python办公自动化解决world文件批量转换
2021/09/15 Python