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如何改变html标签的样式(两种实现方法)
Jan 16 Javascript
基于SVG的web页面图形绘制API介绍及编程演示
Jun 28 Javascript
jquery实现多级下拉菜单的实例代码
Oct 02 Javascript
Js表格万条数据瞬间加载实现代码
Feb 20 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
Jan 07 Javascript
Bootstrap下拉菜单效果实例代码分享
Jun 30 Javascript
js实现彩色条纹滚动条效果
Mar 15 Javascript
Angular2学习教程之ng中变更检测问题详解
May 28 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
Nov 15 Javascript
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
JavaScript中arguments和this对象用法分析
Aug 08 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
Dec 10 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解析xml提示Invalid byte 1 of 1-byte UTF-8 sequence错误的处理方法
2013/11/14 PHP
mantis安装、配置和使用中的问题小结
2014/07/14 PHP
php实现的九九乘法口诀表简洁版
2014/07/28 PHP
php字符串截取函数用法分析
2014/11/25 PHP
php封装的mongodb操作类代码
2017/08/06 PHP
PHP设计模式之建造者模式(Builder)原理与用法案例详解
2019/12/12 PHP
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
2009/11/14 Javascript
javascript实现信息的显示和隐藏如注册页面
2013/12/03 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
2014/10/16 Javascript
基于javascript实现窗口抖动效果
2016/01/03 Javascript
关于JS 预解释的相关理解
2016/06/28 Javascript
利用fecha进行JS日期处理
2016/11/21 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
2017/09/28 Javascript
React中嵌套组件与被嵌套组件的通信过程
2018/07/11 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
2018/08/27 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
2018/12/23 Javascript
vue中多路由表头吸顶实现的几种布局方式
2019/04/12 Javascript
详解json串反转义(消除反斜杠)
2019/08/12 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
2019/12/23 jQuery
js实现文章目录索引导航(table of content)
2020/05/10 Javascript
完美解决通过IP地址访问VUE项目的问题
2020/07/18 Javascript
[42:04]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第一局
2016/03/03 DOTA
Python使用pygame模块编写俄罗斯方块游戏的代码实例
2015/12/08 Python
Python实现的桶排序算法示例
2017/11/29 Python
django反向解析URL和URL命名空间的方法
2018/06/05 Python
css3实现input输入框颜色渐变发光效果代码
2014/04/02 HTML / CSS
经典c++面试题二
2015/08/14 面试题
会计自我鉴定范文
2013/10/06 职场文书
残疾人创业典型事迹
2014/02/01 职场文书
社区优秀志愿者材料
2014/02/02 职场文书
房产买卖委托公证书
2014/04/04 职场文书
厨房领班竞聘演讲稿
2014/04/23 职场文书
应聘教师求职信
2014/07/19 职场文书
2014国庆节演讲稿:祖国在我心中(400字)
2014/09/25 职场文书
详解MySQL中的主键与事务
2021/05/27 MySQL
MySql分区类型及创建分区的方法
2022/04/13 MySQL