曾经踩过的坑--浏览器兼容-history

一、history

1.一、页面布局：

典型的上中（左右）下布局。主要用的 是frameset和frame。

 

 1 <frameset name="total" col="10%,80%,10%">
 2 
 3 <frame name="top" src="top.html"/>
 4 
 5 <frameset name="content"  >
 6 
 7 <frame name="left" src="left.html"/>
 8 
 9 <frame name="right" src="right.html"/>
10 
11 </frameset>
12 
13 </frameset>

 

1.二、坑的表现(ie浏览器)：

    IE中点击左边栏选项，右边的content页面相应改变。在content中点击超连接改变content的src，经过history.back()返回上一个content的界面失败(IE浏览器下)。

    操做流程：

     点击左边栏选项1，则content变为c1页面。而后点击选项2，则对应c2页面。

     此时在c2中放置超连接，改变name="right"的frame页面内容，c2变为了c3.可是点击浏览器的返回箭头 -->，返回的是c1界面而非c2.同理，在c3界面上放置了一个返回button。button添加click事件：history.back().此时点击返回按钮时也会返回到错误的c1界面。

1.三、对坑的猜测

history不一样浏览器对其记录产生认定方式不一样。

我猜IE浏览器对这个frame中经过超连接改变frame内容的方式不予记录，至关于history当前没有c2跳到c3的记录，认为当前处于c2状态。于是致使了history.back时跳转到了c1.

查找资料所得：http://benalman.com/code/projects/jquery-hashchange/examples/bug-webkit-hash-iframe/ 这个是一个例子，也是ie89下的history异常致使的问题。https://github.com/cowboy/jquery-hashchange/issues/17  这个上面有一样遇到这个问题的，只是暂时没找到解决方法。

真正的缘由：http://msdn.microsoft.com/en-us/library/cc288209%28v=vs.85%29.aspx 。在iframes或者frame里面，不会触发修改location.hash.所以没记录到history中(bingo ,猜对了~~~)。

 

后续完善~~