網頁自動跳轉實作大全：HTML Meta、JavaScript 計時器與倒數計時跨瀏覽器相容方案

整理 5 種網頁自動跳轉技巧，從簡單的 HTML Meta 到跨瀏覽器相容的 JavaScript 倒數計時，解決 innerText/textContent 相容性問題。

1. HTML Meta Refresh (最簡單)

<head>
  <meta http-equiv="refresh" content="5;url=02view.html">
</head>

優點：簡單；缺點：Struts Tiles 無法使用。

2. JavaScript setTimeout (彈性)

<script>
setTimeout("javascript:location.href='02view.html'", 5000);
</script>

優點：可結合其他邏輯；缺點：受瀏覽器差異影響。

3. 帶倒數計時 (IE 專用 innerText)

<span id="totalSecond">5</span>
<script>
var second = totalSecond.innerText;
setInterval("redirect()", 1000);
function redirect(){
  totalSecond.innerText = --second;
  if(second < 0) location.href='02view.html';
}
</script>

缺點：Firefox 不支援 innerText。

4. Firefox 版 (textContent)

<script>
var second = document.getElementById('totalSecond').textContent;
setInterval("redirect()", 1000);
function redirect(){
  document.getElementById('totalSecond').textContent = --second;
  if (second < 0) location.href = '02view.html';
}
</script>

5. 跨瀏覽器整合版

<span id="totalSecond">5</span>
<script>
var second = document.getElementById('totalSecond').textContent;
if (navigator.appName.indexOf("Explorer") > -1) {
  second = document.getElementById('totalSecond').innerText;
}
setInterval("redirect()", 1000);
function redirect(){
  if (second < 0) {
    location.href = '02view.html';
  } else {
    if (navigator.appName.indexOf("Explorer") > -1) {
      document.getElementById('totalSecond').innerText = second--;
    } else {
      document.getElementById('totalSecond').textContent = second--;
    }
  }
}
</script>

相容性處理技巧

if (navigator.appName.indexOf("Explorer") > -1) {
  element.innerText = "text";
} else {
  element.textContent = "text";
}