源于生活

标题: 让页面自动判断移动端或PC端,并互相跳转,生成二维码 [打印本页]
作者: kevin-ying    时间: 2015-8-9 15:37
标题: 让页面自动判断移动端或PC端,并互相跳转,生成二维码
在网上搜索到一段JS代码:
  1. function goPAGE() {
  2.         if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
  3.                 window.location.href="你的手机版地址";
  4. }
  5.         else {
  6.                 window.location.href="你的电脑版地址";        }
  7. }
  8. goPAGE();
复制代码

恩,这个没错,确实可以跳转,但问题是不停的跳...
所以我该了一下,电脑端的去掉了:
  1.         else {
  2.                 window.location.href="你的电脑版地址";        }
复制代码

结果可行的代码是:

  2. function goPAGE() {
  3.         if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
  4.                 window.location.href="你的手机版地址";
  5. }

  7. }
  8. goPAGE();
复制代码

移动端页面的代码就是:


然后在PC端加了一点劲爆的内容,直接给页面加了一个扫码访问移动端页面的内容:
基于jquery.qrcode.min.js插件生成，代码如下：
  1. <html>
  2. 　　<head>
  3. 　　<title>生成二维码</title>
  4. 　　<meta name="author" content=" " />
  5. 　　<script type="text/javascript" src="http //code jquery com/jquery-1.6.1.min.js"></script>
  6. 　　<script type="text/javascript" src="jquery.qrcode.min.js"></script>
  7. 　　<script type="text/javascript">
  8. 　　jQuery(function () {
  9. 　　jQuery("#qrCodeDiv").qrcode("设置二维码的内容。");
  10. 　　});
  11. 　　</script>
  12. 　　</head>

  14. 　　<body>
  15. 　　<div id="qrCodeDiv">
  16. 　　</div>
  17. 　　</body>
  18. 　　</html>
复制代码

优点：基于jquery.qrcode.min.js插件生成，稳定，效率比较高。
　　缺点：不能设置和控制生成二维码的大小（笔者还没有找到）。

但是可以通过DIV固定二维码图片大小.


附件:jquery.qrcode.min.js 下载
http://pan.baidu.com/s/1z5zps

直接可用版(更新 2015.8.10)
http://pan.baidu.com/s/1mgAa47Q
作者: kevin-ying    时间: 2015-8-9 17:32
百度目前为站长提供了判断手机终端类型并自动实现跳转的js脚本，极大的方便了广大站长及web开发人员。其js脚本的使用方法极其简单。

  1. <script src="http://siteapp.baidu.com/static/webappservice/uaredirect.js" type="text/javascript"></script>
  2. <SCRIPT type=text/javascript>uaredirect("手机站","WEB站");</SCRIPT>
复制代码




其中最为核心的js脚本格式化代码如下所示：
  1. function uaredirect(f) {
  2.     try {
  3.         if (document.getElementById("bdmark") != null) {
  4.             return
  5.         }
  6.         var b = false;
  7.         if (arguments[1]) {
  8.             var e = window.location.host;
  9.             var a = window.location.href;
  10.             if (isSubdomain(arguments[1], e) == 1) {
  11.                 f = f + "/#m/" + a;
  12.                 b = true
  13.             } else {
  14.                 if (isSubdomain(arguments[1], e) == 2) {
  15.                     f = f + "/#m/" + a;
  16.                     b = true
  17.                 } else {
  18.                     f = a;
  19.                     b = false
  20.                 }
  21.             }
  22.         } else {
  23.             b = true
  24.         }
  25.         if (b) {
  26.             var c = window.location.hash;
  27.             if (!c.match("fromapp")) {
  28.                 if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i))) {
  29.                     location.replace(f)
  30.                 }
  31.             }
  32.         }
  33.     } catch(d) {}
  34. }
  35. function isSubdomain(c, d) {
  36.     this.getdomain = function(f) {
  37.         var e = f.indexOf("://");
  38.         if (e > 0) {
  39.             var h = f.substr(e + 3)
  40.         } else {
  41.             var h = f
  42.         }
  43.         var g = /^www\./;
  44.         if (g.test(h)) {
  45.             h = h.substr(4)
  46.         }
  47.         return h
  48.     };
  49.     if (c == d) {
  50.         return 1
  51.     } else {
  52.         var c = this.getdomain(c);
  53.         var b = this.getdomain(d);
  54.         if (c == b) {
  55.             return 1
  56.         } else {
  57.             c = c.replace(".", "\\.");
  58.             var a = new RegExp("\\." + c + "$");
  59.             if (b.match(a)) {
  60.                 return 2
  61.             } else {
  62.                 return 0
  63.             }
  64.         }
  65.     }
  66. };
复制代码




建议站长及web开发人员使用如下压缩后的js脚本
  1. function uaredirect(f){try{if(document.getElementById("bdmark")!=null){return}var b=false;if(arguments[1]){var e=window.location.host;var a=window.location.href;if(isSubdomain(arguments[1],e)==1){f=f+"/#m/"+a;b=true}else{if(isSubdomain(arguments[1],e)==2){f=f+"/#m/"+a;b=true}else{f=a;b=false}}}else{b=true}if(b){var c=window.location.hash;if(!c.match("fromapp")){if((navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i))){location.replace(f)}}}}catch(d){}}function isSubdomain(c,d){this.getdomain=function(f){var e=f.indexOf("://");if(e>0){var h=f.substr(e+3)}else{var h=f}var g=/^www\./;if(g.test(h)){h=h.substr(4)}return h};if(c==d){return 1}else{var c=this.getdomain(c);var b=this.getdomain(d);if(c==b){return 1}else{c=c.replace(".","\\.");var a=new RegExp("\\."+c+"$");if(b.match(a)){return 2}else{return 0}}}};
复制代码









欢迎光临 源于生活 (http://bbs.vingoo.info/) Powered by Discuz! X3.1