首页 > web前端 > js教程 > 常用的js页面跳转代码

常用的js页面跳转代码

小云云
发布: 2018-03-28 17:11:53
原创
1980 人浏览过

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

解决方案:

    方式一:Location 对象

测试源代码:

 <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=&#39;http://www.souvc.com/&#39;">
<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对象

方式三:其他对象

2


3

4

5

6

7

8

9

10

11

12

13

14

15

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");

2

3

4

5

6

7

8

9

10

11

12

13

14

15

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中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板