[JavaScript] 在特定瀏覽器中使用 history.back() 或 history.go(-1) 皆無反應?

今天有個一個需求如下:

點擊連結後回到上一頁,這麼簡單的東西竟然有雷 !!!

首先我們來寫個簡單的範例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<script>
function clickEvent_back() {
history.back();
}
function clickEvent_go() {
history.go(-1);
}

$('a').on('click', function (event) {
event.preventdefault()
return false;
})
</script>

<h1>onclick</h1>
<a href="#" onclick="history.back()">history.back()</a>
<a href="#" onclick="history.go(-1)">history.go(-1)</a>
<h1>href</h1>
<a href="javascript: history.back()">history.back()</a>
<a href="javascript: history.go(-1)">history.go(-1)</a>
<h1>onclick call method</h1>
<a href="#" onclick="clickEvent_back()">history.back()</a>
<a href="#" onclick="clickEvent_go()">history.go(-1)</a>
<h1>href call method</h1>
<a href="javascript: clickEvent_back()">history.back()</a>
<a href="javascript: clickEvent_go()">history.go(-1)</a>

畫面如圖:

 

不管點擊哪種onclick觸發的返回上一頁皆無反應,但有趣的是寫在href裡面的卻都正常

有問題的瀏覽器:

  1. Safari
  2. Safari - WebView (in app)
    正常運作的瀏覽器:

  3. Chrome

  4. Chrome (mobile app)
  5. Edge
  6. IE 11
    看來Chrome比較聽話 …