常用的js页面跳转汇总

最新推荐文章于 2023-12-29 19:53:07 发布

转载最新推荐文章于 2023-12-29 19:53:07 发布 · 334 阅读

前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍了网页开发中实现页面跳转的多种方法，包括利用Location对象的assign、reload及replace方法，History对象的back、forward及go方法，以及其他如window.open等技术手段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景：一般来说页面的跳转可以通过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="跳转页面（加载一个新的文档）" onclick="newDoc()" />
<br/>
<input type="button" value="重新加载页面" onclick="reloadPage()" />
<br/>
<input type="button" value="Replace document" onclick="replaceDoc()" />
<input type="button" value="location href" onclick="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");