萬盛學電腦網

您现在的位置: 萬盛學電腦網 >> 網路安全 >  >> 網路基礎知識

HTML 網頁自動跳轉代碼大全:Meta Refresh 與 JavaScript 兩種實作方案

當同一內容對應兩個不同 URL,需將其中一個自動導向另一頁面時,可使用 HTML 原生跳轉技術。以下提供兩種簡單且常用的實作方式,適合不同需求場景。

方案一:Meta Refresh 標籤(最簡單)

在 <head> 區塊加入 <meta http-equiv="refresh" content="0.1;url=目標網址"> 即可實現毫秒級跳轉。完整範例如下:

<html>
<head>
<meta http-equiv="Content-Language" content="zh-CN">
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
<meta http-equiv="refresh" content="0.1;url=https://目標網址">
<title></title>
</head>
<body>
</body>
</html>

優點:無需 JavaScript 支援,相容性極佳;缺點:無法呈現過渡動畫或倒數提示。

方案二:JavaScript 倒數計時跳轉(含視覺回饋)

結合表單顯示進度條與百分比,並在倒數結束後執行 window.location 跳轉,同時提供手動點擊連結作為備援。核心程式碼片段:

<script>
var bar=0, line="||", amount="||";
function count(){
  bar+=2;
  amount += line;
  document.loading.chart.value = amount;
  document.loading.percent.value = bar + "%";
  if (bar < 99) { setTimeout("count()", 100); }
  else { window.location = "https://目標網址"; }
}
count();
</script>

此方案適合需要品牌曝光或緩衝提示的頁面,但需確保用戶瀏覽器啟用 JavaScript。

兩種方案各有優劣,開發者可根據專案需求選擇:單純導向用方案一,需求體驗優化則用方案二。

copyright © 萬盛學電腦網 all rights reserved