網頁設計:讓網站自動與定時跳轉網頁的 7 種技術(JavaScript & Html Meta)

html-5-logo-design logo
html-5-logo-design logo

在進階網頁設計的程式技巧中,有一種讓網頁可以自動跳轉頁面的 HTML 技術。這種技術的應用範圍相當廣泛,可以讓舊站的特定頁面直接跳轉到新站的頁面,也能先顯示特定說明頁面給使用者再跳轉到其他頁面等等。

我在底下記錄幾種常用的網頁程式/指令碼:

方法一,透過<HEAD> 與 </HEAD> 之間的 Meta 標籤進行設定:

<head>
<meta http-equiv="refresh" content="10 ; url=http://www.vedfolnir.com">
</head>

其中 content="10 ; url=http://www.vedfolnir.com" 指的是在十秒後自動跳轉 http://www.vedfolnir.com 網址;設為 0 即可直接跳轉。

方法二,在 <BODY> 內嵌入 OnLoad 事件:

<body onload="parent.location=' http://www.vedfolnir.com' ">

方法三,採用 JavaScript 技術,在 <BODY> 與 </BODY> 之間放置如下任一程式碼:

1. <script language="javascript"> window.location="http://www.vedfolnir.com"; </script>

2. <script language="javascript"> location.href=('http://www.vedfolnir.com/'); </script>

3. <script Language="JavaScript"> setTimeout("location.href='http://www.vedfolnir.com'",10000); </script>

在 3 的程式碼中,10000 的基本單位是毫秒(ms)。

方法四,同上採用 JavaScript 技術:

<SCRIPT LANGUAGE="JavaScript">
var start=new Date();
start=Date.parse(start)/1000;
var counts=10;
function CountDown(){
var now=new Date();
now=Date.parse(now)/1000;
var x=parseInt(counts-(now-start),10);
if(document.form1){document.form1.clock.value = x;}
if(x>0){
timerID=setTimeout("CountDown()", 100)
}else{
location.href="http://www.vedfolnir.com"
}}</script>
<FORM NAME="formVedfolnir">
<INPUT TYPE="text" NAME="clock" SIZE="3" VALUE="10">
10 秒後自動跳轉
</FORM>

方法五,在 <BODY></BODY> 之間使用偽表單投遞技術:

<form name="formjumpvedfolnir" action= http://www.vedfolnir.com/index.html method="get"> </form>
<script language="javascript"> document.formjumpvedfolnir.submit() </script>

  •  
  •  
  •  
  •  
  •  
  •  

說些什麼吧

您也許也會喜歡…