来源：升学就业帮讲师——肖云锐
BOM对象学习网站：
学习网站
1 认识BOM对象
1.1 什么是BOM
BOM是Browser Object Model的简写，即浏览器对象模型。
BOM由一系列对象组成，用于访问、控制、修改浏览器的属性和方法。
BOM没有统一的标准(每种客户端(IE/ google 浏览器)都可以自定标准。
1.2 理解示意图
BOM的顶层是window对象，window下面包含一些浏览器相关对象，例如文档对象document，地址栏对象location，导航对象navigation，屏幕对象screen，历史记录对象history，如下图所示:
1.3 Window对象
常用的方法：
alert (); // 弹出一个提示框.
confirm ()// 弹出一个确认框
prompt(); // 输入框
setTimeout(); // 延时任务
setInterval(); // 周期任务
clearTimeout(); // 清除延时任务
clearInterval(); // 清除周期任务
open (); // 打开新的窗口
close(); // 关闭指定窗口
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BOM对象</title>
<script>
/*
alert(); // 弹出一个提示框.
confirm()// 弹出一个确认框
prompt(); // 输入框
setTimeout(); // 延时任务
setInterval(); // 周期任务
clearTimeout(); // 清除延时任务
clearInterval(); // 清除周期任务
open(); // 打开新的窗口
close(); // 关闭指定窗口
*/
// alert(); 弹出一个提示框.
function poupWindow() {
alert("我被点击了");
}
// confirm() 弹出一个确认框
function confirmWindow() {
var flag = confirm("确定删除吗?");
if (flag) {
alert("删除成功!!!");
} else {
alert("取消!!!");
}
}
// prompt(); 输入框
function promptWindow() {
var age = prompt("请输入您的年龄:", 18);
alert("您输入的年龄是: " + age);
}
var taskId = null;
// setTimeout(); 延时任务
function task() {
alert("任务开始了!!!");
}
function startTask() {
id = setTimeout(task, 3000);
}
// clearTimeout() 清除延时任务
function stopTask() {
clearTimeout(id);
}
var intervalId = 0;
// setInterval();
// 周期任务 function startIntervalTask() {
if (intervalId == 0) {
intervalId = setInterval(function () {
var date = new Date();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds(); console.log(hour + ": " + minute + ": " + second);
}, 1000);
}
}
function stopIntervalTask() {
if(intervalId != 0) {
clearInterval(intervalId);
intervalId = 0;
}
}
var bdWin = null;
// open();
// 打开新的窗口
function openWindow() {
var url = "#34;;
bdWin = open(url);
}
// close(); // 关闭指定窗口
function closeWindow() {
bdWin.close();
}
</script>
</head>
<body>
<input type="button" value="弹出框" onclick="poupWindow();"> <br>
<input type="button" value="验证框" onclick="confirmWindow();"> <br>
<input type="button" value="提示框" onclick="promptWindow();"> <br>
<input type="button" value="提示框" onclick="promptWindow();"> <br>
<input type="button" value="开启延时任务" onclick="startTask();"> <br>
<input type="button" value="停止延时任务" onclick="stopTask();"> <br>
<input type="button" value="开始周期任务" onclick="startIntervalTask();"> <br>
<input type="button" value="停止周期任务" onclick="stopIntervalTask();"> <br>
<input type="button" value="开启窗口" onclick="openWindow();"> <br>
<input type="button" value="关闭窗口" onclick="closeWindow();"> <br>
</body>
</html>
1.4 History对象：浏览器的历史对象
常用的方法
back()go()forward()
需求: A页面跳转到B页面，B页面后退到A页面，A页面前进到B页面
代码示例
A页面代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A</title>
<script>
function go() {
location.href = "B.html";
}
function forward() {
history .forward();
}
</script>
</head>
<body>
A Page
<input type="button" value="go" onclick="go()">
<input type="button" value="前进" onclick="forward()">
</body>
</html>
B页面代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>history对象</title>
<script>
function goback() {
history.back();
}
</script>
</head>
<body>
B page
<input type="button" value="后退" onclick="goback()">
</body>
</html>
1.5 location对象： 地址栏对象
常用属性和方法:
host:ip:端口hostname: ipport:端口pathname:路径href: url全路径reload: 重新加载当前页面replace: 替换当前页面location.href = url: 跳转到指定页面
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BOM对象_location对象</title>
<script>
function showLocationInfo() {
console.log(location.href);
console.log(location.host);
console.log(location.port);
console.log(location.hostname);
console.log(location.pathname);
}
function reloadCurrentPage() {
location.reload();
}
function replaceCurrentPage() {
location.replace("#34;);
}
function jumpPage() {
location.href = "#34;;
}
</script>
</head>
<body>
<input type="button" value="locationInfo" onclick="showLocationInfo()">
<input type="button" value="reloadCurrentPage" onclick="reloadCurrentPage()">
<input type="button" value="replaceCurrentPage" onclick="replaceCurrentPage()">
<input type="button" value="jumpPage" onclick="jumpPage()">
</body>
</html>
1.6 Screen对象:屏幕对象
常用属性:
widthheight
1.7 Navigator 对象：浏览器对象
常用属性:无
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>其他BOM对象</title>
<script>
function getScreenInfo() {
console.log(screen.width + ":" + screen.height);
}
function getNavigatorInfo() {
console.log(navigator.appName);
console.log(navigator.appVersion);
console.log(navigator.userAgent);
}
</script>
</head>
<body>
<input type="button" value="screen对象" onclick="getScreenInfo();">
<input type="button" value="navigator对象" onclick="getNavigatorInfo();">
</body>
</html>
Hi there, I enjoy reading all of your article. I wanted to
write a little comment to support you.
I know this if off topic but I’m looking into starting my own blog and
was wondering what all is required to get setup? I’m assuming
having a blog like yours would cost a pretty penny?
I’m not very web smart so I’m not 100% sure. Any tips or advice would be greatly appreciated.
Appreciate it