本文介绍使用 jQuery-zclip 插件实现跨浏览器剪贴板复制功能。针对该插件在 iframe 结构中 Flash 覆盖层定位偏移的问题，提供了具体的代码修改方案。通过调整 getDOMObjectPosition 方法中的坐标计算逻辑，解决复制按钮文字与 Flash 透明层不重合的现象，确保复制功能在复杂页面结构中正常工作。
jQuery-zclip 插件简介与引入
利用 JavaScript 实现内容复制到剪贴板的功能原本并不复杂，但考虑到不同浏览器的兼容性，实现过程会变得较为繁琐。采用 jquery-zclip 插件是一个可行的解决方案，它通过调用 Flash 技术来确保各浏览器的兼容支持。关于其底层原理此处不再赘述，重点在于具体的实现步骤。
HTML 结构示例
假设 HTML 结构如下所示：
代码示例如下：
<div class="buttonBox">
<code rel="1"><span id="id_1">要复制的内容1</span></code>
<code rel="2"><span id="id_2">要复制的内容2</span></code>
<code rel="3"><span id="id_3">要复制的内容3</span></code>
</div>实现该功能需要引入两个 JS 文件，jQuery 库是基础，此外还需要 jquery-zclip.js 和 ZeroClipboard.swf 文件。这两个资源文件可从官方网站下载，下载地址为：http://www.steamdev.com/zclip/
JavaScript 初始化代码
生成复制按钮的 JavaScript 代码如下：
代码示例如下：
<script type="text/javascript">
$(function(){
$('code').each(function(){
var self = $(this);
var id = self.attr('rel');
var copy = $('<span>复制</span>').appendTo(self).zclip({
'path':'/static/admin/js/ZeroClipboard.swf',//这里写自己存在的地址
'afterCopy':function(){
alert('获取对应代码的地址已经复制到剪切板,可以使用ctrl+v粘贴');
},
'copy':function(){
return $('#id_'+id).text();//注意这里，若是div span等使用text(),若是input等，使用val(),这个支持的不是很好
}
});
});
});
</script>iframe 环境下的定位问题与修复
上述代码即可实现跨浏览器的复制功能。在独立测试环境中运行顺利，但在实际项目集成时出现了问题：复制按钮显示为纯文字，Flash 层未正确显示。经排查，发现 Flash 层确实已生成，但位置与文字按钮不重合。推测这与项目后台采用的 iframe 结构有关，这可能是该插件的一个已知缺陷。经过查阅资料并修改相关代码后，问题得以解决。
需要修改的具体代码如下：
代码示例如下：
getDOMObjectPosition: function (obj, stopObj) {
// get absolute coordinates for dom element
var info = {
left: 0,
top: 0,
width: obj.width ? obj.width : obj.offsetWidth,
height: obj.height ? obj.height : obj.offsetHeight
};
if (obj && (obj != stopObj)) {
//info.left += obj.offsetLeft; //修改前
//info.top += obj.offsetTop; //修改前
jpos = $(obj).position(); //修改后
info.left += jpos.left; //修改后
info.top += jpos.top; //修改后
}
return info;
} 该问题与插件原理有关：插件通过一个透明的 Flash 层覆盖在按钮上方来实现点击。若两者位置不重合，则会导致点击无效或视觉异常。