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