JS跳转手机站url的若干注意事项


Posted in Javascript onOctober 18, 2017

引子:

去年年底公司开发手机站平台,经历了前期的用户群、市场调查,产品需求分析,产品原型设计,ui前端到程序开发上线测试等等工作,终于上线。。。此处略去本人作为前端开发的心情。

应该说,我们的手机站平台还是个顽皮小孩子,还有许多需要去学习,去磨练。

我们手机站平台的设计初衷是对接我们已有的PC站平台,简单说就是原来我们所有的用户使用的是我们的PC站服务,现在可以得到一个网站数据与PC站 一样的手机站点。重点是老用户还不收钱,免费用。(PC端网站的客户 想想是不是有点儿小激动呢)上线一段时间,感觉很多客户还是蛮感兴趣的,都在自己的手机上安装了这个那个的二维码扫面软件,对着手机网站的二维码扫啊扫的。

话入正题:

废话不多说,很多客户慕名而来,原来不是我们做PC的客户买了我们的手机站服务,这就产生了从其PC站如何能够跳转到手机站的问题。

我想,通过javascript获取客户端的 navigator.userAgent 之后使用url跳转 是一个不错的方法。

走你-代码:

var isMobile = {
  Android: function() {
    return navigator.userAgent.match(/Android/i) ? true : false;
  },
  BlackBerry: function() {
    return navigator.userAgent.match(/BlackBerry/i) ? true : false;
  },
  iOS: function() {
    return navigator.userAgent.match(/iPhone|iPod/i) ? true : false;
  },
  Windows: function() {
    return navigator.userAgent.match(/IEMobile/i) ? true : false;
  },
  Linux: function() {
    return navigator.userAgent.match(/Linux/i) ? true : false;
  },
  any: function() {
    return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows() || isMobile.Linux());
  }
};
setTimeout(function() {
  if (isMobile.any()) {
    var body = document.getElementsByTagName('body');
    body[0].style.display='none';
    location.href = "http://m.某某.com/";
  }
}, 10);

简单分析:

一、在那些设备上需要跳转URL?

在XP,win7和mac下,一般不做手机站跳转的。

市面上的 Android 、BlackBerry 、iOS 、Windows mobile(phone) 、Linux等系统,为大家所常用的手机端操作系统。火狐的webOS,“远古时代”的诺基亚塞班等等,在国内外好像好没有市场了,不要去考虑。

二、在页面跳转时,存在哪些问题?

1.原PC网站需要加载的资源可能很多,跳转URL之前PC站的页面可能已经呈现,跳转的效果太生硬

解答:js获取终端的特性后,立即将body设置为隐藏

2.使用 window.onload 还是 setTimeout?

解答:setTimeout是由我选择何时执行,而可恶的 window.onload需要我等所有的资源下载后去执行我的方法,故我推荐使用 setTimeout();

小结:

关于终端设备的判断,上面的代码很肤浅的做了很尴尬的 url 跳转,这是不得已的方法。若是服务器端根据客户端的请求头信息来判断设备特性,依此返回不同的资源是更好的选择。

随着移动端设备的发展,很多浏览器能够设置或者自定义修改 客户端的请求头信息,也是这段js可能面临的问题,有待更新呐!

Javascript 相关文章推荐
WordPress 照片lightbox效果的运用几点
Jun 22 Javascript
JQuery设置文本框和密码框得到焦点时的样式
Aug 30 Javascript
浅析tr的隐藏和显示问题
Mar 05 Javascript
JavaScript编程的10个实用小技巧
Apr 18 Javascript
取得元素的左和上偏移量的方法
Sep 17 Javascript
JavaScript中的console.log()函数详细介绍
Dec 29 Javascript
浅谈js和css内联外联注意事项
Jun 30 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
Mar 15 Javascript
Bootstrap table使用方法总结
May 10 Javascript
vue-cli项目中怎么使用mock数据
Sep 27 Javascript
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
Vue中nprogress页面加载进度条的方法实现
Nov 13 Javascript
vue实现手机号码抽奖上下滚动动画示例
Oct 18 #Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
Oct 18 #Javascript
浅谈Node异步编程的机制
Oct 18 #Javascript
js实现随机点名系统(实例讲解)
Oct 18 #Javascript
原生JS获取元素的位置与尺寸实现方法
Oct 18 #Javascript
详谈commonjs模块与es6模块的区别
Oct 18 #Javascript
从源码看angular/material2 中 dialog模块的实现方法
Oct 18 #Javascript
You might like
解密ThinkPHP3.1.2版本之独立分组功能应用
2014/06/19 PHP
php构造函数的继承方法
2015/02/09 PHP
php写入数据到CSV文件的方法
2015/03/14 PHP
php eval函数一句话木马代码
2015/05/21 PHP
PHP数据库连接mysql与mysqli对比分析
2016/01/04 PHP
jQuery最佳实践完整篇
2011/08/20 Javascript
JQuery中dataGrid设置行的高度示例代码
2014/01/03 Javascript
js实现感应鼠标图片透明度变化的方法
2015/02/20 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
2015/04/06 Javascript
jquery ui dialog替代confirm实例分析
2016/01/25 Javascript
利用angular.copy取消变量的双向绑定与解析
2016/11/25 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
2016/12/08 Javascript
使用canvas及js简单生成验证码方法
2017/04/02 Javascript
最实用的JS数组函数整理
2017/12/05 Javascript
用Vue写一个分页器的示例代码
2018/04/22 Javascript
修改node.js默认的npm安装目录实例
2018/05/15 Javascript
create-react-app 修改为多入口编译的方法
2018/08/01 Javascript
validform表单验证的实现方法
2019/03/08 Javascript
新手入门js闭包学习过程解析
2019/10/08 Javascript
Vue实现页面添加水印功能
2019/11/09 Javascript
vue element-ui中table合计指定列求和实例
2020/11/02 Javascript
python实现倒计时的示例
2014/02/14 Python
Python基于递归和非递归算法求两个数最大公约数、最小公倍数示例
2018/05/21 Python
详解Python 函数如何重载?
2019/04/23 Python
Django模板标签中url使用详解(url跳转到指定页面)
2020/03/19 Python
详解win10下pytorch-gpu安装以及CUDA详细安装过程
2021/01/28 Python
蔻驰美国官网:COACH美国
2016/08/18 全球购物
为世界各地的女性设计和生产时尚服装:ROMWE
2016/09/17 全球购物
Nike西班牙官方网站:Nike.com (ES)
2017/10/30 全球购物
园艺师求职信
2014/03/10 职场文书
2015年七一建党节演讲稿
2015/03/19 职场文书
小学班级口号大全
2015/12/25 职场文书
《我要的是葫芦》教学反思
2016/02/18 职场文书
环境保护宣传标语大全!
2019/06/28 职场文书
Java8利用Stream对列表进行去除重复的方法详解
2022/04/14 Java/Android
mysql查找连续出现n次以上的数字
2022/05/11 MySQL