javascript - 动态加载 ZeroClipboard

Question

使用 ZeroClipboard - 成功调用 'load' 回调，但单击 'copy-button' 元素不会导致 'complete' 触发回调。

JS:

var script = document.createElement('script'), loaded;
script.setAttribute('src', "/static/ZeroClipboard.js");
script.onreadystatechange = script.onload = function() {
    if (!loaded) {
        console.log("Executing ZeroClipboard load callback");

        var clip = new ZeroClipboard(
            document.getElementById('copy-button'),
            {moviePath: '/static/ZeroClipboard.swf',
             allowScriptAccess: "always"}  // allow cross-domain swf load
            );

        clip.on('complete', function(client, args) {
            console.log('ZeroClipboard: copied text to clipboard: ' + args.text );
        });
        clip.on('load', function(client) {
            console.log('ZeroClipboard: clip loaded');
        });
    }
    loaded = true;
};
document.getElementsByTagName('head')[0].appendChild(script);

HTML:

<button class="embed-copy" id="copy-button" data-clipboard-text="some old copied text">Copy</button>

如何动态加载 ZeroClipboard 并成功触发 'complete' 事件(将文本复制到剪贴板)？

Answer 1

上面的代码没有任何错误。事实证明，ZeroClipboard 创建的用于捕获点击的不可见 swf 已成功创建，但位置错误。这是由于按钮通过 css 变换定位，并且是 bug in ZeroClipboard itself 。希望这个拉取请求很快就会被合并。

目前，我只是手动申请 the patch (大约 8 行)到我正在使用的 ZeroClipboard 版本。

仅供引用，这会影响 ZeroClipboard v1.2.0-beta.1