Clipboard.js : 移動端瀏覽器實現網頁內容複製
最近在專案中遇到這樣一個需求:
點選按鈕,將指定的URL複製到剪貼簿,然後使用者可以貼上到瀏覽器(Safari為主)自行開啟。方案一:zeroClipboard.js
github地址:https://github.com/zeroclipboard/zeroclipboard
複製原理:zeroClipboard利用透明的 flash 覆蓋在複製按鈕上,點選 flash,將複製內容傳入到 flash 中,再通過 flash 把傳入的內容寫到剪貼簿上
首先想到這個外掛的原因是,之前在PC端的專案中使用過,相容性很好,駕輕就熟,所以,先用它做了個demo
HTML
?1 2 |
< input
type="text" name="" id="iUrl" value="https://github.com/zeroclipboard/zeroclipboard">
< button
id="copyUrlBtn">複製連結</ button >
|
JAVASCRIPT
?1 2 3 4 5 6 7 8 9 10 11 |
( function (){
var
btn = document.getElementById( 'copyUrlBtn' ),
text = document.getElementById( 'iUrl' ),
zc =
new
ZeroClipboard(btn);
zc.on( 'beforecopy' ,
function (e){
zc.setText(text.value);
});
btn.onclick =
function (){
alert( '已複製' );
}
})();
|
使用zeroClipboard.js需要注意以下兩點:
1# ZeroClipboard.swf 和 ZeroClipboard.min.js 需在同一目錄結構下, ZeroClipboard.swf無需呼叫,只需在頁面中引用ZeroClipboard.min.js 即可;
2# 測試複製功能需在伺服器環境,可以是簡單的本地伺服器,如:http://localhost:8000/xx
測試結果:
在PC端瀏覽器上測試,功能正常;但是在ios上,無論是QQ瀏覽器,還是Safari瀏覽器都無法實現複製功能。
可能由於Flash技術正被各大瀏覽器廠商冷落,所以,截止到目前ZeroClipboard.js最新版,也無法實現在移動端瀏覽器進行文字複製。
方案二:Clipboard.js
官網地址:https://clipboardjs.com/
相容性:
雖然要求Safari版本在10以上,但是作者做了很好的優雅降級:
The good news is that clipboard.js gracefully degrades if you need to support older browsers. All you have to do is show a tooltip saying Copied! when success event is called and Press Ctrl+C to copy when error event is called because the text is already selected.
也就是說,Safari版本是10以上的,可以直接成功複製;如果是版本小於10,可以通過如下程式碼提示使用者手動複製:
?1 2 3 |
clipboard.on( 'error' ,
function (e) {
alert( '請選擇“拷貝”進行復制!' )
});
|
Safari版本在10以下的效果:
在 alert('請選擇“拷貝”進行復制!') 之後,待複製的文字會自動選中,然後彈出系統本身的tooltip
效果如下:
DEMO:
//init
var
clipboard =
new
Clipboard(
'.btn'
);
//優雅降級:safari 版本號>=10,提示覆製成功;否則提示需在文字選中後,手動選擇“拷貝”進行復制
clipboard.on(
'success'
,
function
(e) {
alert(
'複製成功!'
)
e.clearSelection();
});
clipboard.on(
'error'
,
function
(e) {
alert(
'請選擇“拷貝”進行復制!'
)
});