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