Copy URL from browser using clipboard.js

Question

I am using the Accusoft document viewer. I have a requirement for a button that when clicked will copy to the clipboard the current URL plus a page number querystring parameter. I am using clipboard.js. I know exactly how to get the current URL and how to add a page number parameter to the URL. What I don't know how to do is make clipboard.js copy a variable (such as the generated URL with page number parameter) to the clipboard. Any help on this?

Answer 1

By placing you variable's content into a div and then use it as a target for clipboard.js....
I have to admit I didn't tryed it, but it should should work.

Your button (the example of the clipboard.js site) :

<button class="btn" data-clipboard-target="#clipboardTarget">
    <img src="assets/clippy.svg" alt="Copy to clipboard">
</button>
<div id="clipboardTarget" style="display:none;"></div>

Place your variable's content into the target div:

var myData = "http://example.com?data=something";
$("#clipboardTarget").html(myData);

It is now ready to be copied.

-----
EDIT

Ok, after the discussion below, I really tried my solution by downloading Clipboard.js and tested it.
(Someday I will learn to test my solutions before posting!)

Turns out that it works on a div only if visible.
Sadly.

So my solution is wrong.
I leave it here anyway... As a "don't do it, it's a false-good idea".

Thanks to Michael Mahony for his feedback.
;)

Answer 2

Clipboard.js creator here ;)

You can use the imperative API to achieve that:

var url = document.location.href;

new Clipboard('.btn', {
  text: function() {
    return url;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script>


<button class="btn">Copy</button>