轉載 - JavaScript 和 jQuery 中實現頁面跳轉和刷新方法總結

本文爲轉載內容。若涉及侵權,請聯繫刪除,不便之處請諒解。

一、JavaScript方法

文章作者:YXi
文章來源:JS中實現頁面跳轉和刷新方法總結

1、window.location(.href)=“URL”

其實 .href 可以省略,即 window.locationwindow.location.href 實現的效果是一樣的

例如:

window.location = "http://www.baidu.com"
window.location.href = "http://www.baidu.com"

上面兩種方法都可以從當前頁面跳轉到目標頁面。
不同之處在於 window.location 返回的是對象,如果沒有 .href,它的默認參數就是 href

2、winodw.location.assign(“URL”)

這個方法和上面的方法差不多
用法:

winodw.location.assign("http://www.baidu.com")

3、window.location.replace(“URL”)

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

所以如果使用 history 歷史返回按鈕是無效的。

它的效果類似於在網頁上點擊右鍵, 在新窗口打開或新標籤頁打開。
window.location.href 實現的效果是在頁面上點擊目標鏈接, 然後可以點擊歷史返回按鈕, 返回到之前頁面。

4、歷史頁跳轉

下面的兩種方法都可以實現返回歷史頁,相當於點了頁面左上角的返回按鈕

window.history.back();
window.history.go(-1);

backgo 都可以帶數值參數。

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

5、meta refresh

如果用戶瀏覽器禁用了 javascript , 那麼可以用 meta refresh 來實現自動跳轉:

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

如果要實現 JS 自動跳轉,可以加個定時器:

setTimeout(function(){ ... }, 1000);

6、重新加載本頁

如果你的代碼邏輯執行完了,想要重新加載頁面的話,可以用這兩種方法:

window.location.reload()
window.location.replace()

這兩種方法都可以重新加載本頁,但是 replace() 可以導向另外一個 URL

7、window.navigate(‘URL’)

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

8、self、parent、this、top

top.location.href="url"			//在頂層頁面打開url(跳出框架)  
self.location.href="url"		//僅在本頁面打開url地址  
parent.location.href="url"		//在父窗口打開Url地址  
this.location.href="ur"			//用法和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" οnclick=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表示當前窗口,如果你的文件只有一個框架,沒有iframeframe,那麼是完全一致的,沒有區別。

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

9、JS頁面跳轉和刷新的常用方式

(1)頁面跳轉

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();//不刷新頁面  

(2)Javascript頁面刷新

history.go(0)   
location.reload()   
location=location   
location.assign(location)   
document.execCommand('Refresh')   
window.navigate(location)   
location.replace(location)   
document.URL=location.href 

(3)自動刷新

i、頁面自動刷新

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

ii、頁面自動跳轉

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

iii、JS實現頁面自動刷新

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

JS刷新框架的腳本語句

刷新包含該框架的頁面:

<script language=JavaScript>  
   parent.location.reload();  
</script>    

子窗口刷新父窗口:

<script language=JavaScript>  
    self.opener.location.reload();  
</script>  
<!-- 或 -->
<a href="javascript:opener.location.reload()">刷新</a>

刷新另一個框架的頁面:

<script language=JavaScript>  
   parent.另一FrameID.location.reload();  
</script>  

10、jquery方法

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

二、jQuery 方法

文章作者:挖煤瞭解一下
文章來源:JQ實現頁面的刷新局部刷新以及div裏面的刷新

1、div的局部刷新

$(".div").load(location.href+" .div");

2、全頁面的刷新方法

window.location.reload();		//刷新當前頁面
parent.location.reload();		//刷新父親對象(用於框架) 
opener.location.reload();		//刷新父窗口對象(用於單開窗口) 
top.location.reload();			//刷新最頂端對象(用於多開窗口)
發佈了6 篇原創文章 · 獲贊 5 · 訪問量 1萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章