首頁 > web前端 > js教程 > window.location.href的用法(動態輸出跳轉)_基礎知識

window.location.href的用法(動態輸出跳轉)_基礎知識

WBOY
發布: 2016-05-16 16:40:01
原創
1880 人瀏覽過

javascript中的location.href有很多種用法,主要如下。

self.location.href="/url" 目前頁面開啟URL頁
location.href="/url" 目前頁面開啟網址
windows.location.href="/url" 目前頁面開啟URL頁面,前面三個用法相同。
this.location.href="/url" 目前頁面開啟URL頁面
parent.location.href="/url" 在父親頁面開啟新頁面
top.location.href="/url" 在頂層頁面開啟新頁面

如果頁面中自訂了frame,那麼可將parent self top換為自訂frame的名稱,效果是在frame視窗開啟url位址

此外,window.location.href=window.location.href;和window.location.Reload()和都是刷新目前頁面。差別在於是否有提交資料。當有提交資料時,window.location.Reload()會提示是否提交,window.location.href=window.location.href;則是向指定的url提交資料

在寫ASP.Net程式的時候,我們常常遇到跳轉頁面的問題,我們常使用Response.Redirect 做ASP.NET框架頁跳轉,如果客戶要在跳轉的時候使用提示,這個就不靈光了,如:

複製程式碼 程式碼如下:

Response.Write("alert('恭喜您,註冊成功!');"); 
Response.Redirect("main.html");  

這時候我們的提示內容沒有出來就跳轉了,和Response.Redirect("main.html");沒有任何差別。

這時我們採用下面程式​​碼試驗一下:

ASP.NET框架頁跳轉的另一實現

複製程式碼 程式碼如下:

Response.Write("alert('恭喜您,註冊成功!')"); 
Response.Write("window.location.href='main.html'");

這個即實現了我們的要求,在提示後,跳轉頁面。

最重要的是window.location.href 語句可以實作一個框架的頁面在執行伺服器端程式碼後刷新另一個框架的頁面(Response.Redirect無法達到,至少我沒有發現):

如:index.htm頁面中有二個框架,分別為 frameLeft和frameRight,在frameRight頁面中執行伺服器端程式碼後刷新frameLeft中的頁面。

先前最常見的是註冊之後,自動刷新登陸框,讓登陸框換成已登陸頁面,只要在註冊成功的程式碼之後加上一段,即可以實現刷新另個框架的頁面。程式碼如下:

複製程式碼 程式碼如下:

Response.Write("alert('恭喜您,註冊成功!')"); 
Response.Write("window.parent.frameLeft.location.href='main.html'");  

這樣就搞定了ASP.NET框架頁跳轉中斷的問題。其實asp、php中一般都會使用這種方式。


"window.location.href"、"location.href"是本頁跳轉
"parent.location.href"是上一層頁跳轉
"top.location.href"是最外層的頁面跳轉

舉例說明:

如果A,B,C,D都是jsp,D是C的iframe,C是B的iframe,B是A的iframe,如果D中js這樣寫

"window.location.href"、"location.href":D頁面跳轉
"parent.location.href":C頁跳轉
"top.location.href":A頁面跳轉

如果D頁面有form的話,

: form提交後D頁面跳轉
: form提交後彈出新頁面
: form提交後C頁跳轉
: form提交後A頁面跳轉
 
關於頁面刷新,D 頁面這樣寫:

"parent.location.reload();": C頁面刷新(當然,也可以使用子視窗的opener 物件來獲得父視窗的物件:window.opener.document.location.reload(); )

"top.location.reload();": A頁面刷新

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板