首页 > 浏览器后退按钮和前进按钮

浏览器后退按钮和前进按钮

当我使用onpopstate监听浏览器的后退和前进的时候,让页面刷新,但是浏览器加载的时候还是从缓存中加载,没有刷新页面中的数据。你们处理过这样的程序么?


的确是那样的,在移动端,某些设备,某些浏览器会出现这种情况。

采取的方式是重新加载,这里的重新加载有两种情况。
第一种是重新加载整个页面,添加一个重新加载的标记,这种情况体验不好。
第二种是重新加载局部内容,比如整个视图分为A,B,C三个区域,C区域是通过动态加载的,C的内容会发生变化。由于缓存的缘故导致,C还是没有变化之前的内容。这里,你就需要重新加载C区域的内容。

顺便说一下,在我实现的pm.mobi框架中实现了对于这种情况的处理(框架内没有说明,只是提供了一个视图切换时的reload方法,在reload方法中可以对局部视图进行处理)。
pm.mobi框架地址:
https://github.com/donghanji/pm.mobi
pm.mobi框架demo(很丑陋):
https://github.com/donghanji/pm.demo/tree/master/pm.mobi.test

实际项目举例(这是我在处理一个实际的项目中的部分代码):

mobi.view({
    el:'#index_view_one',
    initialize:function(){
        //
        self.loadFooter();
    },
    mobis:{
        perload:function(){

            this.loadFooter();
        },
        reload:function(){

            this.loadFooter();
        }
    },
    loadFooter:function(){
        //
        $('<div/>').load('/Index/tpl_view?tpl=global_footer_one&t='+new Date().getTime(),function(content){

            $('[data-role="global-footer"]').html($(content).html());
        });
    }
    

其中loadFooter中处理的就是需要重新加载的局部区域。

【热门文章】
【热门文章】