url跳轉方法集合

在一個web項目中,url跳轉是最常用的技術之一。頁面跳轉可能是由于用戶單擊鏈接、按鈕等引發的,也可能是系統自動產生的。根據我個人的開發經歷, 在此處總結出常用的實現頁面自動跳轉的方法,集合了html、javascript和php的各種方法。

方法解說:

1、 ? PHP的header實現頁面跳轉:

header()函數的主要功能是將HTTP協議標頭(header)輸出到瀏覽器。

header()函數的定義如下:

void header (string string [,bool replace [,int http_response_code]])

案例代碼:
//①重定向瀏覽器
header("Location: http://www.nosee123.com");
//②使用refresh可以指定如30秒后再進行頁面跳轉
header("refresh:30;url=www.nosee123.com");
//返回上一頁的方法
header(location:.getenv("HTTP_REFERER")); ? // ? 返回其調用頁面

注意:

① location和“:”號間不能有空格,否則不會跳轉。

② 在用header前不能有任何的輸出。哪怕是一個空格,那么在頁頂會顯示錯誤信息。

③ header后的PHP代碼還會被執行

④ 要是想在重定向之后,后續的代碼不會被執行,最好后面加上一個exit()函數。

2、使用javascript實現頁面跳轉

// ①以下方式直接跳轉,比較常用的方法,后面直接跟指定要跳轉的地址即可。
window.location.href='www.nosee123.com'
//后面的href可以省略掉(如果把href改為replace則表示跳轉后沒有后退功能 )
//更深入了解的話,這里的window還可以換成使用self、this、parent、top,分別代表不同的對象。就比如:self指代當前窗口對象;這里將不作一一解說,感興趣的同學可以深入學習,當然也歡迎來和我討論。
//② 以下方式定時跳轉
setTimeout("javascript:location.href='nosee123.com'", 5000);
//③使用 open 語句實現,而且可以指定是在原窗口、父窗口、子窗口或者新窗口打開
window.open("www.nosee123.com","","_self");
//④navigate對象包含有關瀏覽器的信息,也可以作為頁面跳轉,后面直接加要跳轉的地方。沒有應用于 navigator 對象的公開標準,不過所有瀏覽器都支持該對象。
window.navigate("nosee123.com");
擴展:使用javascript返回指定頁面的方法
//①參數是負幾,就后退幾次。
window.history.back(-1);
//②
history.Go(-1);

3、使用HTML meta refresh實現跳轉

<meta http-equiv="refresh" content="0";url=http://nosee123.com/" />
這里的content屬性表示幾秒后執行跳轉,比如:content=“5”表示5秒后執行跳轉。
//在html標簽鏈接嵌套js跳轉代碼的方法
<a rel="nofollow" target="_blank" href="javascript:history.go(-1)">返回上一步</a>

實用案例:

1. 結合了倒數的javascript頁面跳轉實現(IE)

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

缺點:firefox不支持(firefox不支持span、div等的innerText屬性)

2. 結合了倒數的javascript頁面跳轉實現(firefox)

<span id="totalSecond">5</span>
var second = document.getElementById('totalSecond').textContent;
setInterval("redirect()", 1000);
function redirect(){
document.getElementById('totalSecond').textContent = --second;
if (second < 0) location.href = 'www.nosee123.com';
}

3. 解決Firefox不支持innerText的問題的整合方法

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

4. 這個方法比較少用,個人覺得比較麻煩

var jumpurl = 'http://www.nosee123.com/';
if (window.attachEvent) {
document.write('');
document.getElementById('exe').click();
} else {
document.write('');
document.getElementById('exe').click();
}

5. javascript中彈出提示框跳轉到其他頁面

function logout(){
if(confirm("你確定退出嗎?")){
window.location.href="logout.php";
}
}

以上就是我們向大家介紹的web頁面跳轉實現方法,純屬個人經驗,如有錯誤的地方歡迎指出。如有更好的方法也希望能夠和你有進一步的交流。


閱讀原文

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • M1.使用meta元素 http-equiv="refresh" 是刷新頁面, 5是指5秒后執行刷新操作,url是...
    hello_water閱讀 9,152評論 0 1
  • 事件源對象 event.srcElement.tagName event.srcElement.type 捕獲釋放...
    孤魂草閱讀 910評論 0 0
  • 人總要經歷過后才發現自己究竟錯過了誰遺棄了什么。 在此之前我一直以為自己并不是一個矯情的人。以為自己是一個人堅強的...
    桑桑桑桑桑小閱讀 234評論 0 0
  • 現在已經是一年當中最熱的三伏天了,所以,單位會放高溫假,學校也是暑假進行時,那大人,小盆友們肯定會把握這樣...
    朱莉葉6666閱讀 188評論 0 1
  • 活動名稱:手指游戲 活動目標: 1.認識自己的手指,嘗試用手指變出生活中的物品。 2.鍛煉手指,在手指自然配合中體...
    yoniyoniyoni閱讀 205評論 0 0