请输入关键字
2019-04 16

网站不同格式页面跳转的解决方案

PC端和手机端入口一致,跳转不同页面的方法;


PC端接口请求后跳转到jsp页面,手机端请求接口后跳转到html页面,两个客户端公用一个入口(index.do)。

 

    // 跳转首页

           @RequestMapping(value = "/index.do", method = RequestMethod.GET)

           public String toIndex(HttpServletRequest req, HttpServletResponse res) {

                  if (EquipmentJudgment.JudgeIsMoblie(req)) {

                         // 来自移动端访问

                         return "redirect:/wap";//重定向到另一个接口(手机端接口入口)

                  } else {

                         // 来自PC端访问

                         return "/index";//跳转到index页面

                  }

    

           }

 

1. spring-mvc.xml中修改视图解析器,如下:

 

    <!-- 定义HTML文件的位置 -->

           <bean id="htmlviewResolver"

                  class="org.springframework.web.servlet.view.InternalResourceViewResolver">

                  <property name="viewClass"

                         value="com.abc.common.HtmlResourceView" />

                  <property name="order" value="0" />

                  <property name="prefix" value="/WEB-INF/view/" />

                  <property name="suffix" value=".html" />

                  <property name="contentType" value="text/html;charset=UTF-8"></property>

           </bean>

           <!-- 定义JSP文件的位置 -->

           <bean id="jspViewResolver"

                  class="org.springframework.web.servlet.view.InternalResourceViewResolver">

                  <property name="order" value="1" />

                  <property name="prefix" value="/WEB-INF/jsp/" />

                  <property name="suffix" value=".jsp" />

           </bean>

 

说明:当接口返回页面时,首先会去找.html页面,找到了就执行完了,找不到就会自动去找.jsp页面。见HtmlResourceView.java

 

所有的页面名字不要重复!

 

2. 编写类EquipmentJudgment.java(判断是否是手机端)

 

    package com.abc.common;

    

    import javax.servlet.http.HttpServletRequest;

    

    public class EquipmentJudgment {

           public static boolean JudgeIsMoblie(HttpServletRequest request) {

                  boolean isMoblie = false;

                  String[] mobileAgents = { "iphone", "android", "phone", "mobile", "wap", "netfront", "java", "opera mobi", "opera mini", "ucweb", "windows ce", "symbian", "series",

                                "webos", "sony", "blackberry", "dopod", "nokia", "samsung", "palmsource", "xda", "pieplus", "meizu", "midp", "cldc", "motorola", "foma", "docomo", "up.browser",

                                "up.link", "blazer", "helio", "hosin", "huawei", "novarra", "coolpad", "webos", "techfaith", "palmsource", "alcatel", "amoi", "ktouch", "nexian", "ericsson",

                                "philips", "sagem", "wellcom", "bunjalloo", "maui", "smartphone", "iemobile", "spice", "bird", "zte-", "longcos", "pantech", "gionee", "portalmmm", "jig browser",

                                "hiptop", "benq", "haier", "^lct", "320x320", "240x320", "176x220", "w3c ", "acs-", "alav", "alca", "amoi", "audi", "avan", "benq", "bird", "blac", "blaz", "brew",

                                "cell", "cldc", "cmd-", "dang", "doco", "eric", "hipt", "inno", "ipaq", "java", "jigs", "kddi", "keji", "leno", "lg-c", "lg-d", "lg-g", "lge-", "maui", "maxo",

                                "midp", "mits", "mmef", "mobi", "mot-", "moto", "mwbp", "nec-", "newt", "noki", "oper", "palm", "pana", "pant", "phil", "play", "port", "prox", "qwap", "sage",

                                "sams", "sany", "sch-", "sec-", "send", "seri", "sgh-", "shar", "sie-", "siem", "smal", "smar", "sony", "sph-", "symb", "t-mo", "teli", "tim-", "tosh", "tsm-",

                                "upg1", "upsi", "vk-v", "voda", "wap-", "wapa", "wapi", "wapp", "wapr", "webc", "winw", "winw", "xda", "xda-", "Googlebot-Mobile" };

                  if (request.getHeader("User-Agent") != null) {

                         for (String mobileAgent : mobileAgents) {

                                if (request.getHeader("User-Agent").toLowerCase().indexOf(mobileAgent) >= 0) {

                                       isMoblie = true;

                                       break;

                                }

                         }

                  }

                  return isMoblie;

           }

    }

 

 

3. 编写类spring-mvc.xml 配置中的类HtmlResourceView.java(判断要跳转的页面是否存在)

 

    package com.abc.common;

    

    import java.io.File;

    import java.util.Locale;

    

    import org.springframework.web.servlet.view.InternalResourceView;

    

    public class HtmlResourceView extends InternalResourceView {

           @Override

           public boolean checkResource(Locale locale) {

                  File file = new File(this.getServletContext().getRealPath("/") + getUrl());

                  return file.exists();// 判断该页面是否存在

           }

    }

 

根据不同访问设备跳转到PC页面或手机页面方法;


目前很多网站都是采用了响应式自适应页面的设计了,根据访问设备的不同,显示不同的内容。但是还是会有一些节奏比较慢的网站,还是PC页面和手机PAD页面不同的访问域名。

第一个:

 

<script type="text/javascript"> 

var userAgent = navigator.userAgent.toLowerCase();

    var platform;

    if(userAgent == null || userAgent == ''){

        platform = 'WEB' ;

    }else{

        if(userAgent.indexOf("android") != -1 ){

            platform = 'ANDROID';

            location.href = "http://m.kuegou.com/";

        }else if(userAgent.indexOf("ios") != -1 || userAgent.indexOf("iphone") != -1 || userAgent.indexOf("ipad") != -1){

            platform = 'IOS';

            location.href = "http://m.kuegou.com/";

        }else if(userAgent.indexOf("windows phone") != -1 ){

            platform = 'WP';

            location.href = "http://m.kuegou.com/";

        }else{

            platform = 'WEB' ;

            location.href = "http://www.kuegou.com/";

        }

    }

</script>

 

直接上代码,修改代码中你的PC页面和手机页面地址即可。

 

第二个:

 

这一个是两段代码,分别放到PC页面网页和手机页面网页,实现不同设备访问不同页面都能实现调整,比如电脑访问了手机页面的地址也会跳转到PC页面上来。

 

首先是放入PC页面的代码:

 

<script type="text/javascript"> 

var url = window.location.pathname;

var wapurl="http://3g.xxx.com"+url

 

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|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){

                 window.location.href=wapurl;

            }else{

                window.location.href=wapurl;

            }

        }catch(e){}

    }

}

</script>

 

 

下边是放入手机页面的代码:

 

<script type="text/javascript"> 

 

var url = window.location.pathname;

var pcurl="http://www.xxx.com"+url

 

if(/AppleWebKit.*Mobile/i.test(navigator.userAgent)==false || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))==false){

    if(window.location.href.indexOf("?mobile")<0){

        try{

            if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)==false){

                 window.location.href=pcurl;

            }

 

        }catch(e){}

    }

}

</script>