15BOM编程艺术
BOM编程艺术
什么是BOM
BOM的全称为 Browser Object Model，被译为浏览器对象模型
BOM提供了独立于HTML页面内容，而与浏览器相关的一系列对象。主要被用于管理浏览器窗口及与测览器窗口之间通信等功能。
BOM由一系列对象构成，这些对象可以简单理解为是由各个览器所提供的，例如 Window对象等。
Window对象
全局作用域
- 在浏览器环境中运行
javascript逻辑时，在全局作用域中定义的对象、变量和函数都是Window对象的属性和方法。 var test = 666 console.log('test:', test) console.log('windows.test:', window.test) function t() { console.log('this is function') } t() window.t() delete window.test console.log('删除windwos.test后test的值:', test) console.log('删除windwos.test后windows.test的值:', window.test) delete test console.log('删除test后test的值:', test) console.log('删除test后windows.test的值:', window.test)
- 根据以上测试结果，可以很清楚的发现：删除是不起作用的。
https://antmoe.gitee.io/project/2020/05/12/01_window对象.html
浏览器窗口的宽度和高度
innerWidth和innerHeight属性 只读属性，返回当前浏览器窗口的可视宽度和高度。如果存在滚动条，也包含滚动条。outterWidth和outterHeight属性 只读属性，返回当前浏览器窗口的整个宽度和高度。
https://antmoe.gitee.io/project/2020/05/12/02_图片跟随窗口变化.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
}
img {
width: 100%;
}
</style>
</head>
<body>
<img id="img" src="https://ae01.alicdn.com/kf/H1d2dc39c58a84dc0960d4173b1bbc4643.jpg" alt="">
<script>
var img = document.getElementById('img')
// resize表示重新设置大小
window.addEventListener('resize', function () {
console.log(window.innerWidth, window.innerHeight)
img.style.width = window.innerWidth + 'px'
img.style.height = window.innerHeight + 'px'
})
</script>
</body>
</html>window.innerWidth等属性得值均为数字类型，作为宽度需加单位。例如window.innerWidth + 'px'
Windows对象与self属性
Window对象的self属性返回当前浏览器窗口的只读属性。换句话讲，Self属性返回的是 Window对象的引用。
if (window.top != window.self) {
console.log('这个窗口不是最顶层窗口')
} else {
console.log('这个窗口是最顶层窗口')
}open和close
open[url]参数参数打开地址。close()关闭当前页签
以上两个方法均是操作页签
https://antmoe.gitee.io/project/2020/05/12/03_打开与关闭浏览器窗口.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">按钮</button>
<button id="close">关闭</button>
<script>
var btn = document.getElementById('btn')
var closebtn = document.getElementById('close')
btn.addEventListener('click', function () {
window.open('https://baidu.com')
})
closebtn.addEventListener('click', function () {
window.close()
})
</script>
</body>
</html>Navigator对象
Navigator对象包含了一些有美浏览器状态的信息。可以通过window.navigator属性得到 Navigator对象。
https://antmoe.gitee.io/project/2020/05/12/04_navigator.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 以下属性均为只读属性
console.log('浏览器的代码名：', navigator.appCodeName)
console.log('浏览器的名称：', navigator.appName)
console.log('浏览器的平台和版本信息：', navigator.appVersion)
console.log('运行浏览器的操作系统平台：', navigator.platform)
console.log('运行浏览器的userAgent：', navigator.userAgent)
// 判断用户使用的平台
var ua = navigator.userAgent
if (/windows/i.test(ua)) {
console.log('当前是Windows系统')
} else if (/mac/i.test(ua)) {
console.log('当前是mac操作系统')
} else if (/android/i.test(ua)) {
console.log('当前是android操作系统')
} else if (/iphone/i.test(ua)) {
console.log('当前是iphone操作系统')
}
</script>
</body>
</html>
History对象
History对象包含用户在测览器中访问过的URL（网址）。
length属性 History对象的length属性可以获取用户在浏览器中访问网址的数量。- 前进和后退功能
方法名称描述
forward()实现跳转下一个页面，作用和浏览器的前进按钮一样back()实现跳转到上一个页面，作用和浏览器的回退按钮一样go()实现跳转到指定的页面。如果为负数表示后退，如果为正数表示前进
Location对象
Location对象包含了浏览器的地址栏中的信息，该对象主要用于获取和设置地址。 Location对象很特别，因为该对象既是 Window对象的属性，又是 Document对象的属性。
属性/方法名称 | 描述 |
|---|---|
host | 返回服务器名称和端口号 |
hostname | 返回服务器名称 |
href | 返回当前加载页面的完整URL |
pathname | 返回当前URL中的目录和文件名 |
port | 返回当前URL中的端口号 |
protocol | 返回页面使用的网络协议 |
assign() | 载入一个新的文档，作用和直接修改 Location相同 |
reload() | 重新载入当前文档，作用和刷新按钮一样。参数为true时，则会强制清空缓存刷新页面 |
replace() | 用新的文档替换当前文档（不会生成历史记录，不能使用回退按钮回退） |
- 获取和设置地址 https://antmoe.gitee.io/project/2020/05/12/05_获取和设置地址.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button id="btn">按钮</button> <script> var btn = document.getElementById('btn') btn.addEventListener('click', function () { console.log('Location对象为：', window.location) window.location = 'https://www.baidu.com' }) // 也可以用下边的方式 // btn.addEventListener('click', function () { // console.log('Location对象的href属性为：', location.href) // location.href = 'https://www.baidu.com' // }) </script> </body> </html>