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 相关文章推荐
IE6下JS动态设置图片src地址问题
Jan 08 Javascript
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
Oct 24 Javascript
jquery退出each循环的写法
Feb 26 Javascript
jquery中map函数遍历数组用法实例
May 18 Javascript
js实现仿Discuz文本框弹出层效果
Aug 13 Javascript
JavaScript原型及原型链终极详解
Jan 04 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
Sep 05 Javascript
vue scroller返回页面记住滚动位置的实例代码
Jan 29 Javascript
VSCode中如何利用d.ts文件进行js智能提示
Apr 13 Javascript
详解vue组件开发脚手架
Jun 15 Javascript
layer.js open 隐藏滚动条的例子
Sep 05 Javascript
vue实现输入框自动跳转功能
May 20 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管理依赖(dependency)关系工具 Composer的自动加载(autoload)
2014/08/18 PHP
PHP 验证登陆类分享
2015/03/13 PHP
thinkPHP5框架设置404、403等http状态页面的方法
2018/06/05 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
PHP7新特性之抽象语法树(AST)带来的变化详解
2018/07/17 PHP
浏览器页面区域大小的js获取方法
2013/09/21 Javascript
查看大图功能代码jquery版
2013/11/05 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
2013/11/26 Javascript
Javascript闭包与函数柯里化浅析
2016/06/22 Javascript
微信小程序 传值取值的几种方法总结
2017/01/16 Javascript
js断点调试心得分享(必看篇)
2017/12/08 Javascript
使用vue实现grid-layout功能实例代码
2018/01/05 Javascript
浅谈node中的cluster集群
2018/06/02 Javascript
JS实现的新闻列表自动滚动效果示例
2019/01/30 Javascript
微信小程序后端(java)开发流程的详细步骤
2019/11/13 Javascript
微信小程序音乐播放器开发
2019/11/20 Javascript
[03:23:49]2016.12.17日完美“圣”典全回顾
2016/12/19 DOTA
[45:18]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第一场
2018/04/04 DOTA
[42:52]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python利用operator模块实现对象的多级排序详解
2017/05/09 Python
如何通过50行Python代码获取公众号全部文章
2019/07/12 Python
python的re模块使用方法详解
2019/07/26 Python
python实现简易学生信息管理系统
2020/04/05 Python
Python 3.10 的首个 PEP 诞生,内置类型 zip() 迎来新特性(推荐)
2020/07/03 Python
CSS3 @keyframes简单动画实现
2018/02/24 HTML / CSS
Expedia挪威官网:酒店、机票和租车
2018/03/03 全球购物
说出一些常用的类,包,接口
2014/09/22 面试题
写一个在SQL Server创建表的SQL语句
2012/03/10 面试题
申报职称专业技术个人的自我评价
2013/12/12 职场文书
机械设计职业生涯规划书
2013/12/27 职场文书
党的群众路线教育实践活动宣传方案
2014/02/23 职场文书
2014年医药代表工作总结
2014/11/22 职场文书
2014年管理人员工作总结
2014/12/01 职场文书
优秀护士事迹材料
2014/12/25 职场文书
民事答辩状格式范文
2015/05/21 职场文书
2015年度女工工作总结
2015/10/22 职场文书