当前位置:博客首页>>建站经验 >> 阅读正文

【点击复制代码 兼容】浏览器兼容的点击复制到剪贴板

作者: 郑晓 分类: 建站经验 发布于: 2012-07-01 08:54 浏览(9,276) 评论(2)


今天给博客的代码高亮下面加了一个小按钮–点击复制到剪贴板,不华不实的小功能…仅供娱乐~对各浏览器的兼容还算比较好~下面就来肢解一下相关代码:
1.首先是要复制的目标容器,在本博客中我借助的是codecolorer代码高亮插件的DIV,也可以根据自己的实际需要来使用别的,一样~只要给它一个ID,例如:
<div id=”copycode”>…这里是要复制的目标内容…</div>
2.接着要创建一个事件按钮,本文方法使用的是一隐藏flash来间接的实现兼容性复制,这面是该按钮代码:

<div id=”clipboard_content”>
<span class=”clipinner” id=”clipinner”>点此复制到剪贴板
<embed name=”clipboardswf” class=”clipboardswf” id=”clipboardswf” onmouseover=”setcopy_gettext()” devicefont=”false” src=”https://www.zh30.com/clipboard.swf” menu=”false” allowscriptaccess=”sameDomain” swliveconnect=”true” wmode=”transparent” type=”application/x-shockwave-flash” height=”20″ width=”100″></span>
</div>

好长啊好长啊….自己去看着精简吧….

3.然后,加上核心JS函数,如下:
<script type=”text/javascript”>
var clipboardswfdata;
var setcopy_gettext = function(){
clipboardswfdata = document.all.copycode.innerText;
window.document.clipboardswf.SetVariable(“str”, clipboardswfdata);
}
var floatwin = function(){
alert(“复制成功!” );
}
</script>
4.大工告成,赶紧试试吧!当然,您也可以给它加一个样式,如本博所用的:

<style type=”text/css”>
.clipinner {position:relative;}
.clipboardswf {position:absolute; left:0; top:0;}
</style>

好吧,一个小小的点击复制到剪贴板功能也不过如此吧?主要是要考虑到它的多浏览器兼容。

你还可以看看这篇文章:兼容各浏览器的复制到剪切板插件ZeroClipboard

↓↓微信扫码请我吃份正宗的烤面筋,可带劲啦↓↓
       

本文采用知识共享署名-非商业性使用 3.0 中国大陆许可协议进行许可,转载时请注明出处及相应链接。

本文永久链接: https://www.zh30.com/click-to-copy-code-to-clipboard-browser-compatibility.html

【点击复制代码 兼容】浏览器兼容的点击复制到剪贴板:目前有2 条留言

用户评论头像 小月发表于 2014年03月28日 09:39[回复]

为什么我的不行呢?

    用户评论头像 郑晓发表于 2014年03月28日 12:56[回复]

    可以再看看我刚发的一篇文章介绍的ZeroClipboard插件,也很好用。