谷歌浏览器使用复制的功能

朱雀 2022-05-14 15:12 977阅读 0赞

在文本复制的时候，Ie和谷歌是不能同时使用 window.clipboardData，对象的，该功能IE可以使用，但是谷歌是不能使用的，所以要使用下面的插件来进行操作： ZeroClipboard.js和ZeroClipboard.swf这两个包，来进行操作。

如果这连个文件不在同一个目录下，可是在 new ZeroClipboard 对象之后调用，ZeroClipboard.setMoviePath('ZeroClipboard10.swf' );进行设置swf文件所在的目录。

案例的git地址：[https://gitee.com/sgqing/google\_browser\_text\_copy.git][https_gitee.com_sgqing_google_browser_text_copy.git]

<html>
    <head>
        <title>Zero Clipboard Test</title>
        <script type="text/javascript" src="ZeroClipboard.js"></script>
        <script language="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.setText($('fe_text').value);
                // 会监听，当赋值完成之后，就会执行该方法
                clip.addEventListener('complete', function (client, text) {
                    //debugstr("Copied text to clipboard: " + text );
                    alert("该地址已经复制，你可以使用Ctrl+V 粘贴。");
                });
                // 用于指定当前的flash运行在什么地方，一般是点击的地方
                clip.glue('clip_button');
            }
        </script>
    </head>
    
    <body onLoad="init()">
    
    <textarea id="fe_text" cols=50 rows=5>复制内容文本1</textarea>
    <span id="clip_container"><span id="clip_button"><b> 复制</b></span></span>
    
    <br>
    </body>
    </html>

特别提醒，在使用的时候，首先需要对上面的方法，进行初始化，要不然需要点击两次才可以完成数据的复制，注意在复制的时候，保证glue方法，不会操作同一个对象，要不然只会操作第一次的数据

[https_gitee.com_sgqing_google_browser_text_copy.git]: https://gitee.com/sgqing/google_browser_text_copy.git