用百度siteapp的uaredirect.js判断用户访问端而进行域名的自动跳转,并通过cookie记录手机访问电脑端的状态

如果你的系统有触屏版和电脑版，一般就意味着你有两个域名。
如果你有两个域名，那么当用户来访问的时候就需要做域名访问判断了。
需要实现当用户使用手机输入了电脑版的域名自动跳转到触屏版。

本文介绍的是利用百度siteapp的uaredirect.js文件。

首先在你的head中嵌入这段代码

<script src="${base}/resources/shop/${theme}/js/uaredirect.js" type="text/javascript"></script>
<script type="text/javascript">
uaredirect("http://m.XXXX.com","http://www.XXXXX.com");
</script>

注意：这里需要将域名修改成你自己的域名

uaredirect.js的原文件是通过压缩的为了修改方便我已经将其格式化了一下。

源文件地址http://siteapp.baidu.com/static/webappservice/uaredirect.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
}
}
}
};

接下来需要注意的问题来了，以上代码实现了不同版本之间自动跳转。但是如果我需要使用手机访问电脑版怎么办。

首先我们可以利用代码中的 if (!c.match(“fromapp”)) 这个判断，在手机强行访问电脑版的时候在url地址后面加上 #fromapp （如：www.xxxx.com#fromapp）。通过这个可以让自动跳转失效。

在url后面加上fromapp过后新的问题又出现了，通过手机浏览器访问电脑版的首页可以，但是如果我打开了新的连接再返回到主页，又会自动跳转到触屏版。这样的体验非常不好。

我就对其代码做了一定的修改，在原有的代码基础上加入了cookie存储状态。

if (b) {
var c = window.location.hash;
if (c.match("m")) {
addCookie("ism","1", {expires: 60 * 60, path: ""});
}else{
var ism = getCookie("ism");
if ($.trim(ism) == "" || ism != "1") {
if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i))) {
location.replace(f);
}
}
}

}

获取cookie和增加cookie的代码

// 添加Cookie
function addCookie(name, value, options) {
if (arguments.length > 1 && name != null) {
if (options == null) {
options = {};
}
if (value == null) {
options.expires = -1;
}
if (typeof options.expires == "number") {
var time = options.expires;
var expires = options.expires = new Date();
expires.setTime(expires.getTime() + time * 1000);
}
if (options.path == null) {
options.path = "/";
}
if (options.domain == null) {
options.domain = "";
}
document.cookie = encodeURIComponent(String(name)) + "=" + encodeURIComponent(String(value)) + (options.expires != null ? "; expires=" + options.expires.toUTCString() : "") + (options.path != "" ? "; path=" + options.path : "") + (options.domain != "" ? "; domain=" + options.domain : "") + (options.secure != null ? "; secure" : "");
}
}

// 获取Cookie
function getCookie(name) {
if (name != null) {
var value = new RegExp("(?:^|; )" + encodeURIComponent(String(name)) + "=([^;]*)").exec(document.cookie);
return value ? decodeURIComponent(value[1]) : null;
}
}