- A+
所属分类:Wordpress
【js+flash解决火狐等浏览器复制按钮oncopy事件不兼容问题(WordPress主题HotNewspro为例)】
做网站有一个比较头疼的事情就是各个浏览器的兼容问题,其中我最近碰到的一个问题就是JS的oncopy事件,这个火狐是不兼容的,因为火狐为了安全性是禁止浏览器事件直接访问内存的,但这并难不倒我们,我们可以通过Flash间接就绝这个问题,下面我就以我现在博客主题中的解决办法为例讲解一下。
修改HotNewspro主题目录中single.php文件复制链接部分代码:
- <input type="hidden" id="nowurl" value="<?php the_permalink() ?>"/>
- <div id="copyurls">
- <div class="copyurl">+复制链接</div>
- <div class="copyurl"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="60" height="16" id="cb">
- <param name="allowScriptAccess" value="always" />
- <param name="movie" value="<?php bloginfo('template_url'); ?>/images/clipboardn.swf" />
- <param name="wmode" value="transparent" />
- <param name="FlashVars" value="jscode=copyText()&hand=y&mouse=M" />
- <embed src="<?php bloginfo('template_url'); ?>/images/clipboardn.swf" wmode="transparent" quality="high" width="60" height="16" name="cb" allowScriptAccess="always" FlashVars="jscode=copyText()&hand=y&mouse=M" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
- </object>
- </div>
- </div>
下面是Javascript脚本,作用是传递参数和控制鼠标动作效果的,紧跟上面代码依然放置在single.php。
- <script language="javascript">
- function G(id){return document.getElementById(id)}
- function copyText(){return G('nowurl').value;}
- var M={};
- M.mousedown=function(){G('copyurls').style.marginLeft="2px";G('copyurls').style.marginTop="2px";}
- M.mouseup=function(){G('copyurls').style.marginLeft="0";G('copyurls').style.marginTop="0";}
- </script>
下面是用到的CSS样式,我是把它放到css/css.css中的:
- /******** copyurl复制按钮样式 ********/
- #copyurls{position:relative;width:60px;height:16px;color:#333;float:left;}
- .copyurl{position:absolute;width:60px;height:16px;color:#333;}
其中用到的clipboardn.swf文件下载地址:
沙发
我怎么放在这上面没用呢?http://www.aixinfu.com/
板凳
swf源码是不是你写的啊,我把他反编译了。。。加上了可选消息提示框和可自定义提示消息。
1层
@蓝风火火 这个源码不是我写的,不过加上提示信息确实是个不错的改进!
2层
@筑梦者 来个IP呗http://twohuo.com/flash-copy-button.html,验证反应有点迟钝,我又去掉了。关键是它三更半夜会自己产生一个错误日志,未定义err()…
@ZeroClipboard跨浏览器复制解决方案 | 图火[twohuoc.om] 呵呵
来自外部的引用: 1