📜 ⬆️ ⬇️

Translation Paste-text copying to clipboard on JavaScript - two ways with Flash 10

In Flash 10, as it turned out, you cannot programmatically copy the text to the clipboard yourself. Before its release, there was a very convenient and elegant way, for example, “Copy the code to insert an image into the blog” / “Copy embed code” immediately into the user's buffer. I'm not talking about IE, in which it has always been realizable before (I don’t know how in IE8) using the javascript call window.clipboardData.setData ('text', text);
It's about how to do this for users of alternative browsers.

So, with the release of Flash 10, for security reasons, the ability to programmatically replace the contents of the clipboard without user intervention was closed. Such an attack could, for example, continuously place on the clipboard a link to the attacker's website, from the calculation that many paste the contents of the clipboard into the address bar of the browser and press Enter, regardless of what was inserted.
The Adobe Developer Center article states that the “old” System.setClipboard () function and the new Clipboard.generalClipboard object can work with the clipboard only if they were initiated by user actions, for example, after pressing a button ( to happen as a result of a user-initiated action ). Many more other security rules have been changed with the release of 10 flash player, but what we are interested in is that now the good old Clipboard Copy from Jeffothy Keyings does not work .

At the moment I found two choices.

One way is to create a flash movie with a single “Copy” button, and transfer text to FlashVars, which needs to be placed in the clipboard.
')
Actionscript 2.0
on (release) {
System.setClipboard(_level0.txtToCopy);
getURL('javascript:'+_level0.js+';');
}


HTML / JS
<script type="text/javascript">
function alertUser(){
alert(' ');
}
</script>
<div style="border:solid 1px black; width:60px; height:20px;">
<object width="60" height="20">
<PARAM NAME=FlashVars VALUE="txtToCopy=habrahabr&js=alertUser()">
<param name="movie" value="copyButton.swf">
<embed src="copyButton.swf" flashvars="txtToCopy=habrahabr&js=alertUser()" width="60" height="20">
</embed>
</object>
</div>


Download ready flash file here: copyButton.swf

FlashVars:
txtToCopy - the string to be copied to the buffer
js - JS function called after successful copying

(c) source

For the same link mentioned the second method - ZeroClipboard , which may seem to many more simple.

According to the developer, you need to “stick” a flash movie to any specific element on the page, after which the user can click on this element to be intercepted by the invisible flash movie located above the element. In this and only this case, Adobe Flash will allow you to work with the clipboard.

Test1 , Test2 , Test3

To get started, connect the scripts
<script type="text/javascript" src="ZeroClipboard.js"></script>

Next, you need to specify where ZeroClipboard.swf is located (absolute or relative link is needed)
ZeroClipboard.setMoviePath( 'http://YOURSERVER/path/ZeroClipboard.swf' );

Now you can create customers .
The client in this case is a ZeroClipboard object bound to a specific button or some other DOM element. Most likely, you will need only one client, but if you have several buttons on the page to copy to the clipboard, create a client for each of them.
var clip = new ZeroClipboard.Client();

You can at any time specify the text to be copied to the buffer - after the page is loaded (onload), by clicking, with onMouseOver or onMouseDown:
clip.setText( "Copy me!" );

You can set which mouse cursor will be when you hover over an object - a hand (true, by default) or a regular arrow (false)
clip.setHandCursor( true );

The most interesting. Attaching to the DOM element.
clip.glue( 'd_clip_button' );

Yes :) that's all. You can pass to this function either the HTML ID of the element or the object itself (obtained for example from document.getElementById ()). Then everything happens automatically - a flash movie is created, with all the settings you set, it is placed above the specified DOM element and waits for a click from the user.

If your DOM element moves (for example, due to the window being clip.reposition() ), use the clip.reposition() function, usually it is hung on the window.onresize event

Learn more about the settings and a bunch of examples from the author - code.google.com/p/zeroclipboard
It also describes how to make the flash movie respond not to a click, but to a mouse over.

Zero Clipboard Library has been tested on the following platforms / browsers:
Browser
Windows XP SP3
Windows vista
Mac OS X Leopard
Internet exploder7.07.0-
Firefox3.03.03.0
Safari--3.0
Google chrome1.01.0-

Adobe Flash Flash Player versions 9 and 10 are supported.

PS In fact, I ran into this problem, I found a solution, and I could not share it, I decided on my first post on Habré.

Source: https://habr.com/ru/post/55646/


All Articles