常用的js页面跳转汇总

最新推荐文章于 2021-05-13 18:21:12 发布

烟雨流逝

最新推荐文章于 2021-05-13 18:21:12 发布

阅读量289

点赞数

分类专栏：前端

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

场景：一般来说页面的跳转可以通过a标签来进行，但是在某些情况下页面只是写了button或者其他的标签，这时我们就需要通过其他方式来实现页面的跳转。

解决方案：

方式一：Location 对象

 
 <script  
 type 
 = 
 "text/javascript" 
 > 

 
    
 //assign() 方法可加载一个新的文档。 

 
    
 function 
   
 newDoc 
 ( 
 ) 
 { 

 
        
 window 
 . 
 location 
 . 
 assign 
 ( 
 "http://www.souvc.com/" 
 ) 
 ; 

}

 
    
 //reload() 方法用于重新加载当前文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。 

 
    
 function 
   
 reloadPage 
 ( 
 ) 
 { 

 
       
 window 
 . 
 location 
 . 
 reload 
 ( 
 ) 
 ; 

}

 
    
 //replace() 方法不会在 History 对象中生成一个新的记录。当使用该方法时，新的 URL 将覆盖 History 对象中的当前记录。 

 
    
 function 
   
 replaceDoc 
 ( 
 ) 
 { 

 
      
 window 
 . 
 location 
 . 
 replace 
 ( 
 "http://www.souvc.com" 
 ) 
 ; 

}

 
    
 function 
   
 locationHref 
 ( 
 ) 
 { 

 
      
 window 
 . 
 location 
 . 
 href 
 ( 
 "http://www.souvc.com" 
 ) 
 ; 

}

 
 </script> 

测试源代码：

<html>
<head>
<script type="text/javascript">

//assign() 方法可加载一个新的文档。
function newDoc(){
window.location.assign("http://www.souvc.com/");
}
//reload() 方法用于重新加载当前文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。
function reloadPage(){
window.location.reload();
}
//replace() 方法不会在 History 对象中生成一个新的记录。当使用该方法时，新的 URL 将覆盖 History 对象中的当前记录。
function replaceDoc(){
window.location.replace("http://www.souvc.com");
}
function locationHref(){
window.location.href("http://www.w3school.com.cn/");
}
</script>
</head>
<body>
<input type="button" value="跳转页面（直接在按钮上加方法）" onClick="location.href='http://www.souvc.com/'">
<br/>
<input type="button" value="跳转页面（加载一个新的文档）" οnclick="newDoc()" />
<br/>
<input type="button" value="重新加载页面" οnclick="reloadPage()" />
<br/>
<input type="button" value="Replace document" οnclick="replaceDoc()" />
<input type="button" value="location href" οnclick="locationHref()" />
</body>

</html>

方式二：History对象

 
 <script  
 type 
 = 
 "text/javascript" 
 > 

 
 //back() 方法可加载历史列表中的前一个 URL（如果存在）。 

 
 //调用该方法的效果等价于点击后退按钮或调用 history.go(-1)。 

 
 function 
   
 goBack 
 ( 
 ) 

{

 
    
 window 
 . 
 history 
 . 
 back 
 ( 
 ) 
 ; 

}

 
    
 //forward() 方法可加载历史列表中的下一个 URL。 

 
    
 //调用该方法的效果等价于点击前进按钮或调用 history.go(1)。 

 
 function 
   
 goForward 
 ( 
 )

{

 
    
 window 
 . 
 history 
 . 
 forward 
 ( 
 ) 
 ; 

}

 
    
 //go() 方法可加载历史列表中的某个具体的页面。history.go(number|URL) 

 
    
 //URL 参数使用的是要访问的 URL，或 URL 的子串。而 number 参数使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。 

 
 function 
   
 goBack2 
 ( 
 )

{

 
    
 window 
 . 
 history 
 . 
 go 
 ( 
 - 
 1 
 ) 
 ; 

}

 
 </script> 

方式三：其他对象

 
      <a  
      href 
      = 
      "javascript:history.go(-1)" 
      > 
      返回上一步 
      </a> 
     
      <a  
      href 
      = 
      "javascript:" 
        
      onClick 
      = 
      "window.open 
     
      ('http://www.souvc.com/','','height=500,width=611,scrollbars=yes,status=yes')" 
      > 
      souvc 
      </a> 
     
       self 
      . 
      location 
      = 
      'http://www.souvc.com/' 
      ; 
     
       top 
      . 
      location 
      = 
      'http://www.souvc.com/' 
      ; 
     
       window 
      .navigate 
      ( 
      "top.jsp" 
      ) 
      ;

 
       <a  
       href 
       = 
       "javascript:history.go(-1)" 
       > 
       返回上一步 
       </a> 
      
       <a  
       href 
       = 
       "javascript:" 
         
       onClick 
       = 
       "window.open 
      
       ('http://www.souvc.com/','','height=500,width=611,scrollbars=yes,status=yes')" 
       > 
       souvc 
       </a> 
      
        self 
       . 
       location 
       = 
       'http://www.souvc.com/' 
       ; 
      
        top 
       . 
       location 
       = 
       'http://www.souvc.com/' 
       ; 
      
        window 
       .navigate 
       ( 
       "top.jsp" 
       ) 
       ;

烟雨流逝

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
常用的js页面跳转汇总

场景：一般来说页面的跳转可以通过a标签来进行，但是在某些情况下页面只是写了button或者其他的标签，这时我们就需要通过其他方式来实现页面的跳转。解决方案：方式一：Location 对象 &lt;script type="text/javascript"&gt; //assign() 方法可加载一个新的文档。 function newDoc(){ ...
复制链接

扫一扫