今天修改一个Bug,让我很不理解的问题,前说一下背景:
项目当中一个活动页面,是在手机端显示的,没有用HTML5只是使用了JSP文件来实现,首现有A、B两个页面,A页面为HTML页面(此页面是根据一个模板生成出来的HTML页面,放在服务器上可以正常访问与各种连接点击),B页面为JSP活动页面(此页面当中有相关请求到服务器以便进入活动)。
再说一点,A页面当中有一个<a>标签,点击A标签进入后台转向到B页面进行话动,三大框架的项目的应用多的不说了,重点看下面分析。
经过后台的跳转后到B.jsp页面,B页面里的样式与相关引用JS都失效了,使用Firebug查看B页面<head>标记里的所有样式与JS都被替换成了A.html页面的样式,如下代码:
A.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="expires" content="0"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="#href#web/htmlFile/css/jquery.mobile.structure-1.3.2.min.css"> <style type="text/css"> .contentDiv p{ text-indent:0pt;} .ui-li-heading{white-space:normal} </style> <script src="#href#web/htmlFile/js/jquery-1.10.2.min.js"></script> <script src="#href#web/htmlFile/js/jquery.mobile-1.3.2.js"></script> <script language="javascript"> $(document).bind('mobileinit', function() { $.mobile.loader.prototype.options.text = "加载中..."; $.mobile.loader.prototype.options.textVisible = false; $.mobile.loader.prototype.options.theme = "a"; $.mobile.loader.prototype.options.html = ""; }); </script> </head> <body> //省略各种代码 </body> </html>
B.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/"; %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="HandheldFriendly" content="true" /> <meta http-equiv="x-rim-auto-match" content="none" /> <meta name="format-detection" content="telephone=no" /> <link rel="stylesheet" href="<%=basePath%>activity/css/activity_01.css" type="text/css"> <script src="<%=basePath%>js/jquery-1.4.4.min.js"></script> <script src="<%=basePath%>js/jquery.json-2.3.min.js"></script> <script type="text/javascript"> var basePath = '<%=basePath%>'; var nm = '${num}'; function getActivity(){ try{ $("#getBottom").css("background","none repeat scroll 0 0 #ABABAB"); $.post("请求后台",{num:nm},function(data){ var da = $.evalJSON(data); if(da.success=="true"){ switch(parseInt(da.type)){ case -1://异常情况 $("#getActivity").css("display","none");//隐藏领取界面 $("#ExceptionActivity").css("display","inline");//显示失败界面 break; case 0://领取失败 $("#getActivity").css("display","none");//隐藏领取界面 $("#bustActivity").css("display","inline");//显示失败界面 $("#buttonClass").css("background","none repeat scroll 0 0 #ABABAB"); timeRun60(); break; case 1://已经领取过 $("#presented").css("display","inline"); $("#getActivity").css("display","none");//隐藏领取界面 //window.location.href="请求后台"; break; case 2://领取成功 $("#getActivity").css("display","none");//隐藏领取界面 $("#trueActivity").css("display","inline");//显示界面 timeRun30(); break; } }else{ //领取失败进入再次领取界面 $("#getActivity").css("display","none");//隐藏领取界面 $("#bustActivity").css("display","inline");//显示失败界面 $("#buttonClass").css("background","none repeat scroll 0 0 #ABABAB"); timeRun60(); } }); }catch(e){//异常情况 $("#getActivity").css("display","none");//隐藏领取界面 $("#ExceptionActivity").css("display","inline");//显示失败界面 } } //3秒后跳转 function fn30() { var num = document.getElementById('numTime'); var n = num.innerHTML; if (--n) { num.innerHTML = n; setTimeout(fn30, 1000); } if(n==1){ queryShare(); } } //60秒后跳转 function fn60() { var num = document.getElementById('numTime60'); var n = num.innerHTML; if (--n) { num.innerHTML = n; setTimeout(fn60, 1000); } if(n==1){ window.location.href="请求后台"; } } //60秒后跳转 function timeRun30(){ setTimeout(fn30, 1000); } //3秒后跳转 function timeRun60(){ setTimeout(fn60, 1000); } //直接跳转到分享界面 function queryShare(){ $("#trueActivity").css("display","none");//隐藏界面 window.location.href="请求后台"; } </script> </head> <body> //省略各种代码 </body> </html>
代码有一些多,不过这样才能与下面的诡异现象成对比,请看下面Firebug观察的代码,有图有真像
A.html
点击请求地址通过服务器跳转到B.jsp页面,如下图:
问题已经说出来了,在网上搜了一下也没有找到解决方法,最后自己在调试与解决过种中,将服务器上存放A.html页面文件夹下的JS与CSS样式删除, 这些样式与JS是A.html页面所依赖的,不过删除就好了,我只好把样式与JS文件放到Tomcat当中,将A.html页面当中的引用路径改成绝对路 径。这样问题就解决了。自己笔记一下。
相关推荐
10秒后页面自动跳转
javascript实现页面5秒后自动跳转到首页或其他页面
js页面跳转js页面跳转js页面跳转js页面跳转
5秒自动跳转页面,显示倒计时时间,时间可以调整
php页面跳转php页面跳转php页面跳转php页面跳转php页面跳转php页面跳转php页面跳转php页面跳转php页面跳转php页面跳转php页面跳转php页面跳转php页面跳转php页面跳转
页面跳转 对于网站的用户注册模块考虑如下:当用户注册成功以后,把注册信息显示给用户,然后从这个页面自动跳转到登录页面
有时业务需求或系统内部发生错识发理性的跳到一个页面由它处理,这时会根据你设定的时间跳到指定的页面中去,良好的改善用户体验,减少系统出错
跳转3秒后自动返回该页面 点击提交 跳转到提示页面 3秒后自动返回提交页面。
今天看视频学习时学习了一种... 2、有时我们需要有点提示,比如“x秒后自动跳转,若没有跳转,请点击此处”,则可以在myeclipse中调用Snippets中的Delay Go To URL.会自动生成如下代码: 代码如下: [removed] <!– //
在网站有很多需要跳转的页面,而我们又需要动态地在主页面中加载子页面时,就会用到这门技术。以我们公司现在这个项目为例,前台是由FLEX实现,整个系统可能只有几个application组成,所有的功能点均由module实现,...
页面跳转问题页面跳转问题页面跳转问题页面跳转问题页面跳转问题页面跳转问题页面跳转问题页面跳转问题页面跳转问题
404页面2秒内自动跳转到首页 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ; charset=utf-8" /> 很抱歉,网站搬新家啦! ...
能够实现web页面的跳转与自动刷新,自动跳转等。针对每一种实现方法,里面都有具体的实例。
漂亮的404自动跳转页面,网页错误自动跳转。
qt-quick实现QML页面跳转。支持单页面跳转和多页面跳转。分单页面跳转跟多页面跳转。
自动刷新页面+自动跳转和关闭: JavaScript是一种扩展到HTML的脚本设计语言,它使网页开发者可以更有效地控制页面
Javaweb 登录页面自动跳转
js实现页面跳转的几种方式
页面跳转,权限判断的实例代码
页面跳转的动画效果