js+flash解决火狐等浏览器复制按钮oncopy事件不兼容问题

  • A+
所属分类：Wordpress

【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文件下载地址：

  clipboardn.swf  (1.1 KiB, 196 次)  点击下载

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论：6   其中：访客  5   博主  0   引用   1

    • avatar aixinfu.com 0
      回复  沙发

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

      • avatar 蓝风火火 2
        回复  板凳

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

          • avatar 筑梦者 5
            回复  1层

            @蓝风火火 这个源码不是我写的，不过加上提示信息确实是个不错的改进！

              • avatar 蓝风火火 2
                回复  2层

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

            • avatar 筑梦者 5
              回复

              @ZeroClipboard跨浏览器复制解决方案 | 图火[twohuoc.om] 呵呵

              • 来自外部的引用： 1

              • ZeroClipboard跨浏览器复制解决方案 | 图火[twohuoc.om]