實現網頁頁面跳轉的幾種方法(meta標籤、js實現、php實現)

來源:互聯網
上載者:User

1、meta標籤實現

只需在head裡加上下面這一句就行了,在當前頁面停留0.1秒後跳轉到目標頁面

 代碼如下 複製代碼

1 <meta http-equiv="refresh" content="0.1; url=http://www.111cn.net/">

2、Javascript實現

方法一:

這個方法比較常用

1 window.location.href = "http://www.111cn.net/";

方法二:

 代碼如下 複製代碼

1 self.location = "http://www.111cn.net/";

方法三:

 代碼如下 複製代碼

1 top.location = "http://www.111cn.net/";

方法四:

只對IE系列瀏覽器有效,實用性不大

 代碼如下 複製代碼

1 window.navigate("http://www.111cn.net/");

3、php實現

 代碼如下 複製代碼

<?php     header("Location: http://www.111cn.net/"); ?>


方法五:

帶進度條HTM頁面跳轉

 代碼如下 複製代碼

<html>
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
<title>跳轉到itlearner.com</title>
</head>
<body>
<form name=loading>
<P align=center><FONT face=Arial color=#0066ff size=2>loading...</FONT>
<INPUT style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bolder; PADDING-BOTTOM: 0px; COLOR: #0066ff; BORDER-TOP-style: none; PADDING-TOP: 0px; FONT-FAMILY: Arial; BORDER-RIGHT-style: none; BORDER-LEFT-style: none; BACKGROUND-COLOR: white; BORDER-BOTTOM-style: none"
size=46 name=chart>
<BR>
<INPUT style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; COLOR: #0066ff; BORDER-BOTTOM: medium none; TEXT-ALIGN: center" size=47 name=percent>
<script language="javascript">
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.111cn.net/";
    }
}
</script>
</P>
</form>

第六:PHP頁面跳轉、JavaScript(常用、推薦)

例如,此代碼可以放在程式中的任何合法位置。

 代碼如下 複製代碼

< ?php
$url = http://www.111cn.net;
echo "<script language='javascript' type='text/javascript'>";
echo "window.location.href='$url'";
echo "</script>";
?>.
</body>
</html>

第七:有具體倒計時的效果

 代碼如下 複製代碼

<!doctype html>
<head>
<meta charset=utf-8" />
<title>js定時跳轉頁面的方法</title>
</head>
<body>
<script>
var t=10;//設定跳轉的時間
setInterval("refer()",1000); //啟動1秒定時
function refer(){ 
    if(t==0){
        location=http://www.111cn.net; //#設定跳轉的連結地址
    }
    document.getElementById('show').innerHTML=""+t+"秒後跳轉到百度"; // 顯示倒計時
    t--; // 計數器遞減
    //本文轉自:
}
</script>
<span id="show"></span>
</body>
</html>

Ok,以上就是今天總結的幾種頁面跳轉的方法了。

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.