缘起:最近在研究 移动端的页面研发工作,由于之前从来没有专业开发过移动端页面,所以在开发过程中,可以说是处处有精彩,处处有收获.最让我意外的是,浏览器页面回退问题 就是个头疼的问题.
需求:我们的需求是,在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不太好控制,翻页.分析了许多大厂的页面,也没太研究透,只是看他们都是静态页面输出。如果大家有更好的方式,可以评论哦,共同进步,互相学习.
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。