js實現將要複製的內容放到剪貼簿裡面
阿新 • • 發佈:2019-01-27
功能:點選按鈕,將當前頁面的url放到剪貼簿裡面
1、對於IE有一個專門的介面來設定要複製的內容:window.clipboardData
複製當前頁面的url
html如下:
<button onClick = 'copyURL();'>複製url地址</button>
js如下:
function copyURL(){
var url = location.href;
window.clipboardData.setData('Text',url);
console.log('success');
}
注意window.clipboardData只是對IE有效,對其他瀏覽器都不相容
2、利用js外掛ZeroClipboard實現跨瀏覽器複製功能
A、在HTML中引入該外掛
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.1.6/ZeroClipboard.min.js" ></script>
<!--部分HTML程式碼--> B、部分js程式碼<textarea id="content" rows="10" cols="60">這裡是需要複製的內容</textarea> <input id="copy" type="button" data-clipboard-target="content" value="複製">
var clip = new ZeroClipboard( document.getElementById("copy") );
解析:在textarea裡面設定id = 'content',在要觸發複製事件的物件input裡面設定屬性data-clipboard-target的值為要複製的物件的id, 即content。
js中直接生成物件ZeroClipboard,如ZeroClipboard(document.getElementById('copy')); //點選'copy'按鈕,就可以將textarea
中的內容複製到剪貼簿裡面
另外一個例子:利用ZeroClipboard外掛實現將當前頁面的URL複製到剪貼簿裡面
首先、在HTML中引入外掛ZeroClipboard
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.1.6/ZeroClipboard.min.js" ></script>
<script src="http://i.gtimg.cn/qzone/biz/gdt/lib/jquery/jquery-2.1.4.js?max_age=31536000"></script>
其次、在html中定義觸發複製事件的物件
<p id="clipBoardTxt">複製連結</p>
然後、在js檔案中呼叫ZeroClipboard,js部分程式碼如下(這裡用的是jquery語法,所以在html中先引入jquery)
// 點選按鈕,實現將當前頁url放到剪貼簿上,並關閉當前頁
$('#clipBoardTxt').click(function(){
var clipBoardCont = location.href; // 要複製的url
var clip = new ZeroClipboard($('#clipBoardTxt')); // 定義觸發複製的物件
clip.setText(clipBoardCont); // 設定剪貼簿的內容 ,至此已經將剪貼簿的內容設定為當前頁的url了
success_prompt_alert('複製成功'); // 自定義提示的函式
setTimeout(function(){
// 關閉當前瀏覽器頁面
WeixinJSBridge.invoke('closeWindow',{}); //設定2s之後,呼叫微信瀏覽器的介面WeixinJSBridge,關閉當前頁
},2000);
});