window.history 和 DWZ 框架

DWZ框架的ajax请求返回的一般都是一个HTML片段,整个页面是由一个个HTML片段组成的,可以由TAB切换其内容,但是只有一个body和HEAD,一般head 和 菜单栏是不会动的。

今天遇到一个问题,当一个点击进入一个tab页面时,这个tab页的布局完全和其他页面的tab页面不一致,也就是其菜单栏和head的内容完全改变了。当用户要返回原来的样式时候,用自己写的JS方法把样式还原可以。但是是页面上的一个button。

当用户用浏览器自带的前进后退返回的时候,问题来了,因为浏览器的前进后退是根据浏览历史的缓存来的(暂且这么理解吧)。这个历史是一个数组来储存的。前进就是显示后一个的历史,后退就是前一个的。当然,都是如果list支持的情况下;

浏览器的前进后退会触发页面的 onunload 和 onbeforeunload 事件 在使用event.returnValue("string")就会弹出你想要的警告。

由于正常的浏览器history是一个个完整的页面,前进后退按钮会触发其onunload等事件,但是DWZ这种框架不会,因为你始终在一个页面上进行操作。当然不会触发onunload等事件。前进后退只会显示历史的HTML片段。

那么,在点击后退后 页面样式变形等问题出现了,使用setInterval 判断这个tab的父元素是否显示来判断是否回到原来页面。样式能还原,但是多前进后退几次就要出现问题。

暂时的解决方法,让其history一直在最后就是每次点击后退返回后让其window.history.go(1);要返回前面的页面。

原文地址:https://www.cnblogs.com/strangerqt/p/4009968.html