jQuery獲取剪貼板內(nèi)容的方法
本文實例講述了jQuery獲取剪貼板內(nèi)容的方法。分享給大家供大家參考,具體如下:
這兩天弄fckeditor粘貼功能,隨著工作的深入和在網(wǎng)上查詢資料,知道了在網(wǎng)頁中一般是不允許訪問“剪貼板”的,因為這樣存在著很大的安全隱患,我自己也嘗試著寫了一個簡單的demo
在IE和FF中剪貼板的訪問是可控的,但是在Opera、Chrome、Safari瀏覽器中是不允許訪問的,這樣就產(chǎn)生了瀏覽器兼容的問題,怎么樣才能讓其他的瀏覽器兼容這個功能呢,在網(wǎng)上查找了一些資料——“使用flash去訪問剪貼板”,然后把得到的值給JS,這樣間接的訪問了剪貼板里面的內(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)存當中去 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對象得到剪貼板的內(nèi)容,這樣就容易導致開發(fā)人員在后臺寫一個程序記錄用戶剪貼板的內(nèi)容,這樣可以把海量的數(shù)據(jù)集中起來做數(shù)據(jù)挖掘,這個對用戶的安全來說是很可怕的,因此在訪問的時候會提示用戶是否允許訪問剪貼板的內(nèi)容。 </span> </div><br> <div> <span> 在IE意外的瀏覽器是不允許訪問剪貼板內(nèi)容的,只有拒絕才是最安全的,所以在火狐等其他瀏覽器中不能通過window.clipboardData對象來訪問剪貼板的內(nèi)容 </span> </div> <button id="show_clipbrd">顯示剪貼板的內(nèi)容</button> <button id="set_clipbrd">給剪貼板設置信息</button> </body> </html>
更多關于jQuery相關內(nèi)容感興趣的讀者可查看本站專題:《jQuery常用插件及用法總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設計有所幫助。
相關文章
jQuery實現(xiàn)仿QQ頭像閃爍效果的文字閃動提示代碼
這篇文章主要介紹了jQuery實現(xiàn)仿QQ頭像閃爍效果的文字閃動提示代碼,涉及jQuery正則表達式及定時函數(shù)的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11jQuery制作input提示內(nèi)容(兼容IE8以上)
這篇文章主要為大家詳細介紹了jQuery制作input提示內(nèi)容,兼容IE8以上,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-07-07jquery+ajax實現(xiàn)異步上傳文件顯示進度條
這篇文章主要為大家詳細介紹了jquery+ajax實現(xiàn)異步上傳文件顯示進度條,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-08-08Easyui和zTree兩種方式分別實現(xiàn)樹形下拉框
最近工作中需要用到樹形下拉框,因為項目中樹形結(jié)構使用的是zTree,效果不是很好看,于是想著使用easyui的comboTree,雖然效果達到了,但是風格和bootstrap不搭,下面把這兩種方式的效果分享到腳本之家平臺供大家參考2017-08-08JQuery實現(xiàn)文字無縫滾動效果示例代碼(Marquee插件)
本篇文章主要介紹了JQuery實現(xiàn)文字無縫滾動效果示例代碼(Marquee插件),具有一定的參考價值,感興趣的小伙伴們可以參考一下。2017-03-03