js+插件实现代码复制及动态生成二维码扫描、分享到朋友圈QQ空间功能

时间  2021-01-20 标签 插件 qrcode 二维码 js

1.代码复制功能需要插件支持ZeroClipbroad，引入js:jQuery.zclip.min.js;ZeroClipboard.js;ZeroClipboard.swf


2.jsp功能代码：

[java]  view plain  copy
 print ?
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  2. <%@ include file="/WEB-INF/jsp/common/meta.jsp"%>  
  3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  4. <html>  
  5. <head>  
  6. <title>转发页面</title>  
  7. </head>  
  8. <body>  
  9.         <div>  
  10.             <table style="width: 100%;border-collapse:separate; border-spacing:10px;">  
  11.                      <tr>  
  12.                          <td align="right"><span class="txt-ipt" style="float: none;font-size:18px;margin-right:40px;">复制链接地址</span></td>  
  13.                          <td align="left" width="300px" id="relayCopyContainer">  
  14.                              <input type="text" id="relayUrl" value="http://192.168.3.72:8080/WCMP2/static/front/renwuxq.html?taskId=43" style="display:none;" />  
  15.                              <span style="float:right;color:red;font-size:18px;margin-right:50px;" id="relayCopy">点击复制代码</span>  
  16.                          </td>  
  17.                      </tr>  
  18.                  </table>  
  19.                    
  20.                  <table style="width: 100%;border-collapse:separate; border-spacing:10px;">  
  21.                      <tr>  
  22.                          <td align="right"><span class="txt-ipt" style="float: none;font-size:18px;line-height:40px;margin-right:220px;">扫码转发 </span></td>  
  23.                          <td align="" rowspan="2">  
  24.                             <span style="margin-right:40px;" id="qrcode">  
  25.                             </span>  
  26.                          </td>  
  27.                      </tr>  
  28.                      <tr>  
  29.                          <td align="right"><span class="txt-ipt" style="float: none;font-size:16px;margin-right:50px;line-height:0px;width:300px;"> 二维码（前端任务详情页面链接）</span></td>  
  30.                      </tr>  
  31.                  </table>  
  32.                    
  33.                  <table style="width: 100%;border-collapse:separate; border-spacing:10px;">  
  34.                      <tr>  
  35.                          <td align="right"><span class="txt-ipt" style="float: none;font-size:18px;margin-right:100px;">分享给好友</span></td>  
  36.                          <td align="left">  
  37.                              <span style="margin-right:40px;"><a rel="nofollow" onclick="jiathis_sendto('weixin');return false;"><img src="${ctx}/static/wcmp/img/weixin.png" style="height:40px;width:50px;"></a></span>  
  38.                              <span style="margin-right:32px;"><a rel="nofollow" onclick="jiathis_sendto('weixin');return false;"><img src="${ctx}/static/wcmp/img/tengxun.png" style="height:40px;width:50px;"></a></span>  
  39.                              <span style="margin-right:10px;"><a href="#" onclick="toQQ();"><img src="${ctx}/static/wcmp/img/kongjian.png" style="height:40px;width:50px;"></a></span>  
  40.                          </td>  
  41.                      </tr>  
  42.                  </table>  
  43.         </div>  
  44.   
  45.        <div style="display:none">    
  46.             <a href="#none" class="copy-input">点击复制单中的文本</a>    
  47.             <input type="text" class="input" value="输入要复制的内容" />   
  48.           
  49.             <a rel="#p1">拷贝1</a>  
  50.             <p id="p1">拷贝内容1拷贝内容1拷贝内容1</p>  
  51.         </div>      
  52.          
  53. <script type="text/javascript" src="http://v3.jiathis.com/code/jia.js?uid=1" charset="utf-8"></script>  
  54. <script type="text/javascript" src="${ctx}/static/js/taskrelay/ZeroClipboard.js"></script>  
  55. <script type="text/javascript" src="http://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>  
  56.   
  57.   
  58. <script "text/javascript">  
  59.     var relayInfo = '${relayInfo}';  
  60.     var taskId = '${taskId}';  
  61.       
  62.     var shareUrl = "http://192.168.3.72:8080/WCMP2/static/front/renwuxq.html?taskId="+taskId+"&t_="+relayInfo;  
  63.       
  64.     //分享到微信或朋友圈   
  65.     var jiathis_config = {   
  66.         url: shareUrl,   
  67.         title: "自定义网页标题 #微博话题#",   
  68.         summary:"分享的文本摘要"   
  69.     }   
  70.   
  71. //扫码转发  
  72. //setTimeout(function(){  
  73.     $('#qrcode').qrcode({width: 100,height: 100,text: shareUrl});  
  74. //},1000);  
  75.       
  76. $(function(){  
  77.     //复制功能  
  78.     clipboard($("#relayUrl").val(),"relayCopy","复制成功",'relayCopyContainer');//调用方式  
  79.     /* 
  80.      $(".copy-input").zclip({   
  81.         path: "${ctx}/static/js/taskrelay/ZeroClipboard.swf",   
  82.         copy: function(){   
  83.         return $(this).parent().find(".input").val();   
  84.         },   
  85.         afterCopy:function(){ 
  86.             var $copysuc = $("<div class='copy-tips'><div class='copy-tips-wrap'>☺ 复制成功</div></div>");   
  87.             $("body").find(".copy-tips").remove().end().append($copysuc);   
  88.             $(".copy-tips").fadeOut(3000);   
  89.         }  */  
  90.     //});  
  91.       
  92.      //$('a[rel]').zclip({path:'${ctx}/static/js/taskrelay/ZeroClipboard.swf', copy: function () { return $(this.getAttribute('rel')).html(); } });  
  93. })  
  94.   
  95. function toQQ(){  
  96.     var shareqqzonestring='http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?summary=分享QQ空间&url='+encodeURIComponent(shareUrl)+'&pics=111';    
  97.     //window.open(shareqqzonestring,'newwindow','height=400,width=400,top=100,left=300');  
  98.     window.open(shareqqzonestring);  
  99. }  
  100.    
  101. //复制方法  
  102. function clipboard(text, button, msg, parent) {  
  103.     if (window.clipboardData) { //如果是IE浏览器  
  104.         var copyBtn = document.getElementById(button);  
  105.         copyBtn.onclick = function() {  
  106.             window.clipboardData.setData('text', text);  
  107.             alert(msg);  
  108.         }  
  109.     } else {    //非IE浏览器  
  110.         var clip = new ZeroClipboard.Client();//初始化一个剪切板对象  
  111.         ZeroClipboard.setMoviePath("${ctx}/static/js/taskrelay/ZeroClipboard.swf"); //设置 不然要放在网站根目录下才显示   
  112.         clip.setHandCursor(true);   //设置手型游标  
  113.           
  114.         clip.addEventListener("mouseUp", function(client) {//绑定mouseUp事件触发复制  
  115.             clip.setText(text); //设置待复制的文本内容  
  116.             alert(msg);  
  117.         });  
  118.         clip.addEventListener('complete',function(client,text){  
  119.             //alert("复制成功，您可以粘贴发送给QQ上的好友或QQ群了^_^");  
  120.         });  
  121.         clip.glue(button,parent);   //调用ZeroClipboard.js的内置方法处理flash的位置的问题  
  122.     }  
  123.     return false;  
  124. }  
  125.   
  126.   
  127.     //以下代码废弃  
  128.     function copyUrl(){  
  129.         //隐藏文本框内容无法触发  
  130.         var Url=document.getElementById("url");  
  131.         Url.select(); // 选择对象  
  132.         document.execCommand("Copy");       // 执行浏览器复制命令  
  133.         alert("已复制好，可贴粘。");  
  134.           
  135.         //只支持ie内核  
  136.         /* 
  137.         var maintext = "www.baidu.com"; 
  138.          
  139.         if (window.clipboardData){   
  140.             window.clipboardData.setData("Text", maintext); 
  141.         }else if (window.netscape){   
  142.             try{   
  143.                 netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");   
  144.             }catch(e){   
  145.                 alert("该浏览器不支持一键复制！n请手工复制文本框链接地址～");   
  146.             }   
  147.             var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);   
  148.             if (!clip) return;   
  149.             var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);   
  150.             if (!trans) return;   
  151.             trans.addDataFlavor('text/unicode');   
  152.             var str = new Object();   
  153.             var len = new Object();   
  154.             var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);   
  155.             var copytext=maintext;   
  156.             str.data=copytext;   
  157.             trans.setTransferData("text/unicode",str,copytext.length*2);   
  158.             var clipid=Components.interfaces.nsIClipboard;   
  159.             if (!clip) return false;   
  160.             clip.setData(trans,null,clipid.kGlobalClipboard);   
  161.         }   
  162.          alert("以下内容已经复制到剪贴板nn" + maintext);  */  
  163.     }  
  164.       
  165. </script>  
  166.   
  167. </body>  
  168. </html>  

3.页面效果

联系我们 沪ICP备2021010478号-7