目前一般的网站都分成了PC版和手机版,当访问的浏览器是来自PC版时,则让其访问PC版的网页,当访问的浏览器是来自手机时,则让其跳转到手机版的地址。百度的uaredirect.js 就是一个小小的工具,实现了该跳转的功能。

使用方法如下,在网站的首页的头部引入下面的js和代码:

<script src="http://siteapp.baidu.com/static/webappservice/uaredirect.js" type="text/javascript"></script>
<script type="text/javascript">uaredirect("http://www.xxx.cn/xx/wap/index.html");</script>

这样在网站的入口处,就将PC端和手机端的访问分别引向不同的地址。

uaredirect.js应该代表的是:user agent redirect 的含义,级根据不同的 user agent 重定向到不同的网址。

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

主要起作用的代码为:

var c=window.location.hash;
if(!c.match("fromapp")){
if((navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i))){
location.replace(f)
}
}

如果userAgent是 iPhone, 或者iPod, 或者Android, 或者ios 则使用我们传入函数 uaredirect("http://www.xxx.cn/xx/wap/index.html"); 中的url地址来取代当前的url地址,实现了跳转到不同的url地址。

其实腾讯的 www.qq.com 的首页中包含了对不同客户端的更加细化的区分,我们查看他的首页源码,发现其中包含了下面一段代码:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta content="text/html; charset=gb2312" http-equiv="Content-Type">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>腾讯首页</title>
<script type="text/javascript">
if(window.location.toString().indexOf('pref=padindex') != -1){

}else{
if(/AppleWebKit.*Mobile/i.test(navigator.userAgent)
|| (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){
if(window.location.href.indexOf("?mobile")<0){
try{
if(/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){
window.location.href="http://xw.qq.com/index.htm";
}else if(/iPad/i.test(navigator.userAgent)){
window.location.href="http://www.qq.com/pad/"
}else{
window.location.href="http://xw.qq.com/simple/s/index/"
}
}catch(e){}
}
}
}
</script>

使用百度出品的 uaredirect.js 来判断客户端是否为手机的更多相关文章

  1. 百度判断手机终端并自动跳转uaredirect.js代码及使用实例

    百度siteapp下的一款跳转的产品,使用起来很方便.你可以用这款JS跳转到手机版,也可以跳转到任何你想跳转的位置. js代码如下: function uaredirect(f) { try { if ...

  2. 百度Site App的uaredirect.js实现手机访问,自动跳转网站手机版

    以下为代码,可放置在网站foot底部文件,或者haead顶部文件,建议将代码放在网站顶部,这样可以实现手机访问立即跳转! <script src="http://siteapp.bai ...

  3. H5案例分享:使用JS判断客户端、浏览器、操作系统类型

    使用JS判断客户端.浏览器.操作系统类型 一.JS判断客户端类型 JS判断客户端是否是iOS或者Android手机移动端 通过判断浏览器的userAgent,用正则来判断手机是否是ios和Androi ...

  4. 【百度地图API】JS版本的常见问题

    1.请问如何将我的店铺标注在百度地图上?我是否可以做区域代理?在百度地图上标注是否免费? 答复: 这里只负责API的技术咨询,不解决任何地图标注问题.在百度地图上标注自己公司,即气泡标注业务.该业务已 ...

  5. JS判断客户端、浏览器、操作系统

    一.JS判断客户端是否是iOS或者Android手机移动端 通过判断浏览器的userAgent,用正则来判断手机是否是ios和Android客户端. 方法一: var u = navigator.us ...

  6. 插件uaredirect.js实现电脑版跳转到手机版网站

    一.介绍 这段时间,有好多朋友问我,跳转到手机版的那个JS是怎么写的.其实这个JS也不是我写的,是百度siteapp下的一款跳转的产品,使用起来很方便.你可以用这款JS跳转到手机版,也可以跳转到任何你 ...

  7. 使用JS判断客户端、浏览器、操作系统类型

    一.JS判断客户端类型 JS判断客户端是否是iOS或者Android手机移动端 通过判断浏览器的userAgent,用正则来判断手机是否是ios和Android客户端. 核心代码如下: 方法一: &l ...

  8. JS判断客户端是否是iOS或者Android或者ipad(二)

    js判断客户端是IPAD和iphone 多了就不说了,直接上代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22     funct ...

  9. director.js:客户端的路由---简明中文教程

    1.引子 最近学用director.js,那是相当的简单易学易使用.不过开始学的时候,搜搜过后,却没有发现相关的中文教程.于是决定硬啃E文,翻译备用的同时也当是给自己上课并加深对它的理解. direc ...

随机推荐

  1. Javascript之旅(一)

    Javascript之旅(一) 一.基础知识 基本语法 变量 数据类型 字符串 数组 对象 条件判断 循环 Map和Set iterable 为什么要学习JavaScript JavaScript 是 ...

  2. ecshop中那些有意思的代码

    1:返回数量为0的array,而不是null /** * 获得推荐商品 * * @access public * @param string $type 推荐类型,可以是 best, new, hot ...

  3. 用cart(分类回归树)作为弱分类器实现adaboost

    在之前的决策树到集成学习里我们说了决策树和集成学习的基本概念(用了adaboost昨晚集成学习的例子),其后我们分别学习了决策树分类原理和adaboost原理和实现, 上两篇我们学习了cart(决策分 ...

  4. 数据库中触发器before与after认识

    Before与After区别: before:(insert.update)可以对new进行修改,after不能对new进行修改,两者都不能修改old数据. 对于INSERT语句, 只有NEW是合法的 ...

  5. github生成燃尽图

    一.     前期准备工作. 1.1 1.2 1.3 1.4 1.5 1.6 1.7 1.8添加标签 二.     修改进度 2.1进入milestone,编辑 可以看到上面有bug标签,进入并解决 ...

  6. CSS浏览器兼容性写法小结

    *        , ie6,ie7可以识别: _和- ,  ie6可以识别: !important  ,表示高优先级,ie7及以上,firefox都支持,ie6认识带!important的样式属性, ...

  7. Oracle基本操作汇总

    --10g 新增的表空间类型:大文件 (Bigfile) 表空间.--10g 数据库在创建的时候,会指定默认的表空间类型.如果不特殊指定的话,默认为 SMALLFILE 类型的表空间.SELECT * ...

  8. 安卓使ScrollView滚动到底部代码

    在开发中,我们经常需要更新列表,并将列表拉倒最底部,比如发表微博,聊天界面等等, 这里有两种办法,第一种,使用scrollTo(): public static void scrollToBottom ...

  9. ThoughtWorks西邮暑期特训营 -- JavaScript在线笔试题

    ThoughtWorks 公司在西邮正式开办的只教女生前端开发的女子卓越实验室已经几个月过去了,这次计划于暑期在西邮内部开展面向所有性别所有专业的前端培训. 具体官方安排请戳:ThoughtWorks ...

  10. 【翻译】Netscaler真实表现性能调整

    源地址:https://msandbu.wordpress.com/2014/10/31/netscaler-and-real-performance-tuning/ 作者显然不是以英语为母语的,所以 ...