jQuery獲取剪貼板內(nèi)容的方法

更新時(shí)間：2016年06月16日 09:23:18 作者：hbiao68

這篇文章主要介紹了jQuery獲取剪貼板內(nèi)容的方法,結(jié)合實(shí)例形式分析了jQuery針對(duì)不同瀏覽器獲取剪貼板內(nèi)容的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了jQuery獲取剪貼板內(nèi)容的方法。分享給大家供大家參考，具體如下：

這兩天弄fckeditor粘貼功能，隨著工作的深入和在網(wǎng)上查詢資料，知道了在網(wǎng)頁(yè)中一般是不允許訪問(wèn)“剪貼板”的，因?yàn)檫@樣存在著很大的安全隱患，我自己也嘗試著寫了一個(gè)簡(jiǎn)單的demo

在IE和FF中剪貼板的訪問(wèn)是可控的，但是在Opera、Chrome、Safari瀏覽器中是不允許訪問(wèn)的，這樣就產(chǎn)生了瀏覽器兼容的問(wèn)題，怎么樣才能讓其他的瀏覽器兼容這個(gè)功能呢，在網(wǎng)上查找了一些資料——“使用flash去訪問(wèn)剪貼板”，然后把得到的值給JS，這樣間接的訪問(wèn)了剪貼板里面的內(nèi)容了

下面的代碼只支持IE和FF，是我在網(wǎng)上找的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()
{
  //得到剪貼板的內(nèi)容
  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(){
  //顯示剪貼板的內(nèi)容是text類型的,給剪貼板的賦值為后面的字符串
  var str1=window.clipboardData.setData("text","<strong>my name is huangbiao</strong>");
  alert(window.clipboardData.getData("text"));
}
function ff_set(){
  //將copy變量的值放到內(nèi)存當(dāng)中去
  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測(cè)試） ："+copy);
}
</script>
<title>瀏覽器訪問(wèn)剪貼板</title>
</head>
<body>
  <div>
    <span>在IE中是對(duì)外有接口的，可以通過(guò)window.clipboardData對(duì)象得到剪貼板的內(nèi)容，這樣就容易導(dǎo)致開(kāi)發(fā)人員在后臺(tái)寫一個(gè)程序記錄用戶剪貼板的內(nèi)容，這樣可以把海量的數(shù)據(jù)集中起來(lái)做數(shù)據(jù)挖掘，這個(gè)對(duì)用戶的安全來(lái)說(shuō)是很可怕的，因此在訪問(wèn)的時(shí)候會(huì)提示用戶是否允許訪問(wèn)剪貼板的內(nèi)容。
    </span>
  </div><br>
  <div>
    <span>    在IE意外的瀏覽器是不允許訪問(wèn)剪貼板內(nèi)容的，只有拒絕才是最安全的，所以在火狐等其他瀏覽器中不能通過(guò)window.clipboardData對(duì)象來(lái)訪問(wèn)剪貼板的內(nèi)容
    </span>
  </div>
  <button id="show_clipbrd">顯示剪貼板的內(nèi)容</button>
  <button id="set_clipbrd">給剪貼板設(shè)置信息</button>
</body>
</html>

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery常用插件及用法總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: