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

引子：

去年年底公司开发手机站平台，经历了前期的用户群、市场调查，产品需求分析，产品原型设计，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可能面临的问题，有待更新呐！

赞 (0)

相关推荐

  • AngularJS利用Controller完成URL跳转

    具体写法举例: 1.js定义一个controller function MyCtrl($scope, $location) { $scope.jumpToUrl = function(path) { //TODO:add code here }; } 2.html里面应用controller <div ng-controller='MyCtrl'> <button ng-click="jumpToUrl('/signin')">signin</button

  • 手机平板等移动端适配跳转URL的js代码

    复制代码 代码如下: <script type="text/javascript">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.

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

    引子: 去年年底公司开发手机站平台,经历了前期的用户群.市场调查,产品需求分析,产品原型设计,ui前端到程序开发上线测试等等工作,终于上线...此处略去本人作为前端开发的心情. 应该说,我们的手机站平台还是个顽皮小孩子,还有许多需要去学习,去磨练. 我们手机站平台的设计初衷是对接我们已有的PC站平台,简单说就是原来我们所有的用户使用的是我们的PC站服务,现在可以得到一个网站数据与PC站 一样的手机站点.重点是老用户还不收钱,免费用.(PC端网站的客户 想想是不是有点儿小激动呢)上线一段时间,感觉

  • js跳转页面方法实现汇总

    复制代码 代码如下: <span id="tiao">3</span><a href="javascript:countDown"></a>布丁足迹;秒后自动跳转--<meta http-equiv=refresh content=3;url='/search/billsearch.jsp'</ul> <!--脚本开始--> <script language="javasc

  • js跳转页面方法总结

    js跳转页面方法大全<span id="tiao">3</span><a href="javascript:countDown"></a>祥子网屋;秒后自动跳转--<meta http-equiv=refresh content=3;url='/search/billsearch.jsp'</ul> <!--脚本开始--> <script language="javascr

  • JS基于Location实现访问Url、重定向及刷新页面的方法分析

    本文实例讲述了JS基于Location实现访问Url.重定向及刷新页面的方法.分享给大家供大家参考,具体如下: js通过Location实现访问Url,重定向,刷新页 web中经常会使用到刷新页面,访问url.重定向请求的功能. javascript提供了许多方法访问,修改当前用户在浏览器中访问的url.所有的这些技术都是基于location对象的.它是作为window对象的属性.你可以生成一个包含当前url的新location对象: var currentURL=window.location

  • node.js中http模块和url模块的简单介绍

    node.js中http模块和url模块的简单介绍

    前言 本文主要给大家介绍了关于node.js中http模块与url模块的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 一.http模块的简单介绍 node.js当中的http内置模块可以用于创建http服务器与http客户端. 1.引包 const http = require('http'); 2.创建http服务器 var server = http.createServer((req,res)=>{ }); 使用http的.createServer()方法可以

  • js实现支持手机滑动切换的轮播图片效果实例

    js实现支持手机滑动切换的轮播图片效果实例

    本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法.分享给大家供大家参考.具体如下: 运行效果如下: 完整实例代码点击此处本站下载. 使用方法案例: <script type="text/javascript" src="../src/zepto.js"></script> <script type="text/javascript" src="../src/carousel-image.js&qu

  • JS判断是否手机或pad访问实现方法

    JS判断是否手机或pad访问实现方法 S判断是否手机或pad访问 方面的内容,对于利用JS判断是否手机或pad访问 感兴趣的同学可以看下, 直接上代码: <script type="text/javascript"> /* * 智能机浏览器版本信息: * */ var browser={ versions:function(){ var u = navigator.userAgent, app = navigator.appVersion; return {//移动终端浏览

  • JS来动态的修改url实现对url的增删查改

    虽然可以通过get方式提交post表单等方式来动态修改url,但如果多个按钮能并行提交时,写多个大体相同,又有些细节差异的表单,难免有些不妥,因此,想到了通过JS来动态的修改url,来实现对url的增删查改. <script> var LG=(function(lg){ var objURL=function(url){ this.ourl=url||window.location.href; this.href="";//?前面部分 this.params={};//ur

  • JS动态修改图片的URL（src）的方法

    本文实例讲述了JS动态修改图片的URL(src)的方法.分享给大家供大家参考.具体如下: 下面的JS代码可以动态修改图片地址,以显示一张新的图片,实际上是通过修改图片的src属性来实现的 <!DOCTYPE html> <html> <head> <script> function changeSrc() { document.getElementById("myImage").src="hackanm.gif"; }

  • JS根据key值获取URL中的参数值及把URL的参数转换成json对象

    不废话了,直接贴代码了,通过示例一讲解JS根据key值获取URL中的参数值及把URL的参数转换成json对象,示例二讲解js获取url传递参数,具体内容请看下文 示例一: //把url的参数部分转化成json对象 parseQueryString: function (url) { var reg_url = /^[^\?]+\?([\w\W]+)$/, reg_para = /([^&=]+)=([\w\W]*?)(&|$|#)/g, arr_url = reg_url.exec(url

随机推荐