版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_35537301/article/details/82909527
BOM(浏览器对象模型)
通过BOM对象可以操作浏览器
Window(窗口)
属性
可以访问包括自身在内的其他四个对象
Window.history===history
方法
- 提示框
- alert() 提示框
- confirm() 确认框
- prompt() 提示输入框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>window方法之确认框</title>
<script type="text/javascript">
var value = window.confirm("您确定退出吗?");
alert(value);//确定:true,取消:false
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>window方法之输入框</title>
<script type="text/javascript">
var value = window.prompt("请输入用户名:");
alert(value);//确定:输入的内容,取消:null
</script>
</head>
<body>
</body>
</html>
- 定时器
- 定时器:有id返回值
- setInterVal(要执行的函数,间隔的毫秒值); 周期性定时器 反复执行
- clearInterVal(周期性定时器的id)
- setTimeOut(要执行的函数,间隔的毫秒值);执行一次的定时器
- clearTimeOut(执行一次的定时器)
- 打开和关闭
- 打开:open()
- 关闭:close()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>打开A</title>
<script type="text/javascript">
function poenA(){
window.open("a.html");
}
</script>
</head>
<body>
<input type="button" value="打开A页面" onclick="poenA()"/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>关闭A</title>
<script type="text/javascript">
function closeA(){
window.close();
}
</script>
</head>
<body>
我是A页面
<input type="button" value="关闭A页面" onclick="closeA()"/>
</body>
</html>
History(浏览历史)
forward() 前进
back() 后退
go(index)
go(1)
go(-1)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>history对象之go方法</title>
<script type="text/javascript">
function goTo(){
history.go(1);
}
</script>
</head>
<body>
<a href="02.html">去往第二个页面</a>
<input type="button" value="去第二个页面" onclick="goTo()"/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>history对象之go方法</title>
<script type="text/javascript">
function goBack(){
history.go(-1);
}
</script>
</head>
<body>
我是第二个页面
<input type="button" value="去第一个页面" onclick="goBack()"/>
</body>
</html>
Location(定位URL)
属性:href
- 获取当前页面的URL
- location.href
- 设置当前页面的URL
- location.href=""
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>location对象</title>
<script type="text/javascript">
function getUrl(){
alert(location.href);
}
function setUrl(){
location.href="https://www.baidu.com";
}
</script>
</head>
<body>
<input type="button" value="获取URL" onclick="getUrl()"/>
<input type="button" value="设置URL" onclick="setUrl()"/>
</body>
</html>