Copying Image Data to Clipboard? - javascript

I am working on a site where the client has a coupon code image on a product page and when the user clicks on the image he wants that code copied to the clipboard... is this possible?

With JavaScript clipboard access is pretty much disabled in all browsers unless a user enables it in their settings. The work around is using a Flash Copy to clipboard script, but Flash is getting more security restrictions set on that. Check out zeroclipboard.

If you want the image to be copied, you can use "createControlRange()" like so:
var imageTag = document.getElementById("couponCode");
if (document.body.createControlRange) //to check if browser is IE
{
var couponRange;
document.getElementById("couponCode").contentEditable = true;
couponRange = document.body.createControlRange();
couponRange.addElement(imageTag);
couponRange.execCommand('Copy');
document.getElementById("couponCode").contentEditable = false;
alert("Image copied");
}
else //for other browsers
{
alert("Your browser does not allow access to clipboard.\nPlease press Ctrl+C to copy");
var couponRange = document.createRange();
couponRange.selectNode(imageTag);
window.getSelection().removeAllRanges();
window.getSelection().addRange(couponRange);
}
Browsers other than IE do not allow Javascript to access the clipboard for security reasons. But you can invoke the browser functionality by asking the user to press Ctrl+C after selecting the range of the coupon image.
Hope this solves your problem.

Related

Can i access all copied content via javascript from any tab? [duplicate]

I'm having a hard time finding any recent info on how to add a listener for "Ctrl+C", fetching clipboard data, and then writing back to clipboard all in a Chrome Extension. All of the old code that i found was for the older versions that are now deprecated.
Basically you can manipulate clipboard using document.execCommand('paste|copy|cut').
You'll need to specify "clipboardWrite" and/or "clipboardRead" permissions in manifest.
"clipboardRead" Required if the extension or app uses document.execCommand('paste').
"clipboardWrite" Indicates the extension or app uses document.execCommand('copy') or document.execCommand('cut'). This permission is required for hosted apps; it's recommended for extensions and packaged apps.
Create <input> element (or <textarea>)
Put focus to it
Call document.execCommand('paste')
Grab you string from <input> value attribute.
This worked for me to copy data to clipboard.
In order to read Clipboard text in a chrome extension, you have to:
request "clipboardRead" permission in your manifest
create a background script, since only the background script can access the clipboard
create an element in your background page to accept the clipboard paste action. If you make this a textarea, you will get plain-text, if you make it a div with contentEditable=true, you will get Formatted HTML
if you want to pass the clipboard data back to an in page script, you'll need to use the message-passing API
To see an example of this all working, see my BBCodePaste extension:
https://github.com/jeske/BBCodePaste
Here is one example of how to read the clipboard text in the background page:
bg = chrome.extension.getBackgroundPage(); // get the background page
bg.document.body.innerHTML= ""; // clear the background page
// add a DIV, contentEditable=true, to accept the paste action
var helperdiv = bg.document.createElement("div");
document.body.appendChild(helperdiv);
helperdiv.contentEditable = true;
// focus the helper div's content
var range = document.createRange();
range.selectNode(helperdiv);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
helperdiv.focus();
// trigger the paste action
bg.document.execCommand("Paste");
// read the clipboard contents from the helperdiv
var clipboardContents = helperdiv.innerHTML;
Here is a very simple solution. All it requires is for your permissions to include "clipboardRead" and "clipboardWrite". The copyTextToClipboard function is taken from here: https://stackoverflow.com/a/18455088/4204557
var t = document.createElement("input");
document.body.appendChild(t);
t.focus();
document.execCommand("paste");
var clipboardText = t.value; //this is your clipboard data
copyTextToClipboard("Hi" + clipboardText); //prepends "Hi" to the clipboard text
document.body.removeChild(t);
Note that document.execCommand("paste") is disabled in Chrome, and will only work in a Chrome extension, not in a web page.
Best workable examples I found are here
below example worked for me, sharing here so that someone can get help
function getClipboard() {
var result = null;
var textarea = document.getElementById('ta');
textarea.value = '';
textarea.select();
if (document.execCommand('paste')) {
result = textarea.value;
} else {
console.log('failed to get clipboard content');
}
textarea.value = '';
return result;
}

Trying to programmically paste

I am having trouble with execCommand('paste');
My code:
var copy = document.createElement("BUTTON");
copy.innerText = "Copy";
Sections.contextmenu.appendChild(copy);
copy.addEventListener("click", function(e) {
document.execCommand("copy");
});
var paste = document.createElement("BUTTON");
Sections.contextmenu.appendChild(paste);
paste.innerText = "Paste";
paste.addEventListener("click", function(e) {
console.log("Paste");
if (document.execCommand("paste")) {
console.log("pasted");
}
});
Copy worked right out of the box. I cannot get paste to work. I see "Paste" in the console, but nothing is pasted. I've read some things that say that this functionality needs to be explicitly turned on in Firefox. Is there no way (other than using flash... This is talked about in the research I've done) to execute "paste" in a content-editable element programmatically?
The paste command is disabled in web content (it’s only available in a browser extension). It’s disabled presumably because it would allow any website to steal the clipboard’s content. From the MDN documentation on execCommand:
paste
Pastes the clipboard contents at the insertion point (replaces current selection). Disabled for web content.
try the following code
console.log(document.exeCommand('paste')
If false maybe you need a permission to use it or your navigator can't support it
You can also use the Clipboard API, which would obliterate the exeCommand

How to get Clipboard data in Chrome Extension?

I'm having a hard time finding any recent info on how to add a listener for "Ctrl+C", fetching clipboard data, and then writing back to clipboard all in a Chrome Extension. All of the old code that i found was for the older versions that are now deprecated.
Basically you can manipulate clipboard using document.execCommand('paste|copy|cut').
You'll need to specify "clipboardWrite" and/or "clipboardRead" permissions in manifest.
"clipboardRead" Required if the extension or app uses document.execCommand('paste').
"clipboardWrite" Indicates the extension or app uses document.execCommand('copy') or document.execCommand('cut'). This permission is required for hosted apps; it's recommended for extensions and packaged apps.
Create <input> element (or <textarea>)
Put focus to it
Call document.execCommand('paste')
Grab you string from <input> value attribute.
This worked for me to copy data to clipboard.
In order to read Clipboard text in a chrome extension, you have to:
request "clipboardRead" permission in your manifest
create a background script, since only the background script can access the clipboard
create an element in your background page to accept the clipboard paste action. If you make this a textarea, you will get plain-text, if you make it a div with contentEditable=true, you will get Formatted HTML
if you want to pass the clipboard data back to an in page script, you'll need to use the message-passing API
To see an example of this all working, see my BBCodePaste extension:
https://github.com/jeske/BBCodePaste
Here is one example of how to read the clipboard text in the background page:
bg = chrome.extension.getBackgroundPage(); // get the background page
bg.document.body.innerHTML= ""; // clear the background page
// add a DIV, contentEditable=true, to accept the paste action
var helperdiv = bg.document.createElement("div");
document.body.appendChild(helperdiv);
helperdiv.contentEditable = true;
// focus the helper div's content
var range = document.createRange();
range.selectNode(helperdiv);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
helperdiv.focus();
// trigger the paste action
bg.document.execCommand("Paste");
// read the clipboard contents from the helperdiv
var clipboardContents = helperdiv.innerHTML;
Here is a very simple solution. All it requires is for your permissions to include "clipboardRead" and "clipboardWrite". The copyTextToClipboard function is taken from here: https://stackoverflow.com/a/18455088/4204557
var t = document.createElement("input");
document.body.appendChild(t);
t.focus();
document.execCommand("paste");
var clipboardText = t.value; //this is your clipboard data
copyTextToClipboard("Hi" + clipboardText); //prepends "Hi" to the clipboard text
document.body.removeChild(t);
Note that document.execCommand("paste") is disabled in Chrome, and will only work in a Chrome extension, not in a web page.
Best workable examples I found are here
below example worked for me, sharing here so that someone can get help
function getClipboard() {
var result = null;
var textarea = document.getElementById('ta');
textarea.value = '';
textarea.select();
if (document.execCommand('paste')) {
result = textarea.value;
} else {
console.log('failed to get clipboard content');
}
textarea.value = '';
return result;
}

window.clipboardData.getData("Text") returns 0 in IE8

I'm trying to implement maxlength on a textarea. In IE7, window.clipboardData.getData("Text") returns the correct number of characters copied. in IE8, the same call returns 0. What's wrong?
here is the js
var someRule= {
"textarea" : function(element) {
element.onpaste = function() {
var copied = window.clipboardData.getData("Text");
alert('copied length = '+copied.length);
}
}
};
Behaviour.register(someRule);
There is a security setting in IE8:
To prevent a web site from reading your clipboard, take the following steps:
Go to Tools->Internet Options.
Click on the Security Tab.
Click on "Custom Level."
Scroll down to the Scripting section under Settings.
Set "Allow paste operations via script" to Disable or Prompt.
Press the OK buttons to close the dialog boxes.
In your case, this setting is probably disabled.

Cookie Security of Pops Up Window

I have been to some css/html/js discussing board which provide a text box to enter the html and a "Run it!" button to run the html in new pops up window.
I want to make one also, which is easy in jQuery:
function try_show_result() {
var code = $("#try-input").val();
if (code !== "") {
var newwin = window.open('','','');
newwin.opener = null; // 防止代ç 修改主页
newwin.document.write(code);
newwin.document.close();
}
}
But then I found a security problem: the pops up window has all the abilities of running an arbitrary javascript. So that when another authenticated user runs a given piece of code on the page, then it could stealing cookies or access some url that is only for the specified user only through ajax posts.
Is there an easy way to avoid this?
Update: I added newwin.document.cookie="" before open the window, not sure if this is better.
Is there an easy way to avoid this?
No
That is why Facebook went out and wrote their own version of JavaScript [FBJS].

Categories