js的跳轉

。 reload

reload 方法，該方法強迫瀏覽器刷新當前頁面。

語法：location.reload([bForceGet])

參數： bForceGet，可選參數，默認為 false，從客戶端緩存里取當前頁。true, 則以 GET 方式，從服務端取最新的頁面, 相當于客戶端點擊 F5("刷新")

reload() 方法用于重新加載當前文檔。

如果該方法沒有規定參數，或者參數是 false，它就會用 HTTP 頭 If-Modified-Since 來檢測服務器上的文檔是否已改變。如果文檔已改變，reload() 會再次下載該文檔。如果文檔未改變，則該方法將從緩存中裝載文檔。這與用戶單擊瀏覽器的刷新按鈕的效果是完全一樣的。

2，replace 方法，該方法通過指定URL替換當前緩存在歷史里（客戶端）的項目，因此當使用replace方法之后，你不能通過“前進”和“后退”來訪問已經被替換的URL。

語法： location.replace(URL)

通常使用： location.reload() 或者是 history.go(0) 來做。

此方法類似客戶端點F5刷新頁面，所以頁面method="post"時，會出現"網頁過期"的提示。

因為Session的安全保護機制。

當調用 location.reload() 方法時， aspx頁面此時在服務端內存里已經存在，因此必定是 IsPostback 的。

如果有這種應用：需要重新加載該頁面，也就是說期望頁面能夠在服務端重新被創建，期望是 Not IsPostback 的。

這里，location.replace() 就可以完成此任務。被replace的頁面每次都在服務端重新生成。

代碼： location.replace(location.href);

返回并刷新頁面：

location.replace(document.referrer);

document.referrer //前一個頁面的URL

不要用 history.go(-1)，或 history.back();來返回并刷新頁面，這兩種方法不會刷新頁面。

附：

Javascript刷新頁面的幾種方法：

復制代碼代碼如下:

1，history.go(0)

2，location.reload()

3，location=location

4，location.assign(location)

5，document.execCommand('Refresh')

6，window.navigate(location)

7，location.replace(location)

8，document.URL=location.href

自動刷新頁面的方法:

1，頁面自動刷新：把如下代碼加入<head>區域中

復制代碼代碼如下:

其中20指每隔20秒刷新一次頁面.

2，頁面自動跳轉：把如下代碼加入<head>區域中

復制代碼代碼如下:

其中20指隔20秒后跳轉到http://www.jb51.net頁面

3，頁面自動刷新js版

復制代碼代碼如下:

function myrefresh()

{

window.location.reload();

}

setTimeout('myrefresh()',1000); //指定1秒刷新一次

</script>

4，JS刷新框架的腳本語句

復制代碼代碼如下:

//刷新包含該框架的頁面用

parent.location.reload();

</script>

//子窗口刷新父窗口

self.opener.location.reload();

</script>

(　或　<a href="javascript：opener.location.reload()">刷新</a> )

//刷新另一個框架的頁面用

parent.另一FrameID.location.reload();

</script>

如果想關閉窗口時刷新或想開窗時刷新，在<body>中調用以下語句即可。

復制代碼代碼如下:

<body onload="opener.location.reload()"> 開窗時刷新

<body onUnload="opener.location.reload()"> 關閉時刷新

window.opener.document.location.reload()

</script>

一、先來看一個簡單的例子：

下面以三個頁面分別命名為frame.html、top.html、bottom.html為例來具體說明如何做。

frame.html 由上(top.html)下(bottom.html)兩個頁面組成，代碼如下：

復制代碼代碼如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> frame </TITLE>

</HEAD>

</frameset>

</HTML>

現在假設top.html (即上面的頁面) 有七個button來實現對bottom.html (即下面的頁面) 的刷新，可以用以下七種語句，哪個好用自己看著辦了。

top.html 頁面的代碼如下：

復制代碼代碼如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

</HTML>

下面是bottom.html頁面源代碼，為了證明下方頁面的確被刷新了，在裝載完頁面彈出一個對話框。

復制代碼代碼如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> bottom.html </TITLE>

</HEAD>

<h1>This is the content in bottom.html.</h1>

</BODY>

</HTML>

解釋一下：

復制代碼代碼如下:

1.window指代的是當前頁面，例如對于此例它指的是top.html頁面。

2.parent指的是當前頁面的父頁面，也就是包含它的框架頁面。例如對于此例它指的是framedemo.html。

3.frames是window對象，是一個數組。代表著該框架內所有子頁面。

4.item是方法。返回數組里面的元素。

5.如果子頁面也是個框架頁面，里面還是其它的子頁面，那么上面的有些方法可能不行。

附：

Javascript刷新頁面的幾種方法：

1 history.go(0)

2 location.reload()

3 location=location

4 location.assign(location)

5 document.execCommand('Refresh')

6 window.navigate(location)

7 location.replace(location)

8 document.URL=location.href

二、自動刷新頁面

1.頁面自動刷新：把如下代碼加入<head>區域中

其中20指每隔20秒刷新一次頁面.

2.頁面自動跳轉：把如下代碼加入<head>區域中

其中20指隔20秒后跳轉到http://www.jb51.net頁面

3.頁面自動刷新js版

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

三、java在寫Servler,Action等程序時，要操作返回頁面的話（如談出了窗口，操作完成以后，關閉當前頁面，刷新父頁面）

復制代碼代碼如下:

1 PrintWriter out = response.getWriter();

2 out.write("<script type=\"text/javascript\">");

3 ////子窗口刷新父窗口

4 out.write("self.opener.location.reload();");

5 //關閉窗口

6 out.write("window.opener=null;");

7 out.write("window.close();");

8 out.write("</script>");

四、JS刷新框架的腳本語句

1.如何刷新包含該框架的頁面用

復制代碼代碼如下:

parent.location.reload();

</script>

節課來學習超鏈接實現頁面間的跳轉。

這是百度的首頁，當把鼠標指針滑到百度熱搜的文章上，指針形狀由箭頭變成了小手，點擊鼠標左鍵，會打開一個新的頁面，展示這篇熱搜文章的內容。

這個功能是如何實現的呢？就是使用超鏈接。

什么是超鏈接？當鼠標劃入文本時，文字變成藍色，同時添加了下滑線，這就提示瀏覽者這不是普通的文本而是可點擊的鏈接。

這個文本被稱作 HyperText 意為超文本，這個術語是由泰德-納爾遜在20世紀60年代提出，是使互聯網發揮作用的關鍵概念之一，超文本是用超鏈接的方法，將各種不同空間的文字信息組織在一起的網狀文本。

超鏈接就像像橋梁建立了不同頁面之間的聯系，實現了訪問不同網站中的頁面，有了它就可以在互聯網的世界中自由穿梭。

超鏈接實現通過標準的雙標簽 a， a 是anchor單詞的縮寫，是錨的意思，要實現跳轉功能必須攜帶一個屬性href ，它是Hypertext Reference 的縮寫，意為超文本引用，href的值是目標頁面的地址，和圖片的 src 屬性類似。可以使用相對和絕對路徑，標簽對內的內容為顯示在頁面中的文本。

我們來實現一個頁面跳轉的案例。

打開編輯器，新建文件 anchor.html，向頁面中插入兩個 a 標簽，給每個 a 標簽中填入一些顯示的文本，千鋒教育、千鋒前端。

第一個 a 標簽定義 href 屬性值為千鋒教育的網址(http://www.qfedu.com/) 第二個標簽不定義任何屬性

在瀏覽器中打開，兩個都表現出來了，可兩個標簽表現出來的樣式明顯不同，帶有 href 屬性的 a 標簽文本。默認樣式是藍色的，并且帶有下劃線效果。沒有 href 屬性的 a 標簽文本，就沒有這些樣式了。

鼠標指針劃入千鋒前端指針的形狀仍然是一個小箭頭，點擊鼠標也沒有任何的響應。鼠標指針劃入千鋒教育，指針的形狀變成了小手，點擊鼠標左鍵的時候。頁面跳轉到了千鋒教育的官網。

需要注意，跳轉的目標頁面地址，如果是一個網址，需要帶上 http://前綴，否則就不能實現頁面跳轉。

可是當點擊超鏈接的文本時，頁面是在原來的窗口中打開的。在點擊百度熱搜的一篇文章上時，會打開一個新的瀏覽器窗口，頁面在新的窗口里顯示。

如何實現這個效果？需要給 a 標簽添加一個新的屬性 target，這個屬性的作用是：定義超鏈接頁面打開方式，值定義為 _self，表示鏈接的目標頁面在當前窗口中打開，值定義為 _blank，表示鏈接的目標頁面在新的瀏覽器窗口中打開。

回到編輯器，給第一個 a 標簽添加 target 屬性，屬性值設置成 _self。回到瀏覽器，刷新點擊千鋒教育，仍然在當前窗口中打開，可以看出 _self 就是也是超鏈接 target 的默認值。

回到編輯器，把 target 的值設置成 _blank，刷新頁面，再次點擊，頁面在新窗口中打開了。

使用超鏈接跳轉頁面——完。

文章配套視頻鏈接：

「鏈接」

時候，我們會希望網頁自動跳轉，應用場景包括：

提交表單后自動轉到另外一個頁面，
頁面地址變了，希望訪問老地址時能自動轉到新地址，等等。

下面總結下如何在前端頁面中控制跳轉的方法：

利用html的refresh

<meta http-equiv="refresh" content="0;url=index.html">

其中0表示0秒以后跳轉，可以自行設定時間。

利用js的href屬性

window.location.href='index.html';

如果要設定延遲時間，則加上setTimeout

setTimeout("javascript：location.href='index.html'", 5000);

利用js的navigate方式

window.navigate("index.html");

自動刷新頁面

在上述方式中，如果跳轉的頁面就是本頁面，那么就是自動刷新頁面的功能。

或者使用reload

location.reload()

window.history.go(-1);

其中 -1 表示上一頁，如果沒有負號的就是表示下一頁

如果不是1而是 2,3,4......n 則表示前進或者后退 n 頁

后退還可以用

window.history.back();

兩者的區別是：
go(-1):返回上一頁，原頁面表單中的內容會丟失；
back():返回上一頁，原頁表表單中的內容會保留。

前進則對應的是：

history.forward()：

此外，還有一個參數 history.length 記錄了頁面前進的序號，如果等于0表示第一頁

怎么選擇

至此，自動跳轉頁面、刷新頁面、前后切換的方法都齊了！方法多了就有了選擇恐懼癥？

基本原則：
單純的頁面跳轉建議就用html的refresh方法，無需js代碼，很簡潔。
如果比較復雜，涉及js代碼的業務功能，再加上跳轉功能的，就用js的各種方法。
此外還要考慮頁面是否刷新的問題，希望刷新就用go，否則用back/forward

在線咨詢

上一篇：HTML基礎知識之DIV
下一篇：給大家分享自己用html+servlet做的一個在線答題demo

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

js的 跳轉

您的項目需求

js的跳轉