曾經踩過的坑--瀏覽器兼容-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 ,猜對了~~~)。

 

後續完善~~