波斯马BOSSMA Information Technology

jQuery ZeroClipboard中Flash定位不准确的解决方案

发布时间:2014年3月11日 / 分类:JavaScript / 6,059 次浏览 / 评论

jQuery ZeroClipboard支持在多种浏览器中复制内容到剪贴板,IE、Firefox、Chrome等等都不在话下。其本身作为jQuery的一个插件封装了Zero Clioborad,其实现原理就是在要点击的按钮或链接上覆盖一个透明的Flash,实际上用户点击的是Flash,复制到剪贴板也是通过此Flash实现的。

大家用的很Happy,但是我用的时候发现点击按钮没有反应,后来发现是Flash出现的位置不对,可能原作者写的时候没有在复杂的样式环境下测试过。Flash的位置是动态设定的,找到其源码查看,发现一处可能有问题的地方:

注意下边这两句:

obj.offsetTop 指 obj 距离上方或上层控件的位置,整型,单位像素;obj.offsetLeft 指 obj 距离左方或上层控件的位置,整型,单位像素。实际测试获取到的是相对于上层控件的位置。

但是在创建浮动层的时候,定位方式使用了absolute,同时设置top,left为上边的值:

实际测试是到页面上方和左侧的距离。这样就是将相对于上层控件的位置应用为了相对于整个页面的位置,所以Flash没有出现在按钮的位置。

既然明确了这个问题,那获取按钮位置的时候我们就换一种方法,因为使用了jQuery,直接上Jquery的方法既可以了:

对于浏览器对CSS的解析不是很了解,此方案仅适合遇到这个问题的朋友尝试下,可能最终原因还不是这个,因为貌似大家一直用的挺好。

最后附上插件地址:https://github.com/patricklodder/jquery-zclip

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自波斯马,原文地址《jQuery ZeroClipboard中Flash定位不准确的解决方案

关键字:

建议订阅本站,及时阅读最新文章!
【上一篇】 【下一篇】

发表评论