浏览器后退不刷新页面
首先，先在js文件中加入token，作为唯一标识，我自己成为时间戳，单独写一个function在js文件中，因为作为总的文件，可能在loadIFrame中加入很多功能代码
function loadIFrame(url){
token = new Date().getTime();
if(url.indexOf("?")==-1){
url+="?token="+token;
}else{
url+="&token="+token;
}
}
然后当在页面中调用loadIFrame的时候，时间戳就会自动引入在url中了，为了当浏览器点击后退时，不对之前的页面进行刷新。
<li class="oa_todoLi oaList_li" onclick="salaryDetail('+rows[i].month+','+rows[i].year+')"> //rows[i]是我页面的参数，需要传给后台
然后在页面中吧当前页面的数据整体div，存放到sessionstorage中
function salaryDetail(month,year){
var tokenDiv = $("#tokenDiv").html();
sessionStorage.setItem("tokenDiv",tokenDiv);
sessionStorage.setItem("start",start);
sessionStorage.setItem("startDate",startDate);
sessionStorage.setItem("endDate",endDate);
parent.loadIFrame("${ctx}/mobileweb/salary/currentIndex2?month="+month+"&year="+year);
}
当页面刚进行加载的时候，就对时间戳进行判断，是不是和下一次点击的时间戳一致，不一致，则进行引入sessionstorage中的内容即可，不进行刷新操作
var token = ${param.token};
var endDate = "";
var start=0;
$(function(){
//用于存放sessionstorage离线缓存里的内容，不进行再次查询
if(token==parent.token){
parent.loadData("${ctx }/salary/queryListGerenForPage");
}else{
var tokenDiv = sessionStorage.getItem("tokenDiv");
start = sessionStorage.getItem("start");
startDate = sessionStorage.getItem("startDate");
endDate = sessionStorage.getItem("endDate");
$("#tokenDiv").html(tokenDiv);
}
}
这样，就对页面完成了浏览器后退不刷新页面的功能，全部代码如下：
jsp页面代码：
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<c:set var="user" value="${sessionScope.CURRENT_USER}"/>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" href="${ctx}/plugins/mobileweb/web/resources/css/bootstrap.min.css" rel="stylesheet" />
<link type="text/css" href="${ctx}/plugins/mobileweb/web/resources/css/oaCss.css" rel="stylesheet" />
<link type="text/css" href="${ctx}/plugins/mobileweb/web/resources/css/styles.css" rel="stylesheet">
</head>
<body>
<div id="tokenDiv">
<div class=" col-xs-12 col-sm-12 col-md-12 oa_todoContain">
<div class="col-xs-12 col-sm-12 col-md-6"></div>
<div class="oa_todo oaList_container" style="width:100%">
<h3 class="oa_todoTitle">个人工资列表</h3>
<ul class="oa_todoUl oaList_ul"></ul>
<div class="oaList_page">
<a id="oaList_loadMore" class="oaList_loadMore" href="javascript:void(0)" style="display: none">加载更多...</a></div>
<div style="text-align:center">
<img id="oaList_loadImg" style="opacity:0;" src="${ctx}/plugins/mobileweb/web/resources/imgs/loading.gif" /></div>
</div></div>
<!--置顶图标-->
<a id="oa_arrowtTopIcon" class="oa_arrowtTopIcon" href="javascript:scrollTo(0,0);"><i class="glyphicon glyphicon-arrow-up"></i></a>
</div>
</body>
<script type="text/javascript" src="${ctx }/resources/jquery/jquery-1.8.1.min.js"></script>
<script type="text/javascript">
var startDate = "";
var token = ${param.token};
var endDate = "";
var start=0;
$(function(){
//用于存放sessionstorage离线缓存里的内容，不进行再次查询
if(token==parent.token){
parent.loadData("${ctx }/salary/queryListGerenForPage");
}else{
var tokenDiv = sessionStorage.getItem("tokenDiv");
start = sessionStorage.getItem("start");
startDate = sessionStorage.getItem("startDate");
endDate = sessionStorage.getItem("endDate");
$("#tokenDiv").html(tokenDiv);
}
//列表页“加载更多”
$("#oaList_loadMore").click(function(){
$("#oaList_loadMore").css('display','none');
$("#oaList_loadImg").css('opacity',1);
var params={startDate:startDate,endDate:endDate};
parent.loadData("${ctx }/salary/queryListGerenForPage",params);
});
//搜索框页面
var nowYear = new Date().getFullYear();
$(".col-md-6").html('<select class="oaMWage_selectY " id="startYear" style="width:60px;"><option>'+ nowYear +'年</option>'
+'<option>'+ (nowYear-1) +'年</option><option>'+ (nowYear-2) +'年</option></select>'
+'<select class="oaMWage_selectY" id="startMonth" style="width:40px;">'
+'<option>1月</option><option>2月</option><option>3月</option>'
+'<option>4月</option><option>5月</option><option>6月</option>'
+'<option>7月</option><option>8月</option><option>9月</option>'
+'<option>10月</option><option>11月</option><option>12月</option>'
+'</select><span class="oaWageSear_to" style="width:20px;">至</span><select class="oaMWage_selectY" id="endYear" style="width:60px;">'
+'<option>'+ nowYear +'年</option><option>'+ (nowYear-1) +'年</option><option>'+ (nowYear-2) +'年</option></select>'
+'<select class="oaMWage_selectY" id="endMonth" style="width:40px;">'
+'<option>1月</option><option>2月</option><option>3月</option>'
+'<option>4月</option><option>5月</option><option>6月</option>'
+'<option>7月</option><option>8月</option><option>9月</option>'
+'<option>10月</option><option>11月</option><option>12月</option>'
+'</select><a class="oaMWage_sureBtn" href="javascript:void(0)" style="50px;">确定</a>');
//搜索框查询数据
$(".oaMWage_sureBtn").click(function(){
var startYear = $("#startYear").val().replace("年","");
var endYear = $("#endYear").val().replace("年","");
var startMonth = $("#startMonth").val().replace("月","");
var endMonth = $("#endMonth").val().replace("月","");
var startDate = startYear+"-"+startMonth;
var endDate = endYear+"-"+endMonth;
var params={startDate:startDate,endDate:endDate};
$(".oaList_ul").html("");
start =0;
parent.loadData("${ctx }/salary/queryListGerenForPage",params);});
});
function successLoad(json){
var rows = json.rows;
if(start==10){$(".oaList_ul>li").remove();}
if(json.results==0){$(".oaList_ul").append("<li class='oa_todoLi oaList_li' style='text-align:center;border-bottom:0;'>暂时没有查到工资数据</li>");
$("#oaList_loadMore").hide();
}else if(rows&&rows.length>0){
var html="";
for(var i=0;i<rows.length;i++){
$(".oaList_ul").append('<li class="oa_todoLi oaList_li" onclick="salaryDetail('+rows[i].month+','+rows[i].year+')">'
+'<a class="oa_todoName oaList_Link" href="javascript:void(0);">'+rows[i].year+'年'+rows[i].month+'月'+'</a>'
+'<span class="oa_todoTime pull-right oaList_time">'+rows[i].homepay+'</span>'
+'<div class="clearfix"></div>'
+'<div class="oaList_liBc" >'
+'<span class="oaList_key" >'+'应发额：'+rows[i].wages+'</span>'
+'<span class="oaList_readNum" >'+'绩效：'+rows[i].meritPay+'</span>'
+'<span class="oaList_key" >'+'课酬：'+rows[i].keep+'</span>'
+'</div></li>');
}
}return $("body").children().height();
}
function salaryDetail(month,year){
var tokenDiv = $("#tokenDiv").html();
sessionStorage.setItem("tokenDiv",tokenDiv);
sessionStorage.setItem("start",start);
sessionStorage.setItem("startDate",startDate);
sessionStorage.setItem("endDate",endDate);
parent.loadIFrame("${ctx}/mobileweb/salary/currentIndex2?month="+month+"&year="+year);
}
</script>
</html>
时间戳全部代码：
function loadIFrame(url){
//获取点击链接记录,以后用到常用链接里
var linkNameIndex = url.indexOf("linkName=");
if(linkNameIndex!=-1){
var frequentLink ;
if(localStorage.frequentLink){
frequentLink = localStorage.frequentLink.split(",");
var flag = true;
for(var i=0;i<frequentLink.length;i++){
var arr = frequentLink[i].split("`");
if(arr[0]==url){
frequentLink[i]=url+"`"+(parseInt(arr[1])+1);
flag = false;
break;
}
}
//缓存中没有存储链接
if(flag){
frequentLink.push(url+"`1");
}
}else{
frequentLink = [];
frequentLink.push(url+"`1");
}
localStorage.frequentLink = frequentLink.join(",");
}
token = new Date().getTime();
if(url.indexOf("?")==-1){
url+="?token="+token;
}else{
url+="&token="+token;
}
$('#contentIFrame').attr('src', url);
//alert(window.frames['contentIFrame'].history.length);
toTop();
}
