一般来说页面的跳转可以通过a标签来进行,但是在某些情况下页面只是写了button或者其他的标签,这时我们就需要通过其他方式来实现页面的跳转。本文主要和大家分享常用的js页面跳转代码,希望能帮助到大家。
解决方案:
方式一:location 对象
<script type="text/javascript">
//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);
}
</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)。
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);
}
</script>
方式三:其他对象
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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);
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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);
以上就是常用的js页面跳转代码的详细内容。