页面跳转后自动改变目的页面头信息

yeshuang

浏览: 191777 次
性别:
来自: 重庆

最近访客更多访客>>

ybbfufv

qq113220715

Luther

wxyit163

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

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