兼容Firefox 3.5+的跨浏览器Input内容复制方案

跨浏览器复制问题的背景与挑战

在IE6中，仅需两行JS代码即可实现复制功能；IE7及以上版本虽然也能实现，但会弹出一个安全提示，容易引发用户疑虑。

而在Firefox、Chrome等浏览器中，出于安全策略考虑，直接禁止了复制操作。

此前网上流传的相关代码大多无法在Firefox 3.5及以上版本中运行。经过查找，发现现有方案代码过于复杂，难以直接应用。

最终，通过查阅资料自行编写了一套解决方案。

核心实现原理与浏览器差异分析

该方案主要基于以下几个核心理解：

首先，Firefox等浏览器出于安全考虑，默认禁止直接复制。

其次，在Flash环境中，可以使用System.setClipboard()方法将内容写入剪贴板，随后让Flash在Firefox中运行。

此外，Flash播放器10.0版本之后，出于安全限制，System.setClipboard的内容必须源自Flash内部。

第三，可以通过ExternalInterface实现Flash与JavaScript之间的通信。

需要注意的是，在Flash 8中必须显式引用ExternalInterface才能使用。

HTML结构与JavaScript实现细节

默认的HTML结构如下：

 
<input type="text" id="testInput" name="testInput" value="4234324234" />
<div id="buttonBox">
<button onclick="copy('testInput')">copy</button>
</div>

因此，设计思路为：首先判断是否为IE浏览器，如果是，则保留默认代码以确保兼容性；如果不是IE，则使用一个Flash对象覆盖原有的按钮。

 
if (window.XMLHttpRequest){//如果不是IE时，就用FLASH的方式复制
$('buttonBox').innerHTML = '<embed src="flashCopy.swf" width="48"
height="23" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash"></embed>';
} 

以下是完整的JavaScript文件代码：

 
<script>
function $(id){
return document.getElementById(id);
} 
function copy(){//ie6
var value = $('testInput').value;
window.clipboardData.clearData();
window.clipboardData.setData("Text", value);
alert('复制成功！');
} 
function flashCopy(){//firefox .......
return $('testInput').value;
} 
function flashCopyBack(){
alert('复制成功！');
} 
if("v" != "v"){//如果不是IE时，就用FLASH的方式复制
$('buttonBox').innerHTML = '<embed src="111.swf" width="48" height="23" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>';
} 
</script>

Flash端代码与通信机制

Flash按钮的代码如下：

 
on (release) {
import flash.external.ExternalInterface;
var inputText = ExternalInterface.call('flashCopy');
System.setClipboard(inputText);
ExternalInterface.call('flashCopyBack');
//_root.boboText.text = inputText;
} 

其原理在于规避安全限制：点击Flash按钮时，通过Flash代码调用页面中的JS函数，JS函数获取Input的值并传回给Flash。此时Flash内部持有该值，再通过System.setClipboard将其存入剪贴板。最后，Flash调用页面中的flashCopyBack函数，仅用于提示用户复制成功。

该方案已在Firefox、Chrome及IE中测试通过，目前已在实际项目中应用。如发现任何问题，欢迎反馈，谢谢。

转载请注明出处：子鼠