JS實(shí)現(xiàn)頁面跳轉(zhuǎn)與刷新的方法匯總
window.location(.href)="URL"
其實(shí) .href 可以省略
window.location 和 window.location.href 實(shí)現(xiàn)的效果是一樣的
例如:
window.location = "http://www.baidu.com" window.location.href = http://www.baidu.com
上面兩種方法都可以從當(dāng)前頁面跳轉(zhuǎn)到目標(biāo)頁面
不同之處在于 window.location 返回的是對(duì)象,如果沒有.href,它會(huì)默認(rèn)參數(shù)就是href
winodw.location.assign("URL")
這個(gè)方法和上面的方法差不多
用法:
winodw.location.assign(http://www.baidu.com)
window.location.replace("URL")
如果用window.location.replace("http://www.baidu.com") 實(shí)現(xiàn)跳轉(zhuǎn)頁面, 它和上面方法的區(qū)別在于它跳轉(zhuǎn)后不會(huì)保存跳出頁面的信息.
所以如果使用 history 歷史返回按鈕是無效的
它的效果類似于在網(wǎng)頁上點(diǎn)擊右鍵, 在新窗口打開或新標(biāo)簽頁打開.
而 window.location.href 實(shí)現(xiàn)的效果是在頁面上點(diǎn)擊目標(biāo)鏈接, 然后可以點(diǎn)擊歷史返回按鈕, 返回到之前頁面。
歷史頁跳轉(zhuǎn)
下面的兩種方法都可以實(shí)現(xiàn)返回歷史頁,相當(dāng)于點(diǎn)了頁面左上角的返回按鈕
window.history.back(); window.history.go(-1);
back和go里面都可以放數(shù)值
例如:里面放上 -1 意思就是返回上一級(jí),里面放上 -2 就是返回上上級(jí),以此類推
而且里面還可以放上指定的路由路徑,比如 window.history.go('../routes/admin/'); 這樣可以跳轉(zhuǎn)到指定的路由模塊
meta refresh
如果用戶瀏覽器禁用了javascript, 那么可以用meta refresh來實(shí)現(xiàn)自動(dòng)跳轉(zhuǎn):
<noscript> <meta http-equiv="refresh" content="0;URL=http://www.baidu.com/"> </noscript>
如果要實(shí)現(xiàn) JS 自動(dòng)跳轉(zhuǎn),可以加個(gè)定時(shí)器:
setTimeout(function(){ ... }, 1000);
重新加載本頁
如果你的代碼邏輯執(zhí)行完了,想要重新加載頁面的話,可以用這兩種方法:
window.location.reload() window.location.replace()
這兩種方法都可以重新加載本頁,但是replace()可以導(dǎo)向另外一個(gè)URL
例如:window.location.replace("http://www.baidu.com")
window.navigate('URL')
window.navigate('URL') 這個(gè)方法是只針對(duì)IE的,不適用于火狐等其他瀏覽器,在HTML DOM Window Object中,根本沒有列出window.navigate這個(gè)方法,所以這個(gè)方法盡量少用,遺忘最好。
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) 判斷當(dāng)前l(fā)ocation是否為頂層 來禁止frame引用,如果頁面當(dāng)中有自定義的frame的話,也可以將parent self top換為自定義frame的名稱 ,效果就是在自定義frame窗口打開url。
示例:
if(top != self){
top.location.href = location.href;
} //禁止frame引用
以下是從網(wǎng)上找到的一個(gè)例子,不是很直觀, 你可以加上上面那三行代碼, 可以先去掉, 再加上, 看一下效果,應(yīng)該就清楚了
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表示當(dāng)前窗口,如果你的文件只有一個(gè)框架,沒有iframe和frame,那么是完全一致的,沒有區(qū)別。
top.location是在頂層frame中打開新頁
window.location是在當(dāng)前frame中打開新頁
parent.location在當(dāng)前窗口的父窗口打開Url地址
JS頁面跳轉(zhuǎn)和刷新的幾種方式
頁面跳轉(zhuǎn)
window.location.href="index.php";
window.history.back(-1);//類似于按鈕,參數(shù)是負(fù)幾,就后退幾次。
window.navigate("index.jsp"); //navigate對(duì)象包含有關(guān)瀏覽器的信息,也可以作為頁面跳轉(zhuǎn),后面直接加要跳轉(zhuǎn)的地方。
self.location.href=index.htm;
//self指代當(dāng)前窗口對(duì)象,屬于window最上層的對(duì)象;
//location.href 指的是某window對(duì)象的URL地址.
//self.location.href指當(dāng)前窗口的URL地址,去掉self默認(rèn)為當(dāng)前窗口的URL地址.
top.location=index.php;
//top 屬性返回最頂層的先輩窗口。
//該屬性返回隊(duì)一個(gè)頂級(jí)窗口的只讀引用。
//如果窗口本身就是一個(gè)頂級(jí)窗口,top 屬性存放對(duì)窗口自身的引用。
//如果窗口是一個(gè)框架,那么 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
自動(dòng)刷新
頁面自動(dòng)刷新:把如下代碼加入<head>區(qū)域中
<meta http-equiv="refresh" content="2">
其中2指每隔2秒刷新一次頁面.
頁面自動(dòng)跳轉(zhuǎn):把如下代碼加入<head>區(qū)域中
<meta http-equiv="refresh" content="2;url=http://www.baidu.com">
其中2指隔2秒后跳轉(zhuǎn)到http://www.baidu.com頁面
JS實(shí)現(xiàn)頁面自動(dòng)刷新
<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> )
//如何刷新另一個(gè)框架的頁面用
[javascript] view plain copy print?
<script language=JavaScript>
parent.另一FrameID.location.reload();
</script>
如果想關(guān)閉窗口時(shí)刷新或者想開窗時(shí)刷新的話,在<body>中調(diào)用以下語句即可。
jquery方法
$(location).attr('href', '//www.dbjr.com.cn');
$(window).attr('location','//www.dbjr.com.cn');
$(location).prop('href', '//www.dbjr.com.cn')
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
JavaScript數(shù)組實(shí)現(xiàn)數(shù)據(jù)結(jié)構(gòu)中的隊(duì)列與堆棧
這篇文章主要介紹了JavaScript數(shù)組實(shí)現(xiàn)數(shù)據(jù)結(jié)構(gòu)中的隊(duì)列與堆棧的相關(guān)資料,需要的朋友可以參考下2016-05-05
js中hasOwnProperty的屬性及實(shí)例用法詳解
在本篇文章里小編給大家整理的是一篇關(guān)于js中hasOwnProperty的屬性及實(shí)例用法詳解內(nèi)容,有需要的朋友們可以跟著學(xué)習(xí)下。2021-11-11
js實(shí)現(xiàn)屏幕自適應(yīng)局部代碼分享
這篇文章主要介紹了js實(shí)現(xiàn)屏幕自適應(yīng)局部代碼分享,需要的朋友可以參考下2015-01-01
微信小程序scroll-view橫向滑動(dòng)嵌套for循環(huán)的示例代碼
這篇文章主要介紹了微信小程序scroll-view橫向滑動(dòng)嵌套for循環(huán)的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
微信小程序button標(biāo)簽open-type屬性原理解析
這篇文章主要介紹了微信小程序button標(biāo)簽open-type屬性原理解析,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-01-01

