码迷,mamicode.com
首页 > 其他好文 > 详细

关于浏览器回退默认行为的研究 回退保存页面状态

时间:2018-08-31 23:32:16      阅读:378      评论:0      收藏:0      [点我收藏+]

标签:资源   数据   oca   优点   其他   收获   需求   解决方案   翻页   

缘起:最近在研究 移动端的页面研发工作,由于之前从来没有专业开发过移动端页面,所以在开发过程中,可以说是处处有精彩,处处有收获.最让我意外的是,浏览器页面回退问题 就是个头疼的问题.

需求:我们的需求是,在a页面,打开b页面,之后b再回退到a页面,a页面仍然能保持 a刚刚打开b页面时的状态.

分析过程:最开始接到这个需求,觉得这也不是啥大需求啊,浏览器默认行为,就能支持吧,经过测试后,发现有的浏览器支持,有的不支持。有的页面支持,有的页面不支持,可以说,比较懵,最后决定,先分析一些基本的浏览器知识,之后再思考.

分析结果:
经过了长时间的分析后,对浏览器行为有了一个较深的了解,经验如下:

一.浏览器会记住页面滚动条位置的行为:
1.a页面为静态资源页面,当a打开b页面时,页面会记录滚动条位置.
2.a页面使用ajax请求数据,切ajax是同步请求,且页面其他ajax请求都遵循此规则时生效.
只要记住这两个规则,在开发时就会有一个清晰的思路.

二.解决方案总结:
1.可以使用单页应用的模式,进行开发,原理是 hash 路由. #
2.可以借用localstorage缓存,在a页面打开b时,记录页面元素位置,及页面元素,之后在回退时,直接从缓存中读数据.
3.可以借助 浏览器记住页面状态行为来解决.直接输出静态页面,优点时,无需控制行为,无需写多余的业务,去控制页面的行为.

我采用的方式是,页面借助 c# mvc razor技术,静态输出,之后用点击下一页,因为ajax不太好控制,翻页.分析了许多大厂的页面,也没太研究透,只是看他们都是静态页面输出。如果大家有更好的方式,可以评论哦,共同进步,互相学习.

关于浏览器回退默认行为的研究 回退保存页面状态

标签:资源   数据   oca   优点   其他   收获   需求   解决方案   翻页   

原文地址:http://blog.51cto.com/7865145/2167887

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!