ZeroClipboard用户脚本添加到了鼠标上方，可以在Firefox中使用，但不适用于Chrome

Question

我正在使用zeroclipboard在用户脚本内向相当大的列表中的每一行添加“复制”链接。 为此，我使用一种类似于此页面上列出的方法的方法，其中，当用户将鼠标悬停在该行上时，将为每行创建ZeroClipboard.Client（）元素。 这在FireFox中效果很好，但在Chrome中效果不佳。

另请注意：我将ZeroClipboard.js文件的内容复制到了用户脚本本身，而不是将其包含在外部文件中。

这是为每个元素创建复制按钮的标记
<span style="color:blue; text-decoration:underline; cursor:pointer" id="copy_'+id+'" class="CopyLink" link="'+url+'" onmouseover="clipboard.add(this)">Copy</span>

这是添加剪贴板的客户端对象的代码段：

function main(){
    window.clipboard = {
        load: function (){
            if(!clipboard.initialized){
                ZeroClipboard.setMoviePath("http://www.swfcabin.com/swf-files/1343927328.swf");
                clipboard.initialized=true;
                console.log("Clipboard intialized");
            }
        },
        add: function(element){
            clipboard.load();
            var clip = new ZeroClipboard.Client();
            console.log('Clipboard client loaded: ' + element.id);

            clip.glue(element, element.parentNode);
            console.log('Clipboard glued: ' + element.id);

            clip.setText(element.getAttribute('link'));
            console.log('Clipboard text set: ' + element.getAttribute('link'));

            clip.addEventListener('complete',function(client,text) {
                console.log('Clipboard copied: ' + text);//doesn't fire in chrome
            });

            clip.addEventListener('load',function(client) {
                console.log('Clipboard loaded: ' + element.getAttribute('link'));
            });
        }        
    }
    //other code in user script including injecting above markup
    //as well as contents of ZeroClipboard.js
    window.ZeroClipboard = { ... }
}

var script = document.createElement("script");
script.appendChild(document.createTextNode('('+main+')()'));
(document.head || document.body || document.documentElement).appendChild(script);

在此块中，当我将鼠标悬停并单击复制范围时，将在FireFox中触发每个console.log，但在chrome中，除了“完整”侦听器触发之外，所有其他都将触发。 通过使用此页面上的示例，我能够验证ZeroClipboard在我的Chrome中是否正常工作。 我还可以验证Flash对象是否已添加到页面中的正确位置，但它只是不响应单击。

由于根据站点不再维护zeroclipboard代码，所以我希望那里的人可以帮助我。 我认为在鼠标悬停时动态添加chrome中的嵌入式Flash对象可能存在一些问题，或者chrome中的用户脚本与使用oilsmonkey的Firefox之间的某些区别？ 任何帮助将不胜感激，谢谢

Answer 1

我不确定其背后的原因，但我也在Chrome浏览器上也遇到过这种情况。 我有两个ZeroClipboard实现，一个在页面加载时可见，一个仅在用户打开对话框时可见。 在页面加载时可见的一个按预期工作，但另一个没有。 为了“解决”问题，我必须渲染zeroclipboard链接，将其绝对位置设置为不在屏幕上（-500 px），然后添加一些JavaScript以在对话框打开时将链接移到适当位置。 这是一个丑陋的解决方案，但我认为这是使其在Chrome中运行的唯一方法。 您的情况特别麻烦，因为您的页面上有很多动态零剪贴板，而我只有一个，但是在我看来，这没有理由对您不起作用。

Answer 2

<!-- <script type="text/javascript" src="http://davidwalsh.name/demo/ZeroClipboard.js"></script> -->
    function copyText(fieldName,buttonName){
        var fieldNameTemp =fieldName;
        var buttonNameTemp =buttonName;
        var val = "";
        try{
            val = navigator.userAgent.toLowerCase();
        }catch(e){}
        var swfurl = "js/ZeroClipboard.swf";
        setTimeout(function () {
            ZeroClipboard.setMoviePath(swfurl);
            var clip = new ZeroClipboard.Client();
            clip.addEventListener('mousedown', function () {
                clip.setText(document.getElementById(fieldNameTemp).value);
            });
            clip.addEventListener('complete', function (client, text) {
                try{
                    if(val.indexOf("opera") > -1 || val.indexOf("msie") > -1 || val.indexOf("safari") > -1 || val.indexOf("chrome") > -1){
                        alert('Your text has been copied');
                    }
                }catch(e){
                    alert('Please alert not use on fireFox');
                }
            });
            clip.glue(buttonNameTemp);
        }, 2000);
    }