Loading...

如何解决js在FireFox下不能复制文字到剪贴板的问题

昨天注册了Bloggerwave,在后台操作的时候,发现他的js脚本复制到剪贴板居然在FireFox下有效,这可是我第一次发现复制到剪贴板这样的代码在FF下有效,当然IE就不用说了,js在IE下操作剪贴板还是很容易的。后来我就查看了他的源代码,发现人家采用了一个巧妙的方法,那就是利用flash作为跳板来完成此功能,具体代码如下:

<code lang=”js”>
<script type=”text/javascript”>// <![CDATA[
function CopyText(id)
{
//copyToClipboard(document.getElementById(id).value);
copy(document.getElementById(id).value);
}
function copy(text2copy) {
if (window.clipboardData) {
window.clipboardData.setData("Text",text2copy);
} else {
var flashcopier = 'flashcopier';
if(!document.getElementById(flashcopier)) {
var divholder = document.createElement('div');
divholder.id = flashcopier;
document.body.appendChild(divholder);
}
document.getElementById(flashcopier).innerHTML = '';
var divinfo = '<span  src="_clipboard.swf" mce_src="_clipboard.swf" FlashVars="clipboard='+escape(text2copy)+'" width="0" height="0" type="application/x-shockwave-flash"></span>';//这里是关键
document.getElementById(flashcopier).innerHTML = divinfo;
alert('Text copied');
}
}
function copyToClipboard(meintext)
{
if (window.clipboardData)
{
alert("ie");
// the IE-manier
window.clipboardData.setData("Text", meintext);
// waarschijnlijk niet de beste manier om Moz/NS te detecteren;
// het is mij echter onbekend vanaf welke versie dit precies werkt:
}
else if (window.netscape)
{
// dit is belangrijk maar staat nergens duidelijk vermeld:
// you have to sign the code to enable this, or see notes below
netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');
// maak een interface naar het clipboard
var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
if (!clip) return;
alert(”mozilla”);
// maak een transferable
var trans = Components.classes['@mozilla.org/widget/transferable;1']
.createInstance(Components.interfaces.nsITransferable);
if (!trans) return;
// specificeer wat voor soort data we op willen halen; text in dit geval
trans.addDataFlavor(’text/unicode’);
// om de data uit de transferable te halen hebben we 2 nieuwe objecten
// nodig om het in op te slaan
var str = new Object();
var len = new Object();
var str = Components.classes["@mozilla.org/supports-string;1"]
.createInstance(Components.interfaces.nsISupportsString);
var copytext=meintext;
str.data=copytext;
trans.setTransferData(”text/unicode”,str,copytext.length*2);
var clipid=Components.interfaces.nsIClipboard;
if (!clip) return false;
clip.setData(trans,null,clipid.kGlobalClipboard);
}
alert(”Following info was copied to your clipboard:\n\n” + meintext);
return false;
}
// ]]></script>
</code>
下面是测试代码:
<code lang=”html”> <input id=”mm” name=”mm” type=”text” value=”test” /> <input onclick=”CopyText(&quot;mm&quot;)” type=”button” value=”copy” /> </code>
请保证该swf文件:<a title=”_clipboard.swf” href=”http://www.storyday.com/wp-content/uploads/2007/05/_clipboard.swf”>_clipboard.swf</a> 和你测试页面在同一个目录下!
下面是bloggerwave的付费评论的内容,看能否再此页面通过
<a onclick=”submitIframeBlogId1190OppId5(’1′)” href=”http://www.masterseek.com” target=”_blank”>masterseek</a>
<script type=”text/javascript”>// <![CDATA[
function submitIframeBlogId1190OppId5(linkId){document.getElementById("iframeBloggerwaveBlogId1190OppId5").src="http://www.bloggerwave.com/ClickTrack.aspx?OpportunityId=5&#038;BlogId=1190&#038;LinkId=" + linkId;}
// ]]></script>

<script type="text/javascript">// <![CDATA[
function CopyText(id) {
//copyToClipboard(document.getElementById(id).value);
copy(document.getElementById(id).value);
}
function copy(text2copy) {
if (window.clipboardData) {
window.clipboardData.setData("Text",text2copy);
} else {
var flashcopier = 'flashcopier';
if(!document.getElementById(flashcopier)) {
var divholder = document.createElement('div');
divholder.id = flashcopier;
document.body.appendChild(divholder);
}
document.getElementById(flashcopier).innerHTML = '';
var divinfo = '<span class="mceItemEmbed"  src="_clipboard.swf" mce_src="_clipboard.swf" FlashVars="clipboard='+escape(text2copy)+'" width="0" height="0" type="application/x-shockwave-flash"></span>';//这里是关键
document.getElementById(flashcopier).innerHTML = divinfo;
alert('Text copied');
}
}
function copyToClipboard(meintext)
{
if (window.clipboardData)
{
alert("ie");
// the IE-manier
window.clipboardData.setData("Text", meintext);
// waarschijnlijk niet de beste manier om Moz/NS te detecteren;
// het is mij echter onbekend vanaf welke versie dit precies werkt:
}
else if (window.netscape)
{
// dit is belangrijk maar staat nergens duidelijk vermeld:
// you have to sign the code to enable this, or see notes below
netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');
// maak een interface naar het clipboard
var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
if (!clip) return;
alert("mozilla");
// maak een transferable
var trans = Components.classes['@mozilla.org/widget/transferable;1']
.createInstance(Components.interfaces.nsITransferable);
if (!trans) return;
// specificeer wat voor soort data we op willen halen; text in dit geval
trans.addDataFlavor('text/unicode');
// om de data uit de transferable te halen hebben we 2 nieuwe objecten
// nodig om het in op te slaan
var str = new Object();
var len = new Object();
var str = Components.classes["@mozilla.org/supports-string;1"]
.createInstance(Components.interfaces.nsISupportsString);
var copytext=meintext;
str.data=copytext;
trans.setTransferData("text/unicode",str,copytext.length*2);
var clipid=Components.interfaces.nsIClipboard;
if (!clip) return false;
clip.setData(trans,null,clipid.kGlobalClipboard);
}
alert("Following info was copied to your clipboard:\n\n" + meintext);
return false;
}
// ]]></script>

下面是测试代码:

请保证该swf文件:_clipboard.swf 和你测试页面在同一个目录下!
下面是bloggerwave的付费评论的内容,看能否再此页面通过
masterseek

该日志未加标签
发表于 2007-05-21 15:03:50 目录:HTML客户端, 网站技术 [RSS 2.0] 你可以发表评论, 或者从您的网站 trackback
  • 相关阅读
  • 已经有6位大师动手指导 拒绝低俗
    • 1楼 Fird 在2007.09.08 21:09发表评论如下: 回复

      这个我试过了,复制英文时没有问题,但在我这里复制中文会变为十六进制代码:(

      • 2楼 cosβ 在2007.09.08 21:26发表评论如下: 回复

        [quote]这个我试过了,复制英文时没有问题,但在我…[/quote]确实存在这个问题,应该是flash里面处理的问题,修改js似乎没有用

        • 3楼 海妖的夜 在2007.10.11 13:17发表评论如下: 回复

          不要写escape函数就行了,这样中文就没问题了.

          • 4楼 Ann 在2008.03.31 16:41发表评论如下: 回复

            太好了,it’s nice of you !thank you !

            • 5楼 花荣 在2010.04.19 10:55发表评论如下: 回复

              不能用了。。。sigh

              • 6楼 s 在2010.05.27 17:21发表评论如下: 回复

                太谢谢你了,兄弟!!

                评论分页: 1
                (Required)
                (Required, not published)
                如果留言未显示无需重复留言,我将为你恢复!