JS中實現頁面跳轉和刷新方法總結

時間 2019-11-07

原文原文鏈接

window.location(.href)="URL"

其實 .href 能夠省略javascript

window.location 和 window.location.href 實現的效果是同樣的php

例如：html

window.location = "http://www.baidu.com"
window.location.href = "http://www.baidu.com"
複製代碼

上面兩種方法均可以從當前頁面跳轉到目標頁面
不一樣之處在於 window.location 返回的是對象，若是沒有.href，它的默認參數就是hrefjava

winodw.location.assign("URL")

這個方法和上面的方法差很少
用法：jquery

winodw.location.assign("http://www.baidu.com")
複製代碼

window.location.replace("URL")

若是用window.location.replace("http://www.baidu.com") 實現跳轉頁面, 它和上面方法的區別在於它跳轉後不會保存跳出頁面的信息.瀏覽器

因此若是使用 history 歷史返回按鈕是無效的bash

它的效果相似於在網頁上點擊右鍵, 在新窗口打開或新標籤頁打開.
而 window.location.href 實現的效果是在頁面上點擊目標連接, 而後能夠點擊歷史返回按鈕, 返回到以前頁面。框架

歷史頁跳轉

下面的兩種方法均可以實現返回歷史頁，至關於點了頁面左上角的返回按鈕jsp

window.history.back();
window.history.go(-1);
複製代碼

back和go裏面均可以放數值ui

例如：裏面放上 -1 意思就是返回上一級，裏面放上 -2 就是返回上上級，以此類推
並且裏面還能夠放上指定的路由路徑，好比 window.history.go('../routes/admin/'); 這樣能夠跳轉到指定的路由模塊

meta refresh

若是用戶瀏覽器禁用了javascript, 那麼能夠用meta refresh來實現自動跳轉:

<noscript>
	<meta http-equiv="refresh" content="0;URL=http://www.baidu.com/">
</noscript>
複製代碼

若是要實現 JS 自動跳轉，能夠加個定時器：

setTimeout(function(){ ... }, 1000);
複製代碼

從新加載本頁

若是你的代碼邏輯執行完了，想要從新加載頁面的話，能夠用這兩種方法：

window.location.reload()
window.location.replace()
複製代碼

這兩種方法均可以從新加載本頁，可是replace()能夠導向另一個URL
例如：window.location.replace("http://www.baidu.com")

window.navigate('URL')

window.navigate('URL') 這個方法是隻針對IE的，不適用於火狐等其餘瀏覽器，在HTML DOM Window Object中，根本沒有列出window.navigate這個方法，因此這個方法儘可能少用，遺忘最好。

self、parent、this、top

top.location.href=」url」         在頂層頁面打開url（跳出框架）  
self.location.href=」url」        僅在本頁面打開url地址  
parent.location.href=」url」      在父窗口打開Url地址  
this.location.href=」url」        用法和self的用法一致
複製代碼

if (top.location == self.location) 判斷當前location是否爲頂層來禁止frame引用，若是頁面當中有自定義的frame的話，也能夠將parent self top換爲自定義frame的名稱，效果就是在自定義frame窗口打開url。

示例：

if(top != self){
	top.location.href = location.href;
}	//禁止frame引用
複製代碼

如下是從網上找到的一個例子，不是很直觀，你能夠加上上面那三行代碼，能夠先去掉，再加上，看一下效果，應該就清楚了

top.html代碼

<script language=javascript>
    function rs(){
        if(top !== self){
            top.location.href = location.href;
        }
        parent.left.location.href="top.htm" ;
        parent.bot.location.href="top.htm";
    }
< /script>
< input type=button name=name value="ksdj" onclick=rs();>
複製代碼

test.html代碼

<FRAMESET COLS="150,*">
	< FRAME SRC="left.htm" name=left>
	< FRAMESET ROWS="150,*">
		 < FRAME SRC="top.htm" name=top>
		 < FRAME SRC="bot.htm" name=bot>
	< /FRAMESET>
< /FRAMESET>
複製代碼

嘗試一下,多是這樣的效果!

top表示主窗口，location表示當前窗口，若是你的文件只有一個框架，沒有iframe和frame，那麼是徹底一致的，沒有區別。

top.location是在頂層frame中打開新頁
window.location是在當前frame中打開新頁
parent.location在當前窗口的父窗口打開Url地址

JS頁面跳轉和刷新的經常使用方式

頁面跳轉

window.location.href="index.php";  
window.history.back(-1);//相似於按鈕，參數是負幾，就後退幾回。  
window.navigate("index.jsp"); //navigate對象包含有關瀏覽器的信息，也能夠做爲頁面跳轉，後面直接加要跳轉的地方。  

self.location.href=index.htm;  
//self指代當前窗口對象,屬於window最上層的對象;  
//location.href 指的是某window對象的URL地址.  
//self.location.href指當前窗口的URL地址,去掉self默認爲當前窗口的URL地址.  

top.location=index.php;  
//top 屬性返回最頂層的先輩窗口。  
//該屬性返回隊一個頂級窗口的只讀引用。  
//若是窗口自己就是一個頂級窗口，top 屬性存放對窗口自身的引用。  
//若是窗口是一個框架，那麼 top 屬性引用包含框架的頂層窗口。

location.replace(document.referrer);  
document.referrer   
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 
複製代碼

自動刷新

頁面自動刷新：把以下代碼加入<head>區域中
<meta http-equiv="refresh" content="2">
其中2指每隔2秒刷新一次頁面.

頁面自動跳轉：把以下代碼加入<head>區域中
<meta http-equiv="refresh" content="2;url=http://www.baidu.com">
其中2指隔2秒後跳轉到http://www.baidu.com頁面

JS實現頁面自動刷新

<script language="JavaScript">  
    setTimeout('window.location.reload()',1000) //指定1秒刷新一次  
</script>  

JS刷新框架的腳本語句

//如何刷新包含該框架的頁面用   
[javascript] view plain copy print?
<script language=JavaScript>  
   parent.location.reload();  
</script>    

//子窗口刷新父窗口
[javascript] view plain copy print?
<script language=JavaScript>  
    self.opener.location.reload();  
</script>  
(或<a href="javascript:opener.location.reload()">刷新</a>   )  

//如何刷新另外一個框架的頁面用   
[javascript] view plain copy print?
<script language=JavaScript>  
   parent.另外一FrameID.location.reload();  
</script>  

若是想關閉窗口時刷新或者想開窗時刷新的話，在<body>中調用如下語句便可。
複製代碼

jquery方法

$(location).attr('href', 'http://www.jb51.net');

$(window).attr('location','http://www.jb51.net');

$(location).prop('href', 'http://www.jb51.net')
複製代碼