Browser copy (solve the problem that the floating layer cannot be copied)

Read the text
Browser copying is actually a very troublesome problem, because it involves browser security, so the browser itself does not provide the corresponding interface, and we have no way to implement this function through pure js, but you will see a lot of Websites such as Baidu Cloud Disk have achieved this function, so how do they achieve it? Let me take you to see their secrets today.

First of all, this function is very important to me, because private sharing on Zhuanpan.com must have this function. The screenshot is as follows:


As long as you click the Copy button, the password for private sharing on the network disk will be automatically copied to your browser. In fact, I still spent a lot of time on this function when I first started doing it, because it involves copying the suspended layer, and the difficulty of the problem suddenly increased a lot, but now I am still willing to make the code public, and I hope everyone likes it. By the way, I point out a few other blog codes I wrote, I hope you like them:
Baidu network disk crawler
Baidu image crawler
ok Soso crawler source code
java word segmentation algorithm
Invite friends to register
Automatic database backup
Okay, now let’s get down to business. Browser copy requires two plug-ins. Please download them first: Download address 1 Download address 2
The code is as follows: var clip=null;<br> clip = new ZeroClipboard.Client();//new an object<br> clip.setText(null);<br> ZeroClipboard.setMoviePath( '${pageContext.request.contextPath}/media/js/ZeroClipboard.swf'); //If it is not in the same directory as html, you need to set setmoviepath<br> //ZeroClipboard.setMoviePath( '../media/js/zeroclipboard10.swf');<br> clip.setHandCursor(true);<br> clip.addEventListener('mousedown', function(client) {<br> ​​​​<br> ​​ ​window.passwd = ​document.getElementById("file-password").value;<br> ​​​clip.setText(window.passwd);<br> });<br> ​ <br> clip.addEventListener('complete', function (client, text) {<br> ​ <br>           window.url = document.getElementById("file-url").value;<br>       var id=get_param("id");<br>       var type=get_param("type");<br>           window.open(window.url,'_self');<br>          $('.theme-popover').hide();<br> ​​​​$('.theme-popover-mask').hide();//Dismiss the copy box<br>          document.getElementById("theme-popover").style.visibility="hidden";//Shadow Hidden<br> ​​​​//Record download information<br>           $.ajax({<br>                 type: "post",<br> URL: "${pageContext.request.contextPath}/download/statistic.action",<br> DataType: "json",<br>                       data:{<br>                                                                                                                                                                                 type:type<br>                     },<br> Success: Function (data) {;} <br>           });<br> });<br>clip.glue('copy-password','copy-dialog');The recorded download information in the code is related to Zhuanpan.com, you don't have to worry about it, the following sentence: document.getElementById("theme-popover ").style.visibility="hidden";//Shadow hiding is very important, because you need to copy the floating layer. If it is a relative layout flash, the overlay button cannot be found, so at the beginning

document.getElementById("theme-popover").style.visibility="visible";//Displayed when sharing privately

Finally, shadow hiding. I have created a QQ group and everyone is welcome to exchange technology together. Group number: 512245829. Friends who like Weibo can follow: Turntable Entertainment