樣式是一個超鏈接A標簽,通過點擊事件來達到返回上一頁的效果。
所以通常做飯是把A標簽的href寫成#,然后onClick事件,剛開始我只是當成一個普通點擊事件,然后使用JS進行返回。
寫法如下:
<a id="returnButton" onClick="javascript :history.back(-1);" class="header_btn"><p class="returns_btn">返回</p></a>
但是我發現一個問題,就是在嵌套到手機的APP里面時,經常沒有效果,而且有時出現無法連接的空白頁面。所以我在想是不是因為嵌套在APP里面,所以出現了兼容問題,所以我查了一下是不是有這個問題。在網上有個人還在很說了這個問題,這個其實也沒什么說的,說白了就是瀏覽器處理上的差異,我把網友的原話摘抄下來:
JavaScript中后退的寫法:history.back()或者history.go(-1)。
這種寫法在IE上即可實現我們想要的效果,但是在FireFox和Chrome就會變得很悲催了。
FireFox:
只需要改成如下方式: <a href="#" onclick="window.history.back()">返回</a>
Chrome:
Chrome比FireFox更難搞: <a href="#" onclick="window.history.back(); return false;">返回</a>
本人分析:對于Chrome來說,首先執行window.history.back(),執行完成之后再接著執行href="#",所以無法返回。
加上 return false之后將不再執行href="#",便能正常返回。
所以我修正了下我的寫法,修改為:
<a id="returnButton" onClick="javascript :window.history.back(); return false;" class="header_btn"><p class="returns_btn">返回</p></a>
修改后可以正常使用。
其實仔細想想,也不是什么大問題,也是自己疏忽了細節而已。