本文爲轉載內容。若涉及侵權,請聯繫刪除,不便之處請諒解。
一、JavaScript方法
文章作者:YXi
文章來源:JS中實現頁面跳轉和刷新方法總結
1、window.location(.href)=“URL”
其實 .href 可以省略,即 window.location
和 window.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);
back
和 go
都可以帶數值參數。
例如:-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
表示當前窗口,如果你的文件只有一個框架,沒有iframe
和frame
,那麼是完全一致的,沒有區別。
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(); //刷新最頂端對象(用於多開窗口)