JS获取剪贴板中内容的方法

发布时间:2020-06-14编辑:脚本学堂
本文介绍了JS获取剪贴板中内容的方法,在IE和FF中剪贴板的访问是可控的,但是在Opera、Chrome、Safari浏览器中是不允许访问的,这样就产生了浏览器兼容的问题,怎么样才能让其他的浏览器兼容这个功能呢?

这两天弄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) strstr = str.value.QueryInterface(Components.interfaces.nsISupportsWString); 
        else if (Components.interfaces.nsISupportsString) strstr = 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 copycopytext = 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对象得到剪贴板的内容,这样就容易导致开发人员在后台写一个程序记录用户剪贴板的内容,这样可以把海量的数据集中起来做数据挖掘,这个对用户的安全来说是很可怕的,因此在访问的时候会提示用户是否允许访问剪贴板的内容。 www.jb200.com
        </span> 
    </div><br> 
    <div> 
        <span> 在IE意外的浏览器是不允许访问剪贴板内容的,只有拒绝才是最安全的,所以在火狐等其他浏览器中不能通过window.clipboardData对象来访问剪贴板的内容 
        </span> 
    </div> 
    <button id="show_clipbrd">显示剪贴板的内容</button> 
    <button id="set_clipbrd">给剪贴板设置信息</button> 
</body> 
</html>