常用的js页面跳转代码-js教程-PHP中文网

常用的js页面跳转代码

小云云

发布： 2018-03-28 17:11:53

原创

2124人浏览过

一般来说页面的跳转可以通过a标签来进行，但是在某些情况下页面只是写了button或者其他的标签，这时我们就需要通过其他方式来实现页面的跳转。本文主要和大家分享常用的js页面跳转代码，希望能帮助到大家。

解决方案：

方式一：Location 对象

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

functionnewDoc(){

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

}

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

functionreloadPage(){

window.location.reload();

}

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

functionreplaceDoc(){

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

}

functionlocationHref(){

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

}

测试源代码：

 <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对象

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

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

functiongoBack()

{

window.history.back();

}

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

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

functiongoForward()

{

window.history.forward();

}

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

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

functiongoBack2()

{

window.history.go(-1);

}

方式三：其他对象

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

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

以上就是常用的js页面跳转代码的详细内容，更多请关注php中文网其它相关文章！