一、
History对象:有关客户访问过的URL的信息
名称 说明
back() 加载History列表中的上一个URL
forword() 加载History列表中的下一个URL
go() 加载History列表中的一个URL或要求浏览器移动指定的页面数
back()方法相当于后退按钮;
forword()方法相当于前进按钮;
go(1)代表前进1页;
go(-1)代表后退1页,等价于back()方法;
eg:创建三个HTML页面
页面一:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input type="button" id="btn" value="打开02.html" />
<script type="text/javascript">
document.getElementById("btn").onclick = function() {
location.href = "02.html"
}
</script>
</body>
</html>
页面二:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" id="btn1" value="back">
<input type="button" id="btn2" value="打开03.html">
<input type="button" id="btn3" value="forward()">
<input type="button" id="btn4" value="go">
<script type="text/javascript">
document.getElementById("btn1").onclick=function(){
history.back()
}
document.getElementById("btn2").onclick=function(){
location.href="03.html"
}
document.getElementById("btn3").onclick=function(){
history.forword()
}
document.getElementById("btn4").onclick=function(){
history.go(-1)
}
</script>
</body>
</html>
页面三:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" id="btn1" value="返回02.html">
<input type="button" id="btn2" value="go">
<script type="text/javascript">
document.getElementById("btn1").onclick=function(){
history.back()
}
</script>
</body>
</html>
二、
Location对象:有关URL的信息
属性 说明
host 设置或检索位置或URL的主机名和端口号
hostname 设置或检索位置或URL的主机名部分
href 设置或 检索完整的URL字符串
方法 说明
assign 加载URL指定的新的HTML文档
reload 重新加载当前页
replace 通过加载URL指定的文档来替换当前文档
eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" id="btn1" value="assign">
<input type="button" id="btn2" value="reload">
<input type="button" id="btn3" value="replace">
<script type="text/javascript">
console.log(location.host)
console.log(location.hostname)
console.log(location.href)
document.getElementById("btn1").onclick=function(){
location.assign("http://www.baidu.com")//有后退功能,可以返回
}
document.getElementById("btn2").onclick=function(){
location.reload()
}
document.getElementById("btn3").onclick=function(){
location.replace("http://www.baidu.com")//是替换当前页面,无法后退
}
</script>
</body>
</html>
三、
Document对象
每个载入浏览器的HTML文档都会成为Document对象
事件 说明
onload() 对象装载完成后触发
onkeydown 按下一个键
onkeyup 松下一个键
onkeypress 按下然后松开一个键
onunload() 对象被卸载后触发
onmousedown 按下鼠标键
onmousemove 移动鼠标
onmouseout 鼠标离开当前页面
onmouseover 鼠标移动到当前页面
onmouseup 松开鼠标键
onclik 单机鼠标键
ondblclick 双击鼠标键
四、
Window对象常用事件
事件 说明
onload() 对象转载完成后触发
onscroll() 窗口的滚动条被拖动时触发
onresize() 窗口的大小改变时触发
onbiur()/onfocus() 窗口失去/获得焦点时触发
onerror() 遇到执行错误时触发
onunload() 对象被卸载后触发
最后
以上就是务实斑马最近收集整理的关于JavaScript--History对象、Location对象、Document对象、Window对象。的全部内容,更多相关JavaScript--History对象、Location对象、Document对象、Window对象内容请搜索靠谱客的其他文章。
发表评论 取消回复