浏览器后退强制刷新，不加载缓存

原创 于 2023-05-16 17:06:49 发布 · 613 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #html #前端

这段代码用于监听页面显示事件，如果页面是从缓存中恢复或者被重新加载（前进/后退操作），则会触发location.reload()，确保页面数据的最新状态。 
if (document.addEventListener) {
    window.addEventListener('pageshow', function (event) {
        if (event.persisted || window.performance && 
            window.performance.navigation.type == 2) 
        {
            location.reload();
        }
    },
   false);
}
单页应用后退不刷新解决方案探索：优化前端开发体验
SvqiAnaconda的博客
09-26 407
SPA 的核心特点是在用户与应用程序交互时，只加载一次 HTML 页面，之后的页面切换和数据更新通过 JavaScript 动态完成，从而提供更快、更流畅的用户体验。然而，SPA 在浏览器的前进和后退操作中存在一个常见的问题：后退按钮不会触发页面刷新，导致页面内容和状态不会更新。这样可以保持页面和服务器端的内容和状态一致，提升用户体验。当用户通过后退按钮切换到之前的页面时，浏览器只会还原页面的状态，而不会重新加载页面的内容。这样，当用户点击后退按钮时，页面会重新加载，从而保持和服务器端的内容和状态一致。
uniapp：解决history.back()返回上一页苹果ios不刷新页面、浏览器返回上级页面不刷新数据问题，或不重新加载ready解决办法（强制刷新，适用移动端H5、微信公众号网页微信内置浏览器）
最新发布
高级前端工程师
09-17 4201
IOS微信内置浏览器history.back()；不刷新页面解决办法，uniApp页面history.back()返回上一页，ios 不重新加载ready的解决办法，iOS H5 history.back() 返回上一路由 页面白屏，微信h5页面返回时ios不刷新页面解决方案，苹果手机，ios微信浏览器返回不刷新问题完美解决方法，ios系统history.back()返回却不刷新页面，微信浏览器 点击返回上一页 页面不刷新，解决微信内置浏览器返回上一页强制刷新问题方法，这个只能后退一步不能刷新怎么办，苹果下
从window.history理解浏览器返回不触发页面刷新问题
weixin_42349568的博客
02-28 5181
DOM window 对象通过 history 对象提供了对浏览器的会话历史的访问，它暴露了很多有用的方法和属性，允许你在用户浏览历史中向前和向后跳转，同时——从 HTML5 开始——提供了对 history 栈中内容的操作。
实现不刷新整个页面进行前进后退
热门推荐
細水、長流√的专栏
10-10 1万+
在html5出来前，实现无刷新前进后退通常是结合location.hash+onhashchange事件来实现的； 在html5出来后，可以使用h5 history api来实现无刷新前进后退 点击浏览器的前进后退按钮时，只要将要进入的页面与当前页面不是同一个页面（因为有可能人为地添加了一条历史记录，但实际上还是同一个页面），那么将要进入的页面其所有请求（包括html、js、css、jso
浏览器后退强制刷新
power8988的博客
07-26 3740
浏览器后退强制刷新
点浏览器"后退"按钮后强制刷新页面
′2012
08-29 5748
<% response.setHeader("Cache-Control","no-store"); response.setDateHeader("Expires", 0); response.setHeader("Pragma","no-cache"); %>
手机浏览器 后退按钮强制刷新页面方法总结
09-01
本文将总结几种解决手机浏览器后退按钮强制刷新页面的方法。 首先，我们来看一种常见的尝试，即通过在HTML头部设置禁止缓存的元标签。这种方法的目的是告诉浏览器不要缓存页面，以确保每次访问都是最新的内容。然而...
解决微信内置浏览器返回上一页强制刷新问题方法
08-31
在微信内置浏览器中，用户在返回上一页面时遇到的问题是页面被强制刷新，这会导致AJAX加载的数据丢失，用户体验大打折扣。为了解决这个问题，我们可以利用HTML5的History API结合缓存机制来实现理想的效果，即返回上...
深入理解浏览器的各种刷新规则
10-21
3. Ctrl+F5刷新/Ctrl+Shift+R刷新：强制刷新，浏览器不使用任何缓存，请求头中的`cache-control`设为`no-cache`和`Pragma: no-cache`，要求服务器返回完整的最新资源，状态码通常为200 OK。 4. 后退刷新：在某些...
浏览器后退刷新
u013010427的博客
05-24 3429
问题描述       浏览器自带后退按钮进行返回操作，浏览器返回操作默认读取缓存内容，而我们的需求是重新刷新页面，从服务器重新获取数据。一般使用了ajax进行异步刷新时会碰到这样的问题。 各种语境下解决方法 HTML解决方式 [html] view plain copy pre>           M
浏览器前进、后退键时刷新页面而不读取缓存，重新刷新页面
zziamalei的专栏
05-21 8878
点击浏览器的后退键，总是会读取缓存，这样会导致有时候获取不到页面上的值，如果点击后退键时刷新页面而不读取缓存，这样就不会产生获取不到值的问题。 jsp页面和servlet页面均可以设置。 response.setHeader("Cache-Control","no-cache"); response.setHeader("Pragma","no-cache"); response.setD
手机浏览器后退按钮强制刷新页面方法
lipengaccp的博客
07-29 569
手机浏览器后退按钮强制刷新页面方法
浏览器上按倒退按钮返回时,能重新加载页面
greatljg的博客
06-30 928
浏览器上按倒退按钮返回时,能重新加载页面 作用：在含有验证码的页面上用，挺有用的 ，防止因为没有重新加载验证码，session域中没有验证码的值被传入。（因为往往一旦获得了验证码用于判断后，会立即将验证码的值从session域中删除，防止多次使用。） 转载链接: 链接 代码如下：在html的javascript中加以下代码 window.onpageshow = function (event) { if (event.persisted || (window.performan
浏览器后退不刷新页面
weixin_33912638的博客
04-20 664
首先，先在js文件中加入token，作为唯一标识，我自己成为时间戳，单独写一个function在js文件中，因为作为总的文件，可能在loadIFrame中加入很多功能代码 function loadIFrame(url){ 　　token = new Date().getTime();    if(url.indexOf("?")==-1){        url+="?token="+tok...
浏览器后退不刷新问题
KeBo's Blog
11-30 1852
最近在写博客，当从文章也返回时页面中的浏览次数没有更新（后端数据已更新）， 因为浏览器有缓存，如果是整个页面，可添加几个meta标签。如下 &amp;lt;META HTTP-EQUIV=&quot;pragma&quot; CONTENT=&quot;no-cache&quot;&amp;gt; &amp;lt;META HTTP-EQUIV=&quot;Cache-Control&quot; CONTENT=&quot;n
解决浏览器回退不刷新
weixin_30628077的博客
10-26 524
可以通过监听onpageshow来刷新页面。代码如下，在页面的JS中添加 //后退不执行JS的问题 window.onpageshow = function(event) { 　　if (event.persisted) { 　　　　window.location.reload(); 　　} }; event.persisted为了查看页面是直接从服务器上...
进入页面强制刷新不使用缓存
oak_javaLearner的博客
06-16 2106
缓存是一个神奇的东西，一方面它可以提高访问效率，不用每次进入页面都重新加载所有的JS等文件；而另一方面，浏览器缓存给程序猿们或者项目甲方的用户们带来很不好的体验【例如数据不刷新，数据不准确等等】 昨天接到需求，需要将两个页面的HTML修改一下，每次进入页面都直接刷新不使用缓存，实现方式如下： 原来的html是这样引用JS文件的： <script src="js/TEST_DEMO.js"></script> 修改后的html是这样引用JS文件的： <script>
页面返回时，进行强制刷新
weixin_57092157的博客
03-30 362
(用户通过常规导航方式访问页面,比如点一个链接，或者一般的get方式.)(用户通过刷新,包括JS调用刷新接口等方式访问页面)(用户通过后退按钮访问本页面)
不加载执行js_浏览器通过导航栏按钮后退前进时页面js不执行（浏览器的back-forward cache）...
weixin_33509600的博客
01-09 503
问题描述：若存在一个页面包含超链接，点击跳转之后，此时点击浏览器的后退按钮的话，页面是不会重新渲染的（js什么的是不会再执行的，页面也不会重新挂载，通过观察 window.addEventListener('load',handler) 这里的handler不执行可以得出），这是因为浏览器的“往返缓存(back-forward cache - bfcache)”特性。问题根源：back-forw...
后退 强制刷新
05-30
### 浏览器后退时强制刷新的实现方式 在Web开发中，浏览器后退按钮的行为可能会导致页面内容未及时更新或重新加载。为了解决这一问题，可以采用多种技术手段来确保浏览器后退时页面能够强制刷新。以下是几种常见的实现方式： #### 1. 使用HTTP头信息禁用缓存 通过设置HTTP响应头，可以告知浏览器不要缓存当前页面，从而在用户点击后退按钮时强制从服务器重新加载页面。这种方式适用于所有主流浏览器[^3]。 ```java <% response.setHeader("Cache-Control", "no-store"); // HTTP 1.1 response.setDateHeader("Expires", 0); // Proxies response.setHeader("Pragma", "no-cache"); // HTTP 1.0 %> ``` 上述代码片段通过设置`Cache-Control`、`Expires`和`Pragma`头信息，确保页面不会被缓存，每次访问都会重新加载。 --- #### 2. 使用JavaScript监听页面状态变化 通过监听页面的`pageshow`事件，可以检测到用户是否通过后退按钮进入页面，并根据需要执行强制刷新操作。这种方法特别适用于现代浏览器[^4]。 ```javascript window.addEventListener('pageshow', function(event) { if (event.persisted) { // 如果页面是从缓存中加载的，则强制刷新 location.reload(); } }); ``` 当用户通过浏览器后退按钮返回页面时，`event.persisted`属性会被设置为`true`，此时可以通过调用`location.reload()`方法强制刷新页面。 --- #### 3. 设置Meta标签禁用缓存 如果无法直接修改服务器端的HTTP响应头，可以在HTML页面中插入Meta标签，以禁用浏览器缓存。这种方式简单易用，但效果可能不如HTTP头信息强大[^1]。 ```html <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Expires" content="0"> ``` 这些Meta标签的作用与HTTP头信息类似，可以指示浏览器不要缓存当前页面。 --- #### 4. 结合Cookie或其他存储机制 在某些场景下，可能需要结合前端存储（如Cookie或LocalStorage）来判断页面是否需要刷新。例如，可以通过在页面加载时检查特定的标志位，决定是否执行刷新操作[^4]。 ```javascript $(function() { var e = $("#option_teacher"); var uname = JSON.parse($.cookie("userinfo")).TeacherInfo.UserName; if (uname) { if (e.val() == "no") { $('#option_teacher').html(uname); } else { location.reload(); // 强制刷新页面 } } }); ``` 此代码片段在页面加载时检查用户信息是否存在，并根据条件决定是否刷新页面。 --- #### 注意事项 - **兼容性**：不同浏览器对缓存控制的支持可能存在差异，因此建议结合多种方法以确保最佳效果。 - **性能影响**：强制刷新会增加服务器负载并可能导致用户体验下降，应谨慎使用。 - **安全性**：禁用缓存可能会暴露敏感数据，需确保页面内容的安全性。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值