JS、Flash 实现复制功能 (浏览器兼容)
/** 此方法不兼容非IE外的浏览器。。。参考其它网站的实现方式,是用Flash来解决的此问题 */
function copyOperate(copyMsg){
if(window.clipboardData&&clipboardData.setData){
clipboardData.setData("text",copyMsg);
alert("复制成功");
}else
{
alert("您所使用的浏览器不支持此操作,请手动复制");
}
}
----------- ** 2010-10-27 更新 ** ---------------
使用Flash解决浏览器兼容问题:
可以使用ZeroClipboard插件,此插件的原理是通过利用透明的Flash让其漂浮在复制按钮上,在点击按钮时触发到漂浮在按钮上方的Flash,然后将内容传入Flash,再通过Flash的复制功能把传入的内容复制到剪切板。
使用总结:
1、需必须引用到 ZeroClipboard.js 和 ZeroClipboard.swf 这个两文件
2、JS调用方法:
function copyInit()
{
ZeroClipboard.setMoviePath("../js/zeroclipboard/zeroclipboard.swf"); // 重新设置引用SWF文件的路径,默认SWF文件引用句路径是与.html页面放在一个目录下
var clip = new ZeroClipboard.Client(); // 新建一个对象
clip.setHandCursor(true); // 设置鼠标样式为手型
clip.setText("要复制的文本。。。"); // 设置要复制的文本。
clip.addEventListener("complete", function(client){alert("邀请链接地址复制成功!");});// 绑定事件:当复制完成后,提示复制成功
clip.glue("btnCopy"); // 当点击Id为btnCopy这个Dom元素时,会触发复制的方法。注:此方法的位置应放在最后一句。
// 避免在更改窗口大小时,出现Flash位置错位问题。所以在改变窗口大小时,最好再重新计算下Flash按钮位置
$(window).resize(function(){
clip.reposition();
});
}
页面加载时调用copyInit()方法。
使用中遇到的问题:
1、用FF在线预览官方网站的示例时,不能正常使用此插件。 经几番折腾,后发现是我电脑Flash Player版本过低的原因导致....
2、将示例源码从官方网下载到本地,并直接在本地预览页面时同样在FF中也没看到效果。 后发现需要用到http://这种路径访问页面。
3、放入工程后,再确认JS有正常引用到Flash文件的情况下,FF浏览器中仍是不能执行绑定的一些复制事件。后来想到是文件名称大小写的原因导致的。(公司项目是用MyEclipse软件开发的,对大小写比较敏感)