跨浏览器的复制粘贴方案

最新推荐文章于 2020-07-23 12:10:42 发布

weixin_33918357

最新推荐文章于 2020-07-23 12:10:42 发布

阅读量147

点赞数

文章标签： javascript ViewUI

web开发中常常要实现“复制到剪切板”功能。这个功能很实用，但是由于安全问题，浏览器的限制越来越严，实现的方法也越来越有限了。Firefox默认下不能直接通过Javascript操作剪切板，必须开启相关的设置才行。想只通过Javascript技术实现跨浏览器的剪切板是行不通的。现在常用的方法是利用JavaScript+Flash实现，普遍流传的办法是_clipboard.swf，这是国外最早实现的（著名的Clipboard Copy解决方案:　http://www.jeffothy.com/weblog/clipboard-copy/）。但是很可惜，_clipboard.swf在新出来的flash10中无效，因为flash10中规定了只有在swf上进行了实际的操作（比如鼠标点击）才能启动剪切板。而_clipboard.swf方法的swf是隐藏的，通过JavaScript来操作flash的剪切板，显然没有对swf进行实际的用户操作。

针对这个，最近国外出现了一种新的方法，而且专门做了一个JavaScript库 Zero Clipboard ，它包含一个flash影片和一个JavaScript接口，这个flash是透明的（不是隐藏），用户不会察觉到它的存在。这个flash覆盖在一个DOM元素上，比如button，div之类，当点击这个DOM时，你实际点击的是这个flash，这个作用在flash上的动作能够开启flash的剪切板。这实际上就是一种clickjacking。

DEMO页面 : http://bowser.macminicolo.net/~jhuckaby/zeroclipboard/

Zero Clipboard项目主页：　http://code.google.com/p/zeroclipboard/

网上流行的阿里妈妈的复制代码的实际来源：http://www.jeffothy.com/weblog/clipboard-copy/

zeroclipboard

<!doctype html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>复制到剪切板 by 司徒正美</title>
        <script type="text/javascript" src="ZeroClipboard.js"></script>
        <script language="JavaScript">
            function get(id) { return document.getElementById(id); }
            function toClipboard(copy_id,input_id) {
                var clip = new ZeroClipboard.Client();
                clip.setHandCursor(true);
                clip.setText(get(input_id).value);		
                clip.addEventListener('complete', function (client) {
                    alert("Copy Ok!");
                });
                clip.glue(copy_id);
            }
        </script>
    </head>
    <body>
        <input type="text" id="input_text" />
        <input id="copy_button" type="button"  value="copy" onmouseOver="toClipboard(this.id,'input_text')" />
        <br/>
        <input type="text" id="input_text2" />
        <input id="copy_button2" type="button"  value="copy" onmouseOver="toClipboard(this.id,'input_text2')"/>
        <br/>
        <input type="text" id="input_text3" />
        <input id="copy_button3" type="button"  value="copy" onmouseOver="toClipboard(this.id,'input_text3')"/>
    </body>
</html>

weixin_33918357

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
跨浏览器的复制粘贴方案

web开发中常常要实现“复制到剪切板”功能。这个功能很实用，但是由于安全问题，浏览器的限制越来越严，实现的方法也越来越有限了。Firefox默认下不能直接通过Javascript操作剪切板，必须开启相关的设置才行。想只通过Javascript技术实现跨浏览器的剪切板是行不通的。现在常用的方法是利用JavaScript+Flash实现，普遍流传的办法是_clipboard.swf，这是国外最早实现的...
复制链接

扫一扫