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 相关文章推荐
js 浮动层菜单收藏
Jan 16 Javascript
IE 条件注释详解总结(附实例代码)
Aug 29 Javascript
Jquery如何实现点击时高亮显示代码
Jan 22 Javascript
浅谈javascript原型链与继承
Jul 13 Javascript
用js写的一个路由(简单实例)
Sep 24 Javascript
js简单正则验证汉字英文及下划线的方法
Nov 28 Javascript
微信小程序-获得用户输入内容
Feb 13 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
Apr 14 Javascript
JavaScript仿微信打飞机游戏
Jul 05 Javascript
node跨域请求方法小结
Aug 25 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
vue 里面的 $forceUpdate() 强制实例重新渲染操作
Sep 21 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/24 PHP
php如何连接sql server
2015/10/16 PHP
浅析Yii2 gridview实现批量删除教程
2016/04/22 PHP
php分享朋友圈的实现代码
2019/02/18 PHP
PHP命名空间定义与用法实例分析
2019/08/14 PHP
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
2010/06/25 Javascript
JS实现div居中示例
2014/04/17 Javascript
JavaScript中的迭代器和生成器详解
2014/10/29 Javascript
详谈javascript中的cookie
2015/06/03 Javascript
JavaScript中的原型prototype属性使用详解
2015/06/05 Javascript
使用AngularJS实现表单向导的方法
2015/06/19 Javascript
JavaScript实现数组随机排序的方法
2015/06/26 Javascript
Bootstrap每天必学之表单
2015/11/23 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
2015/11/26 Javascript
AngularJS使用ngMessages进行表单验证
2015/12/27 Javascript
基于jQuery实现淡入淡出效果轮播图
2020/07/31 Javascript
简单的vue-resourse获取json并应用到模板示例
2017/02/10 Javascript
详解在Vue中有条件地使用CSS类
2017/09/30 Javascript
解决vue中修改了数据但视图无法更新的情况
2018/08/27 Javascript
Vuex 单状态库与多模块状态库详解
2018/12/11 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
2019/06/17 Javascript
微信小程序实现手势滑动效果
2019/08/26 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
2019/10/20 Javascript
vue 自定义右键样式的实例代码
2019/11/06 Javascript
JavaScript实现英语单词题库
2019/12/24 Javascript
微信小程序实现天气预报功能(附源码)
2020/12/10 Javascript
ipad上运行python的方法步骤
2019/10/12 Python
Tensorflow实现多GPU并行方式
2020/02/03 Python
pycharm 2018 激活码及破解补丁激活方式
2020/09/21 Python
Python创建文件夹与文件的快捷方法
2020/12/08 Python
StubHub德国:购买和出售门票
2017/09/06 全球购物
亚马逊新加坡官方网站:Amazon.sg
2020/03/25 全球购物
.NET面试问题集
2015/12/08 面试题
高中毕业自我鉴定
2013/12/16 职场文书
教师四风对照检查材料思想汇报
2014/09/17 职场文书
质量保证书格式
2015/02/27 职场文书