今天修改一个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页面当中的引用路径改成绝对路 径。这样问题就解决了。自己笔记一下。