现在的位置: 首页Wordpress>正文
js+flash解决火狐等浏览器复制按钮oncopy事件不兼容问题
2011年12月12日 Wordpress 评论数 6 ⁄ 被围观 4,911+

【js+flash解决火狐等浏览器复制按钮oncopy事件不兼容问题(WordPress主题HotNewspro为例)】
做网站有一个比较头疼的事情就是各个浏览器的兼容问题,其中我最近碰到的一个问题就是JS的oncopy事件,这个火狐是不兼容的,因为火狐为了安全性是禁止浏览器事件直接访问内存的,但这并难不倒我们,我们可以通过Flash间接就绝这个问题,下面我就以我现在博客主题中的解决办法为例讲解一下。
修改HotNewspro主题目录中single.php文件复制链接部分代码:

  1. <input type="hidden" id="nowurl" value="<?php the_permalink() ?>"/>
  2. <div id="copyurls">
  3. <div class="copyurl">+复制链接</div>
  4. <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">
  5. <param name="allowScriptAccess" value="always" />
  6. <param name="movie" value="<?php bloginfo('template_url'); ?>/images/clipboardn.swf" />
  7. <param name="wmode" value="transparent" />
  8. <param name="FlashVars" value="jscode=copyText()&hand=y&mouse=M" />
  9. <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" />
  10. </object>
  11. </div>
  12. </div>

下面是Javascript脚本,作用是传递参数和控制鼠标动作效果的,紧跟上面代码依然放置在single.php。

  1. <script language="javascript">
  2. function G(id){return document.getElementById(id)}
  3. function copyText(){return G('nowurl').value;}
  4. var M={};
  5. M.mousedown=function(){G('copyurls').style.marginLeft="2px";G('copyurls').style.marginTop="2px";}
  6. M.mouseup=function(){G('copyurls').style.marginLeft="0";G('copyurls').style.marginTop="0";}
  7. </script>

下面是用到的CSS样式,我是把它放到css/css.css中的:

  1. /******** copyurl复制按钮样式 ********/
  2. #copyurls{position:relative;width:60px;height:16px;color:#333;float:left;}
  3. .copyurl{position:absolute;width:60px;height:16px;color:#333;}

其中用到的clipboardn.swf文件下载地址:

目前有 6 条留言 其中:访客:5 条, 博主:0 条 引用: 1

  1. aixinfu.com : 2012年03月10日20:54:41  1楼 @回复 回复

    我怎么放在这上面没用呢?http://www.aixinfu.com/

  2. 蓝风火火 : 2012年06月21日12:54:49  2楼 @回复 回复

    swf源码是不是你写的啊,我把他反编译了。。。加上了可选消息提示框和可自定义提示消息。 :mrgreen:

    • 筑梦者 : 2012年06月21日13:38:05 @回复 回复

      这个源码不是我写的,不过加上提示信息确实是个不错的改进!

      • 蓝风火火 : 2012年06月27日15:20:10 @回复 回复

        来个IP呗http://twohuo.com/flash-copy-button.html,验证反应有点迟钝,我又去掉了。关键是它三更半夜会自己产生一个错误日志,未定义err()…

  3. 筑梦者 : 2012年06月12日13:48:59 @回复 回复

    呵呵

筑梦者坚信,您的评论是最宝贵的!

(嘿嘿,只需要填写昵称和邮箱就OK)

留言无头像?

插入图片 留言不能超过500字,已输入字数: