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

论坛 期权论坛 脚本     
匿名技术用户   2021-1-3 13:37   11   0

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

分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:7942463
帖子:1588486
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP