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 实现的点击复制代码
Mar 24 Javascript
ModelDialog JavaScript模态对话框类代码
Apr 17 Javascript
缓动函数requestAnimationFrame 更好的实现浏览器经动画
Dec 07 Javascript
js如何取消事件冒泡
Sep 23 Javascript
简洁实用的BootStrap jQuery手风琴插件
Aug 31 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
Nov 29 Javascript
微信小程序开发(二)图片上传+服务端接收详解
Jan 11 Javascript
vue项目中应用ueditor自定义上传按钮功能
Apr 27 Javascript
js+css实现红包雨效果
Jul 12 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
Apr 04 Javascript
详解实现一个通用的“划词高亮”在线笔记功能
Apr 23 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
Nov 07 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
ThinkPHP有变量的where条件分页实例
2014/11/03 PHP
php类的扩展和继承用法实例
2015/06/20 PHP
php自定义分页类完整实例
2015/12/25 PHP
Jquery操作Select 简单方便 一个js插件搞定
2009/11/12 Javascript
面向对象的Javascript之一(初识Javascript)
2012/01/20 Javascript
JS控件的生命周期介绍
2012/10/22 Javascript
尝试在让script的type属性等于text/html
2013/01/15 Javascript
JavaScript中获取样式的原生方法小结
2014/10/08 Javascript
深入分析下javascript中的[]()+!
2015/07/07 Javascript
拥Bootstrap入怀——导航栏篇
2016/05/30 Javascript
全面总结Javascript对数组对象的各种操作
2017/01/22 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
2017/05/22 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
2017/07/22 jQuery
JavaScript自执行函数和jQuery扩展方法详解
2017/10/27 jQuery
使用Vue.js中的过滤器实现幂方求值的方法
2019/08/27 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
2019/10/24 Javascript
Python的一些用法分享
2012/10/07 Python
python使用两种发邮件的方式smtp和outlook示例
2017/06/02 Python
git进行版本控制心得详谈
2017/12/10 Python
Python爬虫获取整个站点中的所有外部链接代码示例
2017/12/26 Python
python实现抖音视频批量下载
2018/06/20 Python
django框架使用orm实现批量更新数据的方法
2019/06/21 Python
简单了解Python write writelines区别
2020/02/27 Python
基于python实现获取网页图片过程解析
2020/05/11 Python
基于Tensorflow一维卷积用法详解
2020/05/22 Python
Lookfantastic台湾:英国彩妆美发保养购物网
2018/03/26 全球购物
项目合作计划书
2014/01/09 职场文书
电子信息科学专业自荐信
2014/01/30 职场文书
企业演讲比赛主持词
2014/03/18 职场文书
《陈涉世家》教学反思
2014/04/12 职场文书
数控专业毕业生求职信
2014/06/12 职场文书
施工安全保证书
2015/05/09 职场文书
2015年社区流动人口工作总结
2015/05/12 职场文书
Python趣味挑战之教你用pygame画进度条
2021/05/31 Python
Python开发五子棋小游戏
2022/05/02 Python
vue实现input输入模糊查询的三种方式
2022/08/14 Vue.js