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