来源：升学就业帮讲师——肖云锐
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
Hi there, the whole thing is going perfectly here and ofcourse every one
is sharing facts, that’s actually fine, keep up writing.