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获取距今n天前的日期
Jul 08 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
Mar 06 Javascript
Javascript实现获取及设置光标位置的方法
Jul 21 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
Nov 04 Javascript
jQuery之简单的表单验证实例
Jul 07 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
Sep 28 Javascript
canvas实现探照灯效果
Feb 07 Javascript
js事件冒泡与事件捕获详解
Feb 20 Javascript
webpack external模块的具体使用
Mar 10 Javascript
浅谈JS对象添加getter与setter的5种方法
Jun 09 Javascript
详解CommonJS和ES6模块循环加载处理的区别
Dec 26 Javascript
Selenium执行JavaScript脚本的方法示例
Dec 31 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 字符串加密函数(在指定时间内加密还原字符串,超时无法还原)
2010/04/28 PHP
php中通过虚代理实现延迟加载的实现代码
2011/06/10 PHP
thinkphp中字符截取函数msubstr()用法分析
2016/01/09 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
JavaScript触发器详解
2007/03/10 Javascript
extjs form textfield的隐藏方法
2008/12/29 Javascript
海量经典的jQuery插件集合
2010/01/12 Javascript
Document对象内容集合(比较全)
2010/09/06 Javascript
复制小说文本时出现的随机乱码的去除方法
2010/09/07 Javascript
javascript定义函数的方法
2010/12/06 Javascript
js从Cookies里面取值的简单实现
2014/06/30 Javascript
javascript在IE下trim函数无法使用的解决方法
2014/09/12 Javascript
JavaScript中使用document.write向页面输出内容实例
2014/10/16 Javascript
DropDownList实现可输入可选择(两种版本可选)
2016/12/07 Javascript
正则中的回溯定义与用法分析【JS与java实现】
2016/12/27 Javascript
JS得到当前时间的方法示例
2017/03/24 Javascript
js+html5实现页面可刷新的倒计时效果
2017/07/15 Javascript
在vscode中统一vue编码风格的方法
2018/02/22 Javascript
JavaScript引用类型RegExp基本用法详解
2018/08/09 Javascript
在vue中实现嵌套页面(iframe)
2020/07/30 Javascript
使用Mixin设计模式进行Python编程的方法讲解
2016/06/21 Python
Python实现提取XML内容并保存到Excel中的方法
2018/09/01 Python
python 实现视频流下载保存MP4的方法
2019/01/09 Python
基于MATLAB和Python实现MFCC特征参数提取
2019/08/13 Python
python 多进程并行编程 ProcessPoolExecutor的实现
2019/10/11 Python
解决windows下python3使用multiprocessing.Pool出现的问题
2020/04/08 Python
详解用Python调用百度地图正/逆地理编码API
2020/07/02 Python
纯css3实现的竖形无限级导航
2014/12/10 HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
2012/12/13 HTML / CSS
Auchan Direct波兰:欧尚在线杂货店
2016/10/19 全球购物
如何理解委托
2012/01/06 面试题
《小小竹排画中游》教学反思
2014/02/26 职场文书
2014年最新党员对照检查材料汇总
2014/09/15 职场文书
2014年度个人总结范文
2015/03/09 职场文书
《妈妈别哭,有我在》读后感3篇
2020/01/13 职场文书
CSS实现单选折叠菜单功能
2021/11/01 HTML / CSS