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 相关文章推荐
jQuery 行背景颜色的交替显示(隔行变色)实现代码
Dec 13 Javascript
js去空格技巧分别去字符串前后、左右空格
Oct 21 Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
Feb 25 Javascript
vuejs动态组件给子组件传递数据的方法详解
Sep 09 Javascript
详解JS-- 浮点数运算处理
Nov 28 Javascript
利用types增强vscode中js代码提示功能详解
Jul 07 Javascript
详解Node中导入模块require和import的区别
Aug 11 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
Sep 30 Javascript
解决vue-cli创建项目的loader问题
Mar 13 Javascript
通过图带你深入了解vue的响应式原理
Jun 21 Javascript
详解微信小程序开发之formId使用(模板消息)
Aug 27 Javascript
使用layui前端框架弹出form表单以及提交的示例
Oct 25 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
php判断字符串在另一个字符串位置的方法
2014/02/27 PHP
删除html标签得到纯文本可处理嵌套的标签
2014/04/28 PHP
PHP文件缓存内容保存格式实例分析
2014/08/20 PHP
详解PHP导入导出CSV文件
2014/11/03 PHP
php接口隔离原则实例分析
2019/11/11 PHP
js multiple全选与取消全选实现代码
2012/12/04 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
2015/01/23 Javascript
基于javascript html5实现多文件上传
2016/03/03 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
2016/11/04 Javascript
关于jquery form表单序列化的注意事项详解
2017/08/01 jQuery
解决select2在bootstrap modal中不能正常使用的问题
2018/08/09 Javascript
Vue中控制v-for循环次数的实现方法
2018/09/26 Javascript
简述ES6新增关键字let与var的区别
2019/08/23 Javascript
Vue组件间数据传递的方式(3种)
2020/07/13 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
2020/12/04 Vue.js
实例讲解Python中global语句下全局变量的值的修改
2016/06/16 Python
Python中shutil模块的常用文件操作函数用法示例
2016/07/05 Python
python subprocess 杀掉全部派生的子进程方法
2017/01/16 Python
python绘制双柱形图代码实例
2017/12/14 Python
使用python进行文本预处理和提取特征的实例
2018/06/05 Python
Random 在 Python 中的使用方法
2018/08/09 Python
简单了解django索引的相关知识
2019/07/17 Python
Django为窗体加上防机器人的验证码功能过程解析
2019/08/14 Python
Python MongoDB 插入数据时已存在则不执行,不存在则插入的解决方法
2019/09/24 Python
详解Django CAS 解决方案
2019/10/30 Python
Win10里python3创建虚拟环境的步骤
2020/01/31 Python
UNDONE手表官网:世界领先的定制手表品牌
2018/11/13 全球购物
Linux机考试题
2015/07/17 面试题
兼职业务员岗位职责
2014/01/01 职场文书
网吧最新创业计划书范文
2014/03/27 职场文书
岗位安全生产责任书
2014/07/28 职场文书
设备收款委托书范本
2014/10/02 职场文书
2014年导购员工作总结
2014/11/18 职场文书
离婚协议书范本
2015/01/26 职场文书
实验心得体会范文
2016/01/25 职场文书
CSS3实现列表无限滚动/轮播效果
2021/06/23 HTML / CSS