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编程起步(第四课)
Feb 27 Javascript
js 获取服务器控件值的代码
Mar 05 Javascript
基于jQuery的自动完成插件
Feb 03 Javascript
瀑布流布局并自动加载实现代码
Mar 12 Javascript
Jquery给基本控件的取值、赋值示例
May 23 Javascript
JS中的form.submit()不能提交表单的错误原因
Oct 08 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
Sep 20 Javascript
微信小程序 navigation API实例详解
Oct 02 Javascript
angularJS模态框$modal实例代码
May 27 Javascript
vue项目开发中setTimeout等定时器的管理问题
Sep 13 Javascript
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
JS document form表单元素操作完整示例
Jan 13 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
Fine Uploader文件上传组件应用介绍
2013/01/06 PHP
ThinkPHP 3使用OSS的方法
2018/07/19 PHP
PHP中localeconv()函数的用法
2019/03/26 PHP
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
2011/11/14 Javascript
面向对象Javascript核心支持代码分享
2012/05/23 Javascript
JS返回上一页实例代码通过图片和按钮分别实现
2013/08/16 Javascript
写得不错的jquery table鼠标经过变色代码
2013/09/27 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
2013/11/21 Javascript
JavaScript基础函数整理汇总
2015/01/30 Javascript
JQuery实现可直接编辑的表格
2015/04/16 Javascript
jQuery的ready方法实现原理分析
2016/10/26 Javascript
常用原生js自定义函数总结
2016/11/20 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
2017/01/14 Javascript
Vue.js bootstrap前端实现分页和排序
2017/03/10 Javascript
在vue中添加Echarts图表的基本使用教程
2017/11/22 Javascript
React中this丢失的四种解决方法
2019/03/12 Javascript
JS的时间格式化和时间戳转换函数示例详解
2020/07/27 Javascript
JavaScript实现网页留言板功能
2020/11/23 Javascript
[09:34]2018DOTA2国际邀请赛寻真——永不放弃的iG
2018/08/14 DOTA
使用python搭建Django应用程序步骤及版本冲突问题解决
2013/11/19 Python
python获取当前时间对应unix时间戳的方法
2015/05/15 Python
pandas把dataframe转成Series,改变列中值的类型方法
2018/04/10 Python
python实现周期方波信号频谱图
2018/07/21 Python
对Python 窗体(tkinter)文本编辑器(Text)详解
2018/10/11 Python
Python计算两个矩形重合面积代码实例
2019/09/16 Python
Python Django2 model 查询介绍(条件、范围、模糊查询)
2020/03/16 Python
Ralph Lauren法国官网:美国高品味时装品牌
2017/12/08 全球购物
就业自荐书
2013/12/05 职场文书
自行车租赁公司创业计划书
2014/01/28 职场文书
教师试用期自我鉴定
2014/02/12 职场文书
2015年乡镇工作总结范文
2015/04/22 职场文书
2015年禁毒工作总结
2015/04/30 职场文书
工作建议书范文
2019/07/08 职场文书
SQL Server的存储过程与触发器以及系统函数和自定义函数
2022/04/10 SQL Server
Golang 并发编程 SingleFlight模式
2022/04/26 Golang
德生2P3收音机开箱评测
2022/04/30 无线电