BOM操作常用命令详解及代码案例
BOM(Browser Object Model)是浏览器对象模型,是浏览器提供的JavaScript操作浏览器的API。BOM提供了与网页无关的浏览器的功能对象,虽然没有正式的标准,但现代浏览器已经几乎实现了JavaScript交互性方面的相同方法和属性,因此常被认为是BOM的方法和属性。本文将详细介绍BOM操作中的常用命令,并通过代码案例进行解释。
1. 获取浏览器窗口尺寸
- 获取可视窗口宽度 :
window.innerWidth
- 获取可视窗口高度 :
window.innerHeight
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var m1 = window.innerWidth;
var m2 = window.innerHeight;
console.log(m1);
console.log(m2);
</script>
</body>
</html>
2. 浏览器的弹出层
- 提示框 :
window.alert('提示信息')
- 询问框 :
window.confirm('提示信息')
- 输入框 :
window.prompt('提示信息', '默认值')
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// window.alert('你好!')
// var res = window.confirm('你好吗?')
// console.log(res)
var res2 = window.prompt('你是哪个省的?');
console.log(res2);
</script>
</body>
</html>
3. 开启和关闭标签页
- 开启 :
window.open('地址')
- 关闭 :
window.close()
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="on">开启</button>
<button id="off">关闭</button>
<script>
var on = document.getElementById('on');
var off = document.getElementById('off');
on.onclick = function() {
window.open('https://www.baidu.com/');
}
off.onclick = function() {
window.close();
}
</script>
</body>
</html>
4. 浏览器常见事件
- 资源加载完毕 :
window.onload = function() {}
- 可视尺寸改变 :
window.onresize = function() {}
- 滚动条位置改变 :
window.onscroll = function() {}
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="图片链接" alt="">
<script>
window.onload = function() {
console.log('资源已经加载完毕');
}
window.onresize = function() {
console.log('可视尺寸改变');
}
window.onscroll = function() {
console.log('滚动条位置改变');
}
</script>
</body>
</html>
5. 浏览器的历史记录操作
- 回退页面 :
window.history.back()
- 前进页面 :
window.history.forward()
- 跳转到指定页面 :
window.history.go(n)
,其中n可以是负数(表示后退)或正数(表示前进)
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="goBack()">回退</button>
<button onclick="goForward()">前进</button>
<button onclick="goToPage(-2)">回退两页</button>
<script>
function goBack() {
window.history.back();
}
function goForward() {
window.history.forward();
}
function goToPage(n) {
window.history.go(n);
}
</script>
</body>
</html>
6. 浏览器卷去的尺寸和滚动
- 卷去的高度 :
document.documentElement.scrollTop
或window.scrollY
- 卷去的宽度 :
document.documentElement.scrollLeft
或window.scrollX
- 滚动到指定位置 :
window.scrollTo(left, top)
或window.scrollTo({left: xx, top: yy, behavior: 'smooth'})
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
width: auto;
height: 3000px;
}
button {
position: fixed;
bottom: 50px;
right: 50px;
}
</style>
</head>
<body>
<button id="go">传送</button>
<script>
var go = document.getElementById('go');
go.onclick = function() {
window.scrollTo({left: 300, top: 400, behavior: "smooth"});
}
</script>
</body>
</html>
7. Navigator对象
Navigator
对象包含有关浏览器的信息。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
console.log('浏览器品牌', navigator.appName);
console.log('浏览器版本', navigator.appVersion);
console.log('用户代理', navigator.userAgent);
console.log('操作系统', navigator.platform);
</script>
</body>
</html>