在很多视频网站或提供了网址分享功能的网站上, 你会发现当你点击分享组件后网址或分享代码会自动的粘贴到你的系统剪贴板里. 这种能将网页内容自动粘贴到剪贴板的功能会给用户带来很大的方便. 不幸的是, Flash 10 毁掉了大部分所有的完成这个任务的方法. 而幸运的是, 还有一个工具叫做 ZeroClipboard https://github.com/zeroclipboard/zeroclipboard .ZeroClipboard 使用了一个替换的 Flash, 并和 JavaScript 交互, 能让你把任意内容通过 JavaScript 拷贝到系统剪贴板板里.
观看演示
html 代码
- <script type="text/javascript" src="ZeroClipboard.js">
- </script>
- <textarea name="box-content" id="box-content" rows="5" cols="70">
这里是歪脖骇客 (webHek), 请关注我们的微博:@歪脖骇客
- </textarea>
- <br /><br />
- <p>
- <input type="button" id="copy" data-clipboard-target="box-content" name="copy" value="拷贝到剪贴板" />
- </p>
上面的 HTML 代码里有一个文本框, ID 是 "box-content", 还有一个按钮, ID 是 "copy". 下面在使用 ZeroClipboard 程序包时将会用到这两个 ID.
- ZeroClipboard JavaScript
- // 设置路径
- ZeroClipboard.config( { moviePath: 'zeroclipboard-1.x-master/ZeroClipboard.swf' } );
- //create client
- var client=new ZeroClipboard($("#copy"));
- //event
- client.on( "load", function(client) {
- // alert( "movie is loaded" );
- client.on( "complete", function(client, args) {
- // `this` is the element that was clicked
- alert("粘贴进剪贴板的信息是:\" " + args.text +);
- } );
- } );
上面的代码中我们做的几件事情是:
设置 SWF 文件的路径.
创建一个 ZeroClipboard 的 "client" 对象: 一个 client 就是这个页面上的一个剪贴板对象实例.
ZeroClipboard 会自动添加监听器, 点击按钮时, 文本框里的文字将被拷贝到剪贴板里.
当拷贝事件完成后, 你还可以添加一个回调函数, 执行后续动作, 比如提示已拷贝成功.
在拷贝内容里加入网页相关信息
我发现现在有一种趋势, 当我在其它网站拷贝网页内容时, 发现拷贝的内容里多出了一些这个网站的署名信息, 比如网页标题, 链接地址或一段关于这篇文章的声明内容. 下面就说一下如何实现它.
JavaScript 脚本
你需要使用 ZeroClipboard 插件:
- //set path
- ZeroClipboard.config( { moviePath: 'zeroclipboard-1.x-master/ZeroClipboard.swf' } );
- //create client
- var client=new ZeroClipboard($("#copy"));
- //event
- client.addEventListener('mousedown',function() {
- client.setText(document.getElementById('box-content').value + ".\n\n 阅读" + Windows.title + ", 来自" + Windows.location + ", 这里有更多有趣内容!");
- });
使用 JavaScript 读取页面的 title 和网址, 将它们连接到拷贝的内容信息的后面.
观看演示
很简单实用. ZeroClipboard 是一个非常不错的工具, 让你在任何网站上都能实现 JavaScript 程序控制将信息拷贝到剪贴板.
来源: http://www.webhek.com/post/javascript-clipboard.html