JS實現(xiàn)頁面跳轉鏈接的幾種方式匯總

更新時間：2024年01月09日 14:45:43 作者：viceen

這篇文章主要介紹了JS實現(xiàn)頁面跳轉鏈接的幾種方式,簡單總結了幾種頁面跳轉功能的實現(xiàn),有使用js跳轉頁面,返回上一次預覽界面及button按鈕添加事件跳轉,本文結合實例代碼給大家介紹的非常詳細,需要的朋友參考下吧

js實現(xiàn)頁面跳轉鏈接的幾種方式

1、在當前窗口打開

window.location. rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  
// 等價于    
<a  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  target="_self">跳轉到百度</a>

2、在新窗口打開

window.open("http://www.baidu.com")  
// 等價于 
<a  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  target="_blank">跳轉到百度</a>

3、返回上一頁

window.history.back(-1)

4、跳轉鏈接

self.location. rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"

self 指代當前窗口對象，屬于window 最上層的對象。

location.href   // 指的是某window對象的url的地址
self.location.href   // 指當前窗口的url地址，去掉self默認為當前窗口的url地址，一般用于防止外部的引用
top.location.href   // 為引用test.html頁面url的父窗口對象的url

如果你的網頁地址是:http://www.a.com，別人的是http://www.b.com, 他在他的頁面用iframe等框架引用你的http://www.a.com,那么你可以用:

if(top.location.href!=self.location.href){
       location. rel="external nofollow" ;
}

來轉向你的頁面,top指代的是主體窗口,這里top.location.href返回http://www.b.com;

下面簡單總結了幾種頁面跳轉功能的實現(xiàn)

第一種：使用JS跳轉頁面

1）跳轉帶參

<script language="javascript" type="text/javascript">
       window.location. rel="external nofollow"  + window.location.href; 
</script>

2）跳轉無參

<script>window.location.;</script>

第二種：返回上一次預覽界面

<script language="javascript">
	alert("返回");
	window.history.back(-1);
</script>

HTML頁面嵌套

<a href="javascript:history.go(-1)" rel="external nofollow" >返回上一步</a>
<a href="<%=Request.ServerVariables(" rel="external nofollow" HTTP_REFERER")%>">返回上一步</a>

第三種：button按鈕添加事件跳轉

<input name="前端知音" type="button" value="前端知音" onClick="location.href='login.do'">

第四種：在新窗口打開

<a href="javascript:" rel="external nofollow"  onClick="window.open('login.do','','height=500,width=611,scrollbars=yes,status=yes')">新窗口</a>

第五種：通過meta設置跳轉頁面

<head>
    <!--只刷新不跳轉 -->
    <meta http-equiv="refresh" content="5">
    <!--定時跳轉 -->
    <meta http-equiv="refresh" content="5;url=index.html"> 
</head>

到此這篇關于JS實現(xiàn)頁面跳轉鏈接的幾種方式的文章就介紹到這了,更多相關js頁面跳轉鏈接內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！