如何使用jQuery和ZeroClipboard将Ajax响应加载到剪贴板中? [英] How to load an Ajax response into clipboard using jQuery and ZeroClipboard?

问题描述

我需要一种在Web浏览器中将加载的内容动态(Ajax)复制到剪贴板的方法.有很多库可以模仿使用Flash的复制到剪贴板"功能.但是，使用新的 Flash 10默认安全设置，进行复制-to-clipboard设置现在需要明确的用户确认. ZeroClipboard 是一种Javascript/Flash库，它克服了这种限制"(使用Flash电影点击-劫持).

I need a way to copy dynamically (Ajax) loaded content into the clipboard in a Web browser. There are many libraries out there that will mimic the copy-to-clipboard functionality using Flash. However, with the new Flash 10 default security settings, copy-to-clipboard setting now requires explicit user confirmation. ZeroClipboard is a Javascript/Flash library that gets around this "limitation" (using flash movie click-jacking).

这是我编写的一个简单的JQuery插件，用于将ZeroClipboard集成到我的应用程序中:

This is a simple JQuery plugin I wrote to integrate ZeroClipboard into my application:

// A jQuery plugin for copying Ajax content into clipboard
(function($) {
    $.fn.clickToClipboard = function() {
        $(this).each( function() {
            var link = $(this);
            if ( link.is('a') ) {
                var clip = new ZeroClipboard.Client();
                clip.glue(this);
                clip.addEventListener('onMouseDown', function(){
                    link.html('copying...');
                    clip.reposition();
                    $.ajax({ 
                        url: link.attr('href'),
                        success: function(content) { 
                            clip.setText(content);
                        },
                        async: false
                    });
                });

                clip.addEventListener('onComplete', function(){ 
                    link.html('copied!');
                    clip.reposition();
                });
            }            
        });
    }
})(jQuery);

每个锚点URL指向服务器上的一个文本文件.单击Flash电影(单击大写的链接)后，它将通过Ajax和ZeroClipboard将锚点的对应文本文件加载到剪贴板中.

Each anchor url points to a text file on the server. When the flash movie (click-jacked link) is clicked, it loads the anchor's corresponding text file into the clipboard through Ajax and ZeroClipboard.

此插件在Safari中效果很好(即使对于4000行以上的prototype.js文本文件也是如此).但是，即使在只有一行的简单文本文件"hello"上，它在FF3.0上也失败.我已将Ajax调用的内容记录到控制台中.成功回调似乎确实起作用.似乎第二次单击电影将完成复制(因为浏览器会从第一个Ajax调用中缓存文本文件).

This plugin works very well in Safari (even for a 4000+ line prototype.js text file). However, it's failing on FF3.0 even on a simple text file with one line: "hello". I've logged the content of my Ajax call into the console. The success callback does seem to work. It seems that clicking on the movie a second time will complete the copy (because browser caches the text file from the first Ajax call).

请注意，我在这里使用了同步Ajax调用，以等待文本完成加载.有人知道为什么我的代码无法按预期工作吗? (不确定是否相关，我的后端是在Rails中完成的.)

Note that I've used a synchronous Ajax call here in order to wait for the text to finish loading. Anyone knows why my code doesn't work as expected? (Not sure if it's relevant, my backend is done in Rails).

推荐答案

在我误解了您的问题后，删除了我的第一个答案.抱歉.

Removed my first answer after I realized that I missunderstood you question. Sorry.

我要尝试的是先获取ajax数据，而不是使用事件列表器设置文本.

What I would try is to fetch the ajax data first, than set the text with the event listner.

这篇关于如何使用jQuery和ZeroClipboard将Ajax响应加载到剪贴板中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！