history对象和location对象的常用方法
一、history对象的常用方法
forward()、back()、go()
forward()相当于浏览器的前进按钮
back()相当于浏览器的后退按钮
go(参数)前往参数的历史位置,正数往前,负数往后
demo如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a{
display: block;
float: left;
margin-right: 20px;
padding: 5px;
border: 2px solid #D12147;
}
.btn{
cursor: pointer;
background:cornflowerblue;
color:#D0011B;
}
</style>
</head>
<body>
<a class="page" href="#page1">第一页</a>
<a class="page" href="#page2">第二页</a>
<a class="page" href="#page3">第三页</a>
<a class="btn" onclick="history.forward()">历史前进</a>
<a class="btn" onclick="history.back()">历史后退</a>
<input type="text" name="" id="goHistory" value="" />
<input type="button" id="goHistoryBtn" value="前往历史" onclick="history.go(goHistory.value)"/>
</body>
</html>
先按’第一页’、’第二页’、’第三页’切换location的hash属性,改变浏览器地址栏的显示
点击’历史前进’和’历史后退’可进行切换改变浏览器上方url的hash
在输入框输入数字,再按’前往历史’可前往到,之前点击所改变范围内的历史hash
二、location对象的常用方法
1.assign()
assign(参数)加载新的网址,参数为url
location.assign('about:blank');//加载一个新的空白页
2.reload()
reload()重新加载当前页面
location.reload();//重新加载当前页面
3.replace()
replace(参数)加载一个页面替换当前页面,参数为url
location.replace('about:blank');//加载一个空白页替换当前页面