Javascript相容IE&FF的複製到剪貼簿

最後更新：2017-01-13 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

方法一，全js複製到剪下版

可以相容基本上所有的主流瀏覽器(IE,FF)，很多地方可以用到的：

代碼如下

複製代碼

copyToClipboard = function(txt) {
if(window.clipboardData) {
window.clipboardData.clearData();
window.clipboardData.setData(”Text”, txt);
} else if(navigator.userAgent.indexOf(”Opera”) != -1) {
window.location = txt;
} else if (window.netscape) {
try {
netscape.security.PrivilegeManager.enablePrivilege(”UniversalXPConnect”);
} catch (e) {
alert(”您的firefox安全限制限制您進行剪貼簿操作，請開啟'about:config'將signed.applets.codebase_principal_support'設定為true'之後重試”);
return false;
}
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 = txt;
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);
}
}

方法二、jquery.zclip.js簡單實現複製到剪貼簿功能demo如下

代碼如下

複製代碼

<!DOCTYPE html>
<html>
<head>
<title>ZeroClipboard Test</title>
<meta charset="utf-8">
<style type="text/css">
.line{margin-bottom:20px;}
/* 複製提示 */
.copy-tips{position:fixed;z-index:999;bottom:50%;left:50%;margin:0 0 -20px -80px;background-color:rgba(0, 0, 0, 0.2);filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr=#30000000, endColorstr=#30000000);padding:6px;}
.copy-tips-wrap{padding:10px 20px;text-align:center;border:1px solid #F4D9A6;background-color:#FFFDEE;font-size:14px;}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.zclip.js"></script>
</head>
<body>
<div class="line">
    <h2>demo1 點擊複製當前文本</h2>
    <a href="#none" class="copy">點擊複製我</a>
</div>
<div class="line">
    <h2>demo2 點擊複製表單中的文本</h2>
    <a href="#none" class="copy-input">點擊複製單中的文本</a>
    <input type="text" class="input" value="輸入要複製的內容" />
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
/* 定義所有class為copy標籤，點擊後可複製被點擊對象的文本 */
    $(".copy").zclip({
        path: "ZeroClipboard.swf",
        copy: function(){
        return $(this).text();
        },
        beforeCopy:function(){/* 按住滑鼠時的操作 */
            $(this).css("color","orange");
        },
        afterCopy:function(){/* 複製成功後的操作 */
            var $copysuc = $("<div class='copy-tips'><div class='copy-tips-wrap'>☺ 複製成功</div></div>");
            $("body").find(".copy-tips").remove().end().append($copysuc);
            $(".copy-tips").fadeOut(3000);
        }
    });
/* 定義所有class為copy-input標籤，點擊後可複製class為input的文本 */
    $(".copy-input").zclip({
        path: "ZeroClipboard.swf",
        copy: function(){
        return $(this).parent().find(".input").val();
        },
        afterCopy:function(){/* 複製成功後的操作 */
            var $copysuc = $("<div class='copy-tips'><div class='copy-tips-wrap'>☺ 複製成功</div></div>");
            $("body").find(".copy-tips").remove().end().append($copysuc);
            $(".copy-tips").fadeOut(3000);
        }
    });
});
</script>

方法三，簡潔版本的與方法一有一點像哦不過代碼簡單

代碼如下

複製代碼

方法四，利用一個外掛程式帶flash效果

原理是：建立一個隱藏的flash檔案，同時給給flash的變數FlashVars 賦值“clipboard=..”，通過這個賦值flash就會把複製的內容放到剪貼簿。這個方法相容IE、Firefox、Opera、chrome、 Safari，真可謂“萬能”的解決方案。瀏覽器Flash的安裝率非常高，這幾乎是一個完美的解決方案。

JS部分：

代碼如下	複製代碼
<script type="text/javascript"> var clipboardswfdata; var setcopy_gettext = function(){ clipboardswfdata = document.getElementById('test_text').value; //alert(clipboardswfdata); window.document.clipboardswf.SetVariable('str', clipboardswfdata); } var floatwin = function(){ alert('複製成功！'); //document.getElementById('clipinner').style.display = 'none'; } </script>

HTML部分：

代碼如下

複製代碼

clipboardswf下載地址:http://file.111cn.net/upload/2013/12/_clipboard.rar.rar

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More