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

转载于:https://www.cnblogs.com/zrui-xyu/p/4442127.html

浏览器后退不刷新页面相关推荐

  1. java禁止ie后退_Java开发网 - 【讨论】html页面禁用右键，浏览器后退、刷新，以及相应快捷键...

    Posted by:lisliefor Posted on:2006-06-15 21:36 前些天交付一个系统时,客户提出新要求回车等同于Tap键的功能,并能提交表单:禁用鼠标右键:禁用浏览器后退. ...

  2. 浏览器前进后退静默刷新页面

    浏览器前进后退静默刷新页面 开发过程中总会遇到一些浏览器返回.前进和前进后退静默刷新页面,使得每次进页面获取到的数据都是最新的,但用户体验又比较好的体验. 这里整理一些常用的js操作方式: windo ...

  3. vue，vue-router实现浏览器返回不刷新页面

    转载于https://www.cnblogs.com/leejay6567/p/9096187.html 当我们在写单页应用的时候,前端路由采用vue-router实现,如果从页面A跳到页面B,然后点 ...

  4. 微信浏览器无法使用reload()刷新页面 gif图兼容性

    场景1 是这样子的,页面有一个ajax请求,在页面上有一个按钮,点击的时候执行window.location.reload(),正常情况reload()后页面依然会向后台发出请求,但在安卓的微信浏览器 ...

  5. Chrome浏览器如何强制刷新页面(不使用缓存)？

    在Chrome浏览器中按下F5或 Ctrl+F5 都没用,Chrome总是会强制使用页面缓存进行刷新,如何不使用页面缓存进行刷新? Chrome官方推荐使用如下快捷键,就可以不使用页面缓存进行刷新 W ...

  6. 解决微信浏览器无法使用reload()刷新页面

    场景是这样子的,页面在初始化时有一个ajax请求,在页面上有一个按钮,点击的时候执行window.location.reload(),正常情况reload()后页面依然会向后台发出请求,但在安卓的微信 ...

  7. Html5禁止浏览器后退,多页面网站禁用浏览器后退键

    如标题友,记基开前不接些前家我告对猿果水使钮控所说,本文提供的方法适用于多页面网站,如SPA单页面应朋支不器几事为的时后级功发发来久都这样含制层是请些间例业多在上屏屏有到随用等不适用. 利用w不的期是 ...

  8. html页面禁止返回代码,多页面网站禁用浏览器后退键

    如标题所说,本文提供的方法适用于多页面网站,如SPA单页面应用等不适用. 利用window.onpopstate和window.history.pushState 控制浏览器后退键失效,下面说一下如何 ...

  9. js实现刷新页面的方法

     js 刷新当前页面的方法: reload() 方法; replace() 方法; 页面自动刷新; window.history.go(0) document.execCommand(''Refres ...

最新文章

  1. sqlite的速度_内存不够用还要速度快，终于找到可以基于 File 的 Cache 了
  2. nginx 停止服务方法
  3. 学习笔记Hive（四） —— Hive应用（2）—— Hive导入及导出数据
  4. 广度优先搜索（入门）
  5. ASP.NET Core中的依赖注入（4）: 构造函数的选择与服务生命周期管理
  6. java 取随机正整数_Java获取随机数
  7. 深度解析 | 基于DAG的分布式任务调度平台：Maat 1
  8. 越烧钱越上瘾，年轻人为何沉迷「白色鸦片」？
  9. python怎么换行继续写脚本_python怎么换行继续写脚本
  10. linux for循环原理,linux for循环
  11. 23种设计模式(0)——概述
  12. WIN10 未安装音频设备输出设备 喇叭红叉
  13. 大数据营销咨询公司AIO获数百万美元天使轮融资
  14. 2022年双十二拼多多百亿补贴有活动吗?如何领红包?
  15. AI作曲的诺亚方舟将去往何处
  16. 2021年焊工（初级）新版试题及焊工（初级）考试技巧
  17. 数据库实体间关联关系：一对一、一对多、多对多
  18. 驾考一点通维语版_驾考宝典维语版
  19. 老男孩python全栈开发视频教程_老男孩Python全栈开发（92天全）视频教程 自学笔记18...
  20. 机器学习之路(四)之感知机算法PLA

热门文章

  1. 在一切都是虚的世界里，你能做的是什么？
  2. SCCM报表点和SQL Server的报表服务集成, 随心所欲创建报表？
  3. 服务器装系统后没有移动硬盘盘符
  4. 一位校长写给大学学生的一封信
  5. 对makefile中:单冒号普通规则和::双冒号规则的理解 -转
  6. ipv6 华为交换机 路由配置_华为模拟器ipv6接口配置
  7. L1-014. 简单题-PAT团体程序设计天梯赛GPLT
  8. curl模拟http发送get或post接口测试
  9. 《SPSS 统计分析从入门到精通（第2版）》一6.3 二项式检验
  10. JavaScript——BOM知识