让页面自动判断移动端或PC端,并互相跳转,生成二维码

kevin-ying · 发表于 2015-8-9 15:37:29

在网上搜索到一段JS代码:

function goPAGE() {
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))) {
window.location.href="你的手机版地址";
}
else {
window.location.href="你的电脑版地址"; }
}
goPAGE();

复制代码

恩,这个没错,确实可以跳转,但问题是不停的跳...
所以我该了一下,电脑端的去掉了:

else {
window.location.href="你的电脑版地址"; }

复制代码

结果可行的代码是:

function goPAGE() {
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))) {
window.location.href="你的手机版地址";
}
}
goPAGE();

复制代码

移动端页面的代码就是:

然后在PC端加了一点劲爆的内容,直接给页面加了一个扫码访问移动端页面的内容:
基于jquery.qrcode.min.js插件生成，代码如下：

<html>
　　<head>
　　<title>生成二维码</title>
　　<meta name="author" content=" " />
　　<script type="text/javascript" src="http //code jquery com/jquery-1.6.1.min.js"></script>
　　<script type="text/javascript" src="jquery.qrcode.min.js"></script>
　　<script type="text/javascript">
　　jQuery(function () {
　　jQuery("#qrCodeDiv").qrcode("设置二维码的内容。");
　　});
　　</script>
　　</head>
　　<body>
　　<div id="qrCodeDiv">
　　</div>
　　</body>
　　</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:34

百度目前为站长提供了判断手机终端类型并自动实现跳转的js脚本，极大的方便了广大站长及web开发人员。其js脚本的使用方法极其简单。

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

复制代码

其中最为核心的js脚本格式化代码如下所示：

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
}
}
}
};

复制代码

建议站长及web开发人员使用如下压缩后的js脚本

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}}}};

复制代码

		自动登录	找回密码
密码			免费注册

[WEB前端] 让页面自动判断移动端或PC端,并互相跳转,生成二维码

本帖被以下淘专辑推荐:

相关帖子