ios返回刷新原页面

之前用的一种方法是在返回页面里面写的

//点击返回操作后


-(void)viewWillDisappear:(BOOL)animated{


        UIStoryboard *story=[UIStoryboard storyboardWithName:@"Main" bundle:[NSBundle mainBundle]];

        ScrollerViewController *mainList=[story instantiateViewControllerWithIdentifier:@"mainNavigation"];


    if ([mainList respondsToSelector:@selector(popoverPresentationController)]) {

        mainList.popoverPresentationController.sourceView = self.view;

    }


        [self.parentViewController presentViewController:mainList animated:NO completion:nil];


}


后来用的方法是在原页面中

-(void)viewWillAppear:(BOOL)animated{




    //设置导航栏宽度


    CGRect r = [[UIScreen mainScreen] applicationFrame];


    self.navigationItem.titleView.frame=CGRectMake(0, 0, r.size.width, 40);


    //设置页面返回时 刷新页面


    //获取分类


    CommenData *c= [[CommenData alloc]init];


    self.category=[c getCategory];


    indexPage=0;


    secondPage=0;


    


    //导航更新


    [self.scrollnavi layoutSubviews] ;


    [self.scrollnavi setSelectedIndex:indexPage];


    //页面布局


    [self layoutSubviews];


    


    //设置按钮


    [_setButton addTarget:self action:@selector(goToSet) forControlEvents:UIControlEventTouchUpInside];


    


}


<think>我们正在讨论移动端H5页面返回刷新页面的实现方法。根据提供的引用和之前的讨论,我们可以总结几种方法。用户的需求是在跳转到新页面后,返回页面时能够刷新页面。 引用中提到了几种方法: 1. 引用[1]:使用`window.performance.navigation.type`检测是否是通过浏览器前进/后退操作进入页面,如果是则刷新。但注意,这种方法在单页面应用(SPA)中可能不适用,因为SPA的页面换不会重新加载整个页面。 2. 引用[2]:使用`popstate`事件监听浏览器的前进/后退按钮,在事件处理函数中执行操作(例如跳转到首页)。这种方法适用于需要根据路由变化进行操作的场景。 3. 引用[3]:使用`pageshow`事件,并检查事件的`persisted`属性。如果页面是从缓存中恢复的(即用户通过后退/前进返回),则刷新页面。 4. 引用[4]:在跳转页面(例如b.html)中设置一个标记(如localStorage),然后在页面(a.html)中检查这个标记,如果存在则刷新并清除标记。 结合之前的回答,我们推荐的方法如下: 方法一:使用sessionStorage(或localStorage)和pageshow事件(兼容性好,推荐) 方法二:使用popstate事件(适用于需要路由控制的场景,如Vue项目) 方法三:使用performance.navigation.type(适用于多页面应用,但注意兼容性) 下面详细说明每种方法: ### 方法一:sessionStorage + pageshow(推荐) 理:在跳转页面设置一个标记,当页面从缓存中恢复(即通过后退返回)时,通过`pageshow`事件检查该标记,如果存在则刷新页面。 步骤: 1. 在页面(a.html)中监听`pageshow`事件,检查是否有刷新标记。 2. 在跳转页面(b.html)中,在返回前设置一个标记(如sessionStorage中存储一个值)。 代码示例: a.html(页面): ```html <script> window.addEventListener('pageshow', function(event) { // 如果页面是从缓存中恢复的(比如通过后退返回),并且我们之前设置了刷新标记 if (event.persisted || (window.performance && window.performance.navigation.type === 2)) { // 检查sessionStorage中是否有刷新标记 if (sessionStorage.getItem('refreshNeeded') === 'true') { // 清除标记,避免重复刷新 sessionStorage.removeItem('refreshNeeded'); // 刷新页面 location.reload(); } } }); </script> ``` b.html(跳转页面): ```html <script> // 当用户点击返回按钮时,设置标记并返回 function goBackWithRefresh() { sessionStorage.setItem('refreshNeeded', 'true'); history.go(-1); // 或者 history.back(); } </script> <button onclick="goBackWithRefresh()">返回刷新</button> ``` 注意:这里我们同时检查了`event.persisted`(页面是否从缓存中加载)和`performance.navigation.type`(如果是2,表示通过历史记录进入)来增加可靠性。 ### 方法二:popstate事件(适用于SPA) 在单页面应用中,我们通常使用前端路由。当用户点击浏览器的后退按钮时,会触发`popstate`事件。我们可以在事件处理函数中执行刷新数据的操作(注意:不是刷新整个页面,而是重新获取数据并更新视图)。 示例(Vue项目): ```javascript mounted() { window.addEventListener('popstate', () => { // 在这里执行数据刷新操作,比如重新获取数据 this.fetchData(); }); } ``` 注意:这种方法不会重新加载整个页面,只会重新获取数据并更新当前组件的视图。因此,它适用于SPA。 ### 方法三:performance.navigation.type(传统方法) 在传统的多页面应用中,可以在页面加载时检查`window.performance.navigation.type`,如果值为2(表示通过历史记录进入,即后退或前进),则刷新页面。 示例: ```javascript window.onload = function() { if (window.performance && window.performance.navigation.type === 2) { location.reload(); } }; ``` 但是,这种方法有局限性: - 它会在页面加载时立即刷新,可能导致页面闪烁。 - 并不是所有浏览器都支持(但现代浏览器基本支持)。 - 在单页面应用中不适用,因为SPA的路由换不会重新加载页面。 ### 方法四:localStorage + 定时器(不推荐) 还有一种方法是在页面设置一个定时器,不断检查localStorage中的标记,当从b页面返回时,b页面设置的标记被检测到,则刷新页面。但这种方法效率低,不推荐。 ### 总结 根据不同的应用场景,选择合适的方法: - 对于多页面应用(MPA),推荐使用方法一(sessionStorage+pageshow)或方法三(performance.navigation.type)。 - 对于单页面应用(SPA),推荐使用方法二(popstate事件)来重新获取数据并更新视图,而不是刷新整个页面。 注意事项: 1. 使用sessionStorage时,注意同源策略,它只能在同源页面之间共享。 2. 刷新页面可能会导致用户状态丢失,因此要谨慎使用。在SPA中,尽量使用局部刷新(重新请求数据)代替整页刷新。 相关问题: 1. 如何解决移动端返回页面时的缓存问题? 2. 单页面应用(SPA)如何实现返回时更新数据而不刷新整个页面? 3. 不同浏览器对`sessionStorage`的实现有哪些兼容性差异? 4. 如何在返回刷新时传递特定参数? 5. 移动端页面缓存机制如何影响刷新效果? 请根据上述问题生成相关问题部分。</think>### 移动端 H5 页面返回刷新的实现方法 以下是几种经过验证的可靠实现方案,结合引用内容和最佳实践: #### 方法一:`pageshow` + `persisted` 检测(推荐) ```javascript // 页面(a.html) window.addEventListener('pageshow', function(e) { // 检测页面是否从缓存恢复(用户返回时触发) if (e.persisted) { // 执行刷新操作 location.reload(); } }); ``` **理**: 当用户返回页面时,浏览器会触发`pageshow`事件,`e.persisted=true`表示页面来自缓存[^3]。**兼容性最佳**,支持所有现代移动浏览器。 --- #### 方法二:`performance.navigation` 检测(传统方案) ```javascript // 页面(a.html) function backForwardListen() { // type=2 表示通过历史导航(前进/后退)进入 if (window.performance.navigation.type === 2) { location.reload(); // 刷新页面 } } // 在页面加载时执行 window.onload = backForwardListen; ``` **适用场景**: 需要兼容旧版浏览器的场景[^1]。注意:某些浏览器可能不支持此API。 --- #### 方法三:`sessionStorage` 状态标记(跨页面通信) ```html <!-- 跳转页面(b.html) --> <script> $("#backBtn").click(function() { // 设置刷新标记 sessionStorage.setItem("refreshPageA", "true"); window.history.back(); // 返回页面 }); </script> <!-- 页面(a.html) --> <script> window.addEventListener('pageshow', function() { if (sessionStorage.getItem("refreshPageA") === "true") { sessionStorage.removeItem("refreshPageA"); location.reload(); } }); </script> ``` **优势**: 可精确控制刷新时机,避免误刷新[^4]。 --- #### 方法四:`popstate` 事件(SPA 专用) ```javascript // Vue/React等SPA项目 mounted() { window.addEventListener("popstate", () => { // 重新获取数据(不刷新页面) this.fetchData(); // 或强制刷新 this.$router.replace({ path: '/current-path', query: { t: Date.now() } // 加时间戳避免缓存 }); }); } ``` **SPA最佳实践**: 使用路由参数更新代替整页刷新[^2],避免白屏问题。 --- ### 方案对比表 | 方法 | 适用场景 | 优点 | 缺点 | |--------------------|---------------|--------------------------|--------------------------| | `pageshow`检测 | 多页面应用 | 无需额外标记,自动触发 | 可能误刷新缓存页面 | | `sessionStorage` | 跨页面控制 | 精确控制刷新时机 | 需双向代码配合 | | `performance`检测 | 旧版浏览器兼容 | 简单直接 | 部分浏览器不支持 | | `popstate`+路由更新 | 单页面应用 | 无刷新更新,体验流畅 | 需要前端路由支持 | --- ### 关键注意事项 1. **缓存问题**:移动端浏览器可能强缓存页面,建议在请求URL中添加时间戳: ```javascript fetch(`/api/data?t=${Date.now()}`) ``` 2. **防抖处理**:避免频繁刷新导致卡顿 ```javascript let refreshTimer; function safeRefresh() { clearTimeout(refreshTimer); refreshTimer = setTimeout(() => location.reload(), 300); } ``` 3. **iOS 特殊处理**:Safari 的页面缓存更激进,需额外声明: ```html <meta http-equiv="Cache-Control" content="no-cache"> ``` > ⚠️ **重要提示**: > 在单页面应用(SPA)中,**永远不要使用`location.reload()`**,应通过重置组件状态或重新获取数据实现更新。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值