Cross-browser clipboard copy via JavaScript

Last modified by Mircea Staicu on 2012/11/15 15:42

cogA way of copying to the clipboard via JavaScript
Developed by

Mircea Staicu

0 Votes
LicenseGNU Lesser General Public License 2.1

This snippet was developed for a project on a 3.1 XE and tested on Windows on the following browsers: Firefox, Chrome, Internet Explorer 8. Due to a bug, the Linux environment won't be a reliable platform to test this snippet, at least on Firefox.


This snippet will show how you can copy to clipboard with JavaScript in a cross-browser manner.

We will use ZeroClipboard for this example. Make sure you get these files and attach them to a document which has 'view' rights for all the users, including guests. The files are ZeroClipboard.js and ZeroClipboard11.swf. In this example, we attach the two files to the Panels.SpreadTheWord document.

The use-case: we are going to copy to the clipboard an HTML element which will serve as a promotional material.

HTML structure:

##A 'way' of getting the external URL of an attachment
#set($logo = "${xwiki.getDocument('SomeSpace.SomePage').getExternalURL('download')}/a-logo.jpg")
#set($theSharedPanel = $xwiki.getDocument('Panels.SpreadTheWord'))
<script type='text/javascript' src="$theSharedPanel.getAttachmentURL('ZeroClipboard.js')"></script>
<div id='shareContents'>
  <img src="$logo" alt="Spread the love!">
 ##Notice the HTML structure that ZeroClipboard needs:
  <div id="share_container" style="position:relative">
    <div id="share_button" class="share_button">
      <a href='#' id='shareIt' class='shareIt'>$msg.get('')</a>
 ##This paragraph should be hidden, i.e. display:none; because we will retrieve its innerHTML and append it to the clipboard via js
  <p id='shareTheClipboard'>
    <a href="" title="Discover google"><img src="$logo" alt="Google" /></a>

And the inline javascript:

 var clip = null;

 var init = function(){
   //We need to set the path to the attached .swf file

    clip = new ZeroClipboard.Client();

   //Put an onMouseOver event listener, which will copy the innerHTML of the element with the ID 'shareTheClipboard' to the clipboard. Trimming is necessary since it will append empty new lines that we don't want
   clip.addEventListener('mouseOver', function(client){

   //Finally, we need to glue, first the container of the button, the <a href which serves as a button, and the parent container of the 'share_button' container.
   clip.glue('share_button', 'share_container');

 document.observe('xwiki:dom:loaded', function(){
     //Blessing IE with trim() function
     if (!String.prototype.trim) {
       String.prototype.trim = function() {
         return this.replace(/^\s+|\s+$/g,'');
     //This is strictly IE business, trimming and accessing the clipboard to append the content of the element that is passed to the setData method
     $('shareIt').observe('click', function(event) {
       window.clipboardData.setData("Text", $('shareTheClipboard').innerHTML.trim());
   //For all other browsers, we use the ZeroClipboard way

Prerequisites & Installation Instructions

Users must have Adobe Shockwave Player installed since this page will have content of MIME type "application/x-shockwave-flash".

Created by Mircea Staicu on 2012/11/15 15:13

Get Connected