首先，先在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();
}