教程集 > 脚本编程 > javascript > 正文 JS获取剪贴板中内容的方法

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

发布时间：2015-08-16 编辑：jiaochengji.com

本文介绍了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.jiaochengji.com
        </span>
    </div><br>
    <div>
        <span> 在IE意外的浏览器是不允许访问剪贴板内容的，只有拒绝才是最安全的，所以在火狐等其他浏览器中不能通过window.clipboardData对象来访问剪贴板的内容
        </span>
    </div>
    <button id="show_clipbrd">显示剪贴板的内容</button>
    <button id="set_clipbrd">给剪贴板设置信息</button>
</body>
</html>

您可能感兴趣的文章：
JS获取剪贴板中内容的方法
 JavaScript操作剪贴板的方法分享
 JavaScript操作window剪贴板实例
 电脑忽然不能复制粘贴文件如何解决
 电脑内存不足如何解决
 jquery 点击文本框复制内容到剪贴板的实现代码
 jsp剪贴板的复制粘贴程序
 Ajax异步请求所耗时间比较
 javascript读取表单数据的示例代码
 Html5剪切板功能的实现

关键词： 剪贴板 　

上一篇：javascript操作excel文件的例子下一篇：JS用JSON作为参数的例子

[关闭]

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

最近更新

浏览排行