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

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

成都创新互联主营吉安网站建设的网络公司,主营网站建设方案,app软件开发,吉安h5微信小程序搭建,吉安网站营销推广欢迎吉安等地区企业咨询

需求:我们的需求是,在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不太好控制,翻页.分析了许多大厂的页面,也没太研究透,只是看他们都是静态页面输出。如果大家有更好的方式,可以评论哦,共同进步,互相学习.


网站标题:关于浏览器回退默认行为的研究回退保存页面状态
网站路径:http://myzitong.com/article/pphsih.html