實現網頁自動跳到其他頁面的幾種方法

  • 2019 年 11 月 13 日
  • 筆記

某些時候我們需要實現網頁的自動跳轉，比如404錯誤頁可以加入程式碼讓它自動跳轉到首頁，下面介紹三種html頁面自動跳轉的方法。

方法一：頁面在頭部加入meta標籤 在頭部加入 <meta http-equiv="refresh" content="時間/s;url=網址/http://www.dblog.cc">

程式碼如下： 

<html>  <head>      <meta charset="UTF-8">      <title>html自動跳轉</title>      <meta http-equiv="refresh" content="3;url=http://www.dblog.cc">  </head>  <body>    </body>  </html>

方法二：script實現自動跳轉 第一種：比較常用：window.location.href = "http://baidu.com/";

程式碼如下：

<html>  <head>      <title>html自動跳轉</title>  </head>  <body>  <script>      document.location = 'http://www.w3h5.com'  </script>  </body>  </html>

第二種：

self.location = "http://baidu.com/";

第三種：

top.location = "http://baidu.cn/";

第四種：只對IE系列瀏覽器有效，實用性不大。

window.navigate("http://baidu.cn/");

方法三：PHP實現

<?php      header("Location: http://baidu.cn/");  ?>

方法四：動態顯示的自動跳轉程式碼（比較複雜，不推薦）

<html>  <head>      <meta charset="UTF-8">      <title>html自動跳轉</title>  </head>  <body>  <form name=loading>      <p align=center>          <font color="#0066ff" size="2">正在跳轉，請稍等</font><font color="#0066ff" size="2" face="Arial">...</font>          <input type=text name=chart size=46                 style="font-family:Arial; font-weight:bolder; color:#0066ff; background-color:#fef4d9; padding:0px; border-style:none;">          <input type=text name=percent size=47                 style="color:#0066ff; text-align:center; border-width:medium; border-style:none;">          <script>              var bar = 0              var line = "||"              var amount = "||"              count()                function count() {                  bar = bar + 2                  amount = amount + line                  document.loading.chart.value = amount                  document.loading.percent.value = bar + "%"                  if (bar < 99) {                      setTimeout("count()", 100);                  }                  else {                      window.location = "http://www.dblog.cc";                  }              }          </script>      </p>  </form>  <p align="center"> 如果您的瀏覽器不支援跳轉,      <a style="text-decoration: none" href="http://www.dblog.cc">          <font color="#FF0000">請點這裡</font>      </a>.  </p>  </body>  </html>

Tags:

VirMach 便宜 VPS