ZeroClipboard SWF does not load

Question

ZeroClipboard.setMoviePath( "/zeroclipboard/ZeroClipboard.swf" );
var clip = new ZeroClipboard.Client();
clip.setText( $('textarea#download_me').text() );
clip.glue( 'clip' );

I'm using the popular ZeroClipboard plugin to copy content to user's clipboard. It works perfectly in the dev enviornment as well as on domain1.com but not on domain2.com with EXACTLY the same files and settings!

/zeroclipboard/ZeroClipboard.js loads.

/zeroclipboard/ZeroClipboard.swf does NOT load!

I tried everything but can't get it to work. I'm really confused why it work on domain1 but not on domain2??

How do I resolve this?

Many thanks for your help!

Answer 1

There are options for cross domain assets:

// SWF inbound scripting policy: page domains that the SWF should trust. (single string or array of strings)
  trustedDomains: [window.location.host],

See: https://github.com/zeroclipboard/zeroclipboard/blob/master/docs/instructions.md

Also: The current master branch (2.x) logs the cross domains to console if you set debug to true in config.

I had some success using a cdn hosted version of the swf file. But after making some edits this mysteriously stopped working locally but did work on my staging server.

This is my config:

  ZeroClipboard.config({
    moviePath: '//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/1.3.2/ZeroClipboard.swf',
    forceHandCursor: true,
    debug: true
  });

Also see this jsfiddle:
http://jsfiddle.net/rimian/45Nnv/

If you're still having trouble, you can log from the swf to console. For this, you need to be able to compile the flash, from zeroclipboard source into a swf using grunt mxmlc. Simply dispatch a log event in the action script (compile and copy it into your project) and respond to it in your js:

For example, in ZeroClipboard.as:

// constructor, setup event listeners and external interfaces
public function ZeroClipboard() {

  ...

  // Get the flashvars
  var flashvars:Object = LoaderInfo( this.root.loaderInfo ).parameters;

  dispatch("log", flashvars);

  ...

  }

Then in your js:

zeroclipboard = new ZeroClipboard($('.mybuttons'))
zeroclipboard.on('log', function(client, args) { console.log('log:', args)});

Answer 2

If this file is located in the same directory as your web page, then it will work out of the box. However, if the SWF file is hosted elsewhere, you need to set the URL like this (place this code after the script tag):

    ZeroClipboard.setMoviePath( 'http://YOURSERVER/path/ZeroClipboard.swf' );

To use the new Rich HTML feature available in Zero Clipboard 1.0.7, you must set the movie path to the new "ZeroClipboard10.swf" file, which is included in the 1.0.7 archive. Example:

    ZeroClipboard.setMoviePath( 'ZeroClipboard10.swf' );

Or, in a custom location other than the current directory:

    ZeroClipboard.setMoviePath( 'http://YOURSERVER/path/ZeroClipboard10.swf' );

Answer 3

http://kenneth.kufluk.com/blog/2008/08/cross-domain-javascript-to-flash/ may help. Also beware of subdomains, Flash can get confused. Also use Flash debug player and Fiddler (or similar) to see what is going on.

Answer 4

I solved editing this line on ZeroClipboard.min.js

return a+"ZeroClipboard.swf"

to:

return "//YOUR/PATH/TO/ZeroClipboard.swf"

Answer 5

Might want to try Fiddler to see exactly what the request/response looks like for the file.

Answer 6

Setting both moviePath and swfPath worked for me.

ZeroClipboard.config({ moviePath: '/assets/ZeroClipboard.swf', swfPath: '/assets/ZeroClipboard.swf', debug: true });