解决点击浏览器返回按钮回到上一页面，页面变为初始界面的问题（java+html）

时间：2022-10-05 19:52:13

最近运营反馈一个项目的视频筛选功能存在一个问题，就是用户进入视频管理界面（姑且这么称呼吧），选择了筛选条件后，点击筛选结果中的某一个视频跳到播放页面，当用户点击浏览器/手机的返回按钮时，发现跳转回的页面并没有保留之前选定的筛选条件，而是显示了第一次进入该页面的样子，这样的用户体验并不好，需要优化下：

一开始，想到的是把每次请求视频列表的筛选条件都存到session中，然后当每次加载页面时，在请求的接口中，去session中看看有没有存储相关筛选条件，有则取出使用，无则把新的筛选条件存进session，继续执行筛选操作。

思路没毛病，但真正执行时却发现，当点击返回按钮返回页面时，并没有去请求接口，这样上述的操作就无法执行到了。第一反应就是应该页面上有啥地方没写好，由于没有前端开发人员，只能自己琢磨，各种加onload，加setTimeout，$(function() {***})，浏览器后退事件监听加history.go(-1)之类的都试了一遍，都不行，上百度找了一通，很多也不适用，最后终于看到一个大神提到的设置页面为不缓存，一试，果然OK，所加代码如下：

前端：
<head>
      <pre>    
           <META HTTP-EQUIV="pragma" CONTENT="no-cache">    
           <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">    
           <META HTTP-EQUIV="expires" CONTENT="0">    
        </pre>
        //据大神说，如果不加下面这块script，当使用浏览器上默认的返回时并不能让浏览器刷新，还需要使用js控制
        //由于window.name在浏览器刷新后会仍然保存,所以可以用window.name来判断页面是否已经刷新过
       <script type="text/javascript">
             if(window.name!="hasLoad"){    
                   location.reload();    
                   window.name = "hasLoad";    
             }else{
                   window.name="";    
             }
         </script>
</head>

后端：
if (request.getProtocol().compareTo("HTTP/1.0") == 0){    
        response.setHeader("Pragma","no-cache");    
}else if (request.getProtocol().compareTo("HTTP/1.1") == 0){    
        response.setHeader("Cache-Control","no-cache");    
}

这里的方法只适用于java+html，还有其他的包括PHP、JSP等，

详看这条博客：http://blog.csdn.net/panruifang/article/details/46328863

权当一次知识记录，为了下次看能知道是遇到什么场景，写得有点啰嗦了。不过 还是要感谢下大神@Amy潘潘

标签：

相关文章