copy url to clipboard with a click 1

[namooth]

Hey all,

I'm trying to implant something in my blog and i hope you can help me.
I want my readers to have the option to click a button \ link like the trackback one and that the post link - URL will be automatically copied to their clipboard (like you see on imageshack, photobucket, TinyPic etc')
I've managed to find a code that does just that but its written in javascript. Due to today security in browsers you need to use a swf file in order for it to work.


Here's the code:

function copy(inElement) {
  if (inElement.createTextRange) {
    var range = inElement.createTextRange();
    if (range && BodyLoaded==1)
      range.execCommand('Copy');
  } else {
    var flashcopier = 'flashcopier';
    if(!document.getElementById(flashcopier)) {
      var divholder = document.createElement('div');
      divholder.id = flashcopier;
      document.body.appendChild(divholder);
    }
    document.getElementById(flashcopier).innerHTML = '';
    var divinfo = '<embed src="_clipboard.swf" FlashVars="clipboard='+encodeURIComponent(inElement.value)+'" width="0" height="0" type="application/x-shockwave-flash"></embed>';
    document.getElementById(flashcopier).innerHTML = divinfo;
  }
}

and the swf file:

http://www.jeffothy.com/weblog/uploads/clipboard.php

how can i use the script above to copy my current url?

Thanks

 

[namooth]

i'll make it easier to understand what im after.

i want to change this html that instead of the text element the script "copy" will copy to the clipboard the current URL. I've tried to call it with location.href but with no luck.

<form name="formtocopy" action="">
<textarea name="texttocopy">
A whole bunch of text here that will be copied.
</textarea>
<br>
<a href="javascript:copy(document.formtocopy.texttocopy);">copy</a>
</form>

 

[tsuji]

[1] You can do it like this. In this solution, you use the inElement as a holder of the string to put to clipboard. In the case where you want to put some alternative string than inElement.value, it introduces some flickering at the inElement which might be annoying. The point here is to stress continuity of the construction more than anything else as it simply extends the function's signature.
[tt]
function copy(inElement,stoput) {
var s;
if (stoput) {
s=inElement.value; //store existing
inElement.value=stoput;
}
if (inElement.createTextRange) {
var range = inElement.createTextRange();
if (range && BodyLoaded==1) range.execCommand('Copy');
} else {
var flashcopier = 'flashcopier';
if(!document.getElementById(flashcopier)) {
var divholder = document.createElement('div');
divholder.id = flashcopier;
document.body.appendChild(divholder);
}
document.getElementById(flashcopier).innerHTML = '';
var divinfo = '<embed src="_clipboard.swf" FlashVars="clipboard='+encodeURIComponent(inElement.value)+'" width="0" height="0" type="application/x-shockwave-flash"></embed>';
document.getElementById(flashcopier).innerHTML = divinfo;
}
if (stoput) {
inElement.value=s; //restore
}
}
[/tt]
[1.1] And then you call it like this, one need and the other need.
[tt]
<a href="javascript:copy(document.formtocopy.texttocopy);">copy</a><br />
<a href="javascript:copy(document.formtocopy.texttocopy,window.location);">copy location</a>
[/tt]
[2] In fact, you can make more fundamental change to the function to accommoodate varying needs. Like this.
[tt]
function copy(stoput) {
var inElement=document.createElement("input");
inElement.type="text";
inElement.style.display="none";
inElement.value=stoput;
document.body.appendChild(inElement);
if (inElement.createTextRange) {
var range = inElement.createTextRange();
if (range && BodyLoaded==1) range.execCommand('Copy');
} else {
var flashcopier = 'flashcopier';
if(!document.getElementById(flashcopier)) {
var divholder = document.createElement('div');
divholder.id = flashcopier;
document.body.appendChild(divholder);
}
document.getElementById(flashcopier).innerHTML = '';
var divinfo = '<embed src="_clipboard.swf" FlashVars="clipboard='+encodeURIComponent(inElement.value)+'" width="0" height="0" type="application/x-shockwave-flash"></embed>';
document.getElementById(flashcopier).innerHTML = divinfo;
}
inElement.parentNode.removeChild(inElement);
}
[/tt]
[2.1] Then you call it like this.
[tt]
<a href="javascript:copy(document.formtocopy.texttocopy.value);">copy</a><br />
<a href="javascript:copy(window.location);">copy location</a>
[/tt]

 

[namooth]

hey tsuji,
in firefox the second script worked great but in IE i get a security notification (something im trying to avoid) from what i've read, all the big sites (photobucket, imageshack, tinyurl) are using flash to copy stuff to the user clipboard and that's what im trying to imitate.. So i wonder how they make it work to both of those browsers.

thanks

 

[tsuji]

I think you can get rid of all together the execcommand("Copy") which I personally have nothing against as long as we know the boundary of applicability. Replace it by uniformly applying the swf application. To make ie/moz cross-browser, it is done using object-tag to wrap around embed-tag. The work has to be vested in porting the src (which is straightforward) and the flashvars clipboard to the object-tag's param child element. The general outline of the construction is something like this.
[tt]
<!-- this is just an outline, detail to verify, still to-do -->
<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="

http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"

width="0"
height="0"
id="somename_as_copyapp">
<param name="somename_as_source" VALUE="_clipboard.swf?clipboard=encoded_stoput" />

<embed src="_clipboard.swf"
FlashVars="clipboard=encoded_stoput"
name="somename_as_copyapp"
type="application/x-shockwave-flash">
</embed>
</object>
[/tt]
The above outline would make it work cross-browser. Detail needed to be checked upon in the porting. Just create it as a string to dynamically create your flashcopier element. Try complete it yourself or else I would find a slot of time to check it up.

 

[tsuji]

I make a quick serialization of the construction and it seems to work out as expected.
[tt]
function copy(stoput) {
var flashcopier = 'flashcopier';
if(!document.getElementById(flashcopier)) {
var divholder = document.createElement('div');
divholder.id = flashcopier;
document.body.appendChild(divholder);
}
document.getElementById(flashcopier).innerHTML = '';
var divinfo = '<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" ' +
'codebase="

http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"

' +
'width="0" height="0">' +
'<param name="src" value="_clipboard.swf?clipboard='+encodeURIComponent(stoput) + '" />' +
'<embed src="_clipboard.swf" FlashVars="clipboard='+encodeURIComponent(stoput)+'" width="0" height="0" type="application/x-shockwave-flash"></embed>' +
'</object>'
document.getElementById(flashcopier).innerHTML = divinfo;
}
[/tt]
You make the flashcopie permanent. I might prefer to withdraw it after it's done its job. But, it is not critical. After a while, the page will evaporate as it's come to its time and who care.

 

[namooth]

thanks for your help again.
i got a little confused.. can you post the all code together?
should i include it all in one html file or should i create a js file?

thanks

 

[tsuji]

There is no special design other than that. Whereever you originally have function copy(), replace it with the above and that's all - no further manipulation needed.

 

[sgmbest12321]

I have a similar problem.
I am useing frames and i would like to have the button be placed in the first frame but it would copy the url of the second frame.
how could i do this?
any help would be appreciated

 

[Sinclair72]

Hi all,

I have same problem here i want to have this code in my blog but i only get that i have copy to my clipboard with I.E. i don't see the flashfile that it is copied.

Can somebody help me with this maybe you can place the full code for me it should be easier

Greetings,
Sinclair

 

[Diancecht]

In IE7 there is a specific security setting that allows programatic access to the clipboard. From what I see, that affects javascript but not flash?



Cheers,
Dian

 

[Sinclair72]

So Nobody can help me with that ? i see the same with I.E. with photobucket ?

 

[tsuji]

Could you or those appending questions to the original post open separate threads and pose clearly the operating environment or utilities involved proper to your questions? (I personally feel tired to read that way of never ending thread and to solve a question posed in one sentence or two and have to form an idea myself what previously involved might or might not be meant to equally applicable to the appended questions.)