您的位置:首页> 日志> 前端技术 正文

  在我们的项目实现中偶尔会遇到生成静态页的问题,其中较突出的就是生成静态页面 后的多屏跳转问题,目前系统机制生成静态后无法继续判断多屏适配;我们以往的解决方法大多是直接加一个判断,当时手机或平板访问网站的问题可以自动切换到 多屏,以适应任意地址打开网站都是多屏效果,这样实施中有一个小小的细节,也是很难接受的细节——当网速过慢少,首先看到的是PC端的网站,然后才会跳转,这样用户体验就大打折扣了!

  既然我们发现问题了,如何解决这个问题呢?

  一、分析原因:

  产生这个问题的主要原因在于DOM加载顺序,大概的顺序是这样的:

  • 1、解析HTML结构。
  • 2、加载外部脚本和样式表文件。
  • 3、解析并执行脚本代码。
  • 4、构造HTML DOM模型。
  • 5、加载图片等外部文件。
  • 6、页面加载完毕。

  当我们直接把判断语句放到head里,然后用最慢网速调试静态多屏效果,就会发现,我们的判断语句是在构造html dom的同时加载出来的,这样就会显示出一些我们不希望看到的内容。

  二、解决方案

  indexOf(String.indexOf 方法)

   返回 String 对象内第一次出现子字符串的字符位置。
 

  三、具体方法

 

  1. <script type="text/javascript"
  2.     if(window.location.toString().indexOf('pref=padindex') != -1){ 
  3.     }else
  4.         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))){   
  5.           if(window.location.href.indexOf("?mobile")<0){ 
  6.             try
  7.                 if(/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){ 
  8.                     window.location.href="http://www.baidu.com/";
  9.                 }else if(/iPad/i.test(navigator.userAgent)){ 
  10.                     window.location.href="http://www.sina.com/" 
  11.                 }else
  12.                     window.location.href="http://www.163.com/" 
  13.                 } 
  14.             }catch(e){} 
  15.         } 
  16.         } 
  17.     } 
  18. </script> 

不同设备访问自动跳转到对应的网址,把源码放到head之前就可以了