首頁 > web前端 > js教程 > 主體

JavaScript如何在各瀏覽器中實現複製功能程式碼詳解

伊谢尔伦
發布: 2017-07-22 15:03:53
原創
2094 人瀏覽過

看看各瀏覽器對複製功能的支援: 

#1、IE瀏覽器,解決方法有三種,程式碼如下: 

function copy(txtid){ 
var txtObj = document.getElementById(txtid); 
if(window.clipboardData){ // 仅IE支持此对象,firefox、chrome不支持 
//1、通过clipboardData对象实现复制 
//window.clipboardData.clearData(); 
//window.clipboardData.setData("Text",txtObj.value); 
//2、通过document对象实现复制:先选择中文本,再执行复制命令 
//txtObj.select(); 
//document.execCommand("Copy"); // 仅IE支持,Firefox报语法错误,chrome执行结果返回false(不支持) 
//3、通过TextRange对象实现现复制:可以不用先选中内容 
txtObj.createTextRange().execCommand("Copy"); 
} 
}
登入後複製

2、Firefox,透過介面的方法實現,火狐是出於安全原因,在17之後版本關閉此接口,17及之前版本可用。代碼如下: 

var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interface.nsIClipboard);
登入後複製

3、Chrome出於安全,未提供使用者對剪貼簿的操作。由此可見,各瀏覽器對複製功能的支援並不統一。
Zero Clipboard庫
jhuckaby寫的Zero Clipboard的js類別庫,利用Flash完成複製內容到剪貼簿。只要瀏覽器裝有Flash插件就可以複製內容,透過ActionScript封鎖了JavaScript的不足,解決瀏覽器間複製相容性問題。
Zero Clipboard的實作原理:Zero Clipboard先產生Flash物件標籤,讓透明的Flash漂浮在複製按鈕之上,其實點擊的不是按鈕而是Flash,這樣將需要的內容傳入Flash,再透過Flash的複製到系統剪貼簿。
Zero Clipboard的使用方法
注意:由於是基於Flash實現,Flash出於安全,需要在Web容器(例如Apache、Tomcat)中才能運行,直接打開Flash將不會被加載,按鈕類似假死現象,網路上說右鍵Flash設定將ZeroClipboard.swf加入到受信任位置,感覺應該是行的,我試了,還是不行,也可能是我本機瀏覽器的問題。
1>下載Zero Clipboard的壓縮包,解壓縮後把資料夾中兩個文件:ZeroClipboard.js和ZeroClipboard.swf放入到你的專案中;
2>引入Zero Clipboard.js文件,如下程式碼:;
注意:ZeroClipboard.js與ZeroClipboard.swf需要放在同一路徑下,如果不在同一路徑,可使用ZeroClipboard.setMoviePath()來設定。
3>簡單複製程式碼如下: 

var clip = new ZeroClipboard.Client(); // 新建一个clip对象 
clip.setHandCursor( true ); // 设置鼠标为手型 
clip.setText("hello,world"); // 设置要复制的文本,可以为文本框的值 
clip.glue("copy-botton"); // 为clip注册一个按钮,参数为按钮元素的id,点击按钮就可以实现复制
登入後複製

4>Zero Clipboard常用方法,建議直接查看原始碼:
reposition():防止頁面大小變更時,Flash按鈕可能會錯位問題
hide() :隱藏Flash按鈕
show() :顯示Flash按鈕
setCSSEffects():解決Flash遮擋按鈕樣式失效問題(將:hover修改為.hover)。
5>Zero Clipboard 常用事件,事件處理函數為addEventListener():
load :Flash按鈕載入完事件
mouseOver:滑鼠移上事件
mouseOut:滑鼠移出事件
mouseDown:滑鼠按下事件
mouseUp:滑鼠放開事件
complete:複製成功事件

以上是JavaScript如何在各瀏覽器中實現複製功能程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板