JS複製內容到剪貼板(兼容FF/Chrome/Safari全部瀏覽器)

時間 2020-04-12

標籤複製內容剪貼板兼容 chrome safari 全部瀏覽器欄目 JavaScript 简体版

原文原文鏈接

如今瀏覽器種類也愈來愈多，諸如 IE、Firefox、Chrome、Safari等等，所以如今要實現一個js複製內容到剪貼板的小功能就不是一件那麼容易的事了。javascript

在FLASH 9 時代，有一個通殺全部瀏覽器的js複製內容到剪貼板的方案：html

這個方案是一個最流行的方法: 著名的Clipboard Copy解決方案利用一個clipboard.swf做爲橋樑，複製內容到剪貼板。java

原理是：建立一個隱藏的flash文件，同時給給flash的變量FlashVars 賦值「clipboard=..」，經過這個賦值flash就會把複製的內容放到剪貼板。這個方法兼容IE、Firefox、Opera、chrome、 Safari，真可謂「萬能」的解決方案。瀏覽器Flash的安裝率很是高，這幾乎是一個完美的解決方案。web

 
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
       
 
        < 
        html 
        xmlns 
        = 
        "http://www.w3.org/1999/xhtml" 
        > 
       
 
        < 
        head 
        > 
       
 
        < 
        title 
        >Web開發者 - www.Admin10000.com </ 
        title 
        > 
       
 
        < 
        meta 
        http-equiv 
        = 
        "Content-Type" 
        content 
        = 
        "text/html; charset=utf-8" 
        /> 
       
 
        < 
        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 
        > 
       
 
        </ 
        head 
        > 
       
 
        < 
        body 
        > 
       
 
        < 
        textarea 
        id 
        = 
        "test_text" 
        rows 
        = 
        "15" 
        cols 
        = 
        "100" 
        >文本內容.......</ 
        textarea 
        > 
       
 
        < 
        div 
        id 
        = 
        "clipboard_content" 
        >  
       
 
           
        < 
        div 
        class 
        = 
        "my_clip_button" 
        >< 
        span 
        class 
        = 
        "clipinner" 
        id 
        = 
        "clipinner" 
        >複製代碼到剪切板 
       
 
             
        < 
        embed 
        name 
        = 
        "clipboardswf" 
        class 
        = 
        "clipboardswf" 
        id 
        = 
        "clipboardswf" 
        onmouseover 
        = 
        "setcopy_gettext()" 
        devicefont 
        = 
        "false" 
        src 
        = 
        "./_clipboard.swf" 
        menu 
        = 
        "false" 
        allowscriptaccess 
        = 
        "sameDomain" 
        swliveconnect 
        = 
        "true" 
        wmode 
        = 
        "transparent" 
        type 
        = 
        "application/x-shockwave-flash" 
        height 
        = 
        "20" 
        width 
        = 
        "100" 
        > 
       
 
             
        </ 
        span 
        > 
       
 
           
        </ 
        div 
        >  
       
 
        </ 
        div 
        > 
       
 
        </ 
        body 
        > 
       
 
        </ 
        html 
        > 
       

clipboard.swf 的下載地址： clicpboard.rardchrome

可是 Flash 10 時代，上面的方法已經不行了。瀏覽器

由於flash10中規定了只有在swf上進行了真實的操做（好比鼠標點擊）才能訪問剪切板，而上述方法只是使用了一個隱藏的swf文件，經過javascript操做flash的剪貼板，用戶並無對swf文件進行真實的操做，所以這個方法也就失效了。app

那麼如何解決這個「真實操做」的問題呢？能夠使用一個JavaScript庫：Zero Clipboard，利用這個js庫能夠支持利用flash 10 實現複製到剪貼板。這個方法原理是在一個透明的flash（對用戶來講是不可見的）上覆蓋一個dom元素好比button或div，當點擊這個dom時，實際點擊的是flash，從而訪問flash的剪貼板。dom

如下是調試好的例子：網站

 
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
       
        < 
        html 
        xmlns 
        = 
        "http://www.w3.org/1999/xhtml" 
        > 
       
        < 
        head 
        > 
       
        < 
        title 
        >Zero Clipboard Test</ 
        title 
        > 
       
        < 
        meta 
        http-equiv 
        = 
        "Content-Type" 
        content 
        = 
        "text/html; charset=utf-8" 
        /> 
       
        < 
        script 
        type 
        = 
        "text/javascript" 
        src 
        = 
        "ZeroClipboard.js" 
        ></ 
        script 
        > 
       
        < 
        script 
        type 
        = 
        "text/javaScript" 
        > 
       
        var clip = null;   
       
        function $(id) { return document.getElementById(id); }   
       
        function init() { 
       
        clip = new ZeroClipboard.Client(); 
       
        clip.setHandCursor(true);    
       
        clip.addEventListener('mouseOver', function (client) { 
       
        // update the text on mouse over 
       
        clip.setText( $('fe_text').value ); 
       
        }); 
       
        clip.addEventListener('complete', function (client, text) { 
       
        //debugstr("Copied text to clipboard: " + text ); 
       
        alert("該地址已經複製，你能夠使用Ctrl+V 粘貼。"); 
       
        }); 
       
        clip.glue('clip_button', 'clip_container' ); 
       
        } 
       
        </ 
        script 
        > 
       
        </ 
        head 
        > 
       
        < 
        body 
        onLoad 
        = 
        "init()" 
        > 
       
        < 
        input 
        id 
        = 
        "fe_text" 
        cols 
        = 
        "50" 
        rows 
        = 
        "5" 
        value 
        = 
        "複製內容文本" 
        > 
       
        < 
        span 
        id 
        = 
        "clip_container" 
        >< 
        span 
        id 
        = 
        "clip_button" 
        >< 
        strong 
        >複製</ 
        strong 
        ></ 
        span 
        ></ 
        span 
        > 
       
        </ 
        body 
        > 
       
        </ 
        html 
        >