web頁面點擊複製並跳轉

時間 2019-11-26

標籤 web 頁面點擊複製欄目 HTML 简体版

原文原文鏈接

想了解更多，可前往最新我的博客：Amaya丶夜雨博客或訪問主頁：https://www.amayaliu.cncss

今天在幫忙作一個微信跳轉功能，同時複製微信號等，點擊後即可跳轉微信，而後粘貼，進行微信號的添加。html

一開始本身寫，後面開始找雜七雜八的庫，後面最終使用的是 clipboard.js，由於clipboard.js 是一個不依賴 Flash,將文本複製到剪貼板的插件，僅僅 2kb。web

並且利用 clipboard.js 能夠很是簡便的實現這一複製跳轉功能。微信

重點來了：spa

1.代碼中dic是咱們點擊後獲取的內容(隨意內容，亦可動態內容),爲了方便快捷，咱們利用H5的新特性，自定義標籤插件

2.代碼中的<a>標籤，咱們這裏是爲了方便，使用A標籤，同時使用button，input，div，等等屬性均可以，但跳轉就須要本身多寫一步了調試

3.data-clipboard-action="copy" 指明覆制屬性，data-clipboard-target="dic" 指明定義的選擇器，dic則是咱們剛剛自定義的標籤cdn

4.clipboard.js 在cdn開源庫中擁有許多版本，1.0.0最第一版本不行，2.0.4最高版不行，就隨意截取中間的 1.5.1 版本htm

5.導入cdn <script src="https://cdn.bootcss.com/clipboard.js/1.5.1/clipboard.js"></script> 對象

6.繼續編寫餘下的js,創建clipboard對象（.btn 爲對應點擊的class，亦可id）以及複製後執行的方法，以便調試

7.運行頁面，打開F12，當咱們點擊A連接時，便會輸出所複製的結果

注：調試時可把連接地址關掉，不然複製後已跳轉，看不見調試內容

下面我給出一組代碼(可直接複製運行，無任何限制)：（轉載請留個連接位哦）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>web頁面點擊跳轉並複製指定內容</title>
</head>
<body>
    <!--這裏dic裏面即是須要獲取的內容-->
    <dic>歡迎前往 Amayaliu.cn - Amaya丶夜雨博客</dic>
    <a class="btn" href="https://amayaliu.cn" data-clipboard-action="copy" data-clipboard-target="dic">Copy</a>

    <!--採用cdn加速的 clipboard.js-->
    <script src="https://cdn.bootcss.com/clipboard.js/1.5.1/clipboard.js"></script>

    <!--建立對象，同時新建方法，咱們調試的時候能夠看見-->
    <script>
    var clipboard = new Clipboard('.btn');

    clipboard.on('success', function(e) {
        console.log(e);
    });

    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。