BOM
浏览器对象模型（BOM）以window对象为依托，表示浏览器窗口和页面可见区域。同时window对象还是ECMAScript中的Global对象，因而所有的全局变量和函数都是它的属性和方法，且所有原声构造函数及其他函数都存在与他的命名空间下。
- 在使用框架时，每个框架都有自己的window对象以及所有原生构造函数以及其他函数的副本。每个框架都保存在frames集合中，可以通过位置或者名称来访问。
- 有一些窗口指针，可以用来引用其他框架，包括父框架。
- top对象始终指向最外层的框架，也就是整个浏览器的窗口。
- parent对象表示包含当前框架的框架，而self对象则指的是window。
- 使用location对象可以通过编程的方式访问浏览器的导航系统，设置相应的属性，可以逐段或整体的修改浏览器的URL。
- 调用replace()方法可以导航到一个新的URL，同时该URL会替换浏览器历史记录中当前显示的页面。
- navigator对象提供了与浏览器有关的信。
- screen对象中保存着与客户端显示器有关的信息，这些信息一般只用于站点分析。
- history对象可以访问浏览器的历史记录。
window.history：用来控制前进和后退两个按钮的。
window.history.back()：后退
window.history.forward()：前进
window.history.go(-1) = window.history.back()
window.history.go(1) = window.history.forward()
window.innerHeight：获得浏览器窗口的内容高度。包含水平滚动（如果有的话）
window.innerHeight;不包括tab栏和地址栏。
window.location：操作刷新按钮和地址栏
//在当前页面打开百度
window.location.href = window.location = 'http://www.baidu.com'
//不写http就会出错，是相对路径,去当前目录下的www.baidu.com的目录下
window.location.href = 'www.baidu.com'
//正确写法：
http://www.baidu.com
//www.baidu.com
https://www.baidu.com
//获取协议
location.protocol
//获取域名
location.hostname
location.search
location.host
location.origin
.......
window.navigator：获取浏览器的所有
以下为运行window.navigator的结果部分截图
截图.PNG
userAgent:用户代理
利用userAgent检测浏览器是什么版本
window.navigator.userAgent
// "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36"
window.parent:
window.parent = 父页面的window.name
window.screen：获取屏幕相关的信息
window.screen.availHeight // 728
window.screen.availWidth // 1366
window.screen.colorDepth // 24
window.screen.height // 768
window.screen.width // 1366
window.self = window
self是一个全局变量
window.self
// Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
var self = 1
window.self
// 1
Window.getComputedStyle()
该方法返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值。 私有的CSS属性值可以通过对象提供的API或通过简单地使用CSS属性名称进行索引来访问。
- 基本语法：
let style = window.getComputedStyle(element, [pseudoElt]); - 如何获取元素的真实宽高
var div = document.querySelector('div')
function getStyle(element,attr){
console.log(window.getComputedStyle(element[attr])
}
getStyle(div,'color')
getStyle(div,'width')
getStyle(div,'height')
打开一个新的窗口
-
open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。
window.open(url,windowName,windowFeature)
<button id = "button1">open a window</button>
<script>
button1.onclick = function(){
let f = 'width= 400,height = 400,toolbar=no,menbar=no,location=no,scrollbars=yes,resizable=yes'
window.open('http://www.baidu.com','_blank',f)
}
//第二个参数的含义：浏览器的名字
// _self表示当前窗口
// _blank，为新窗口打开，默认值
// 第三个参数的含义
// 打开的新的窗口的宽度和长度。
// location = no,新打开的窗口的地址不可以修改
</script>
- 通过demo访问demo1，点击reload可以刷新demo1
不能是在file协议下进行，开启一个静态服务器
demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1.0 ,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id = "button1">open a window</button>
<script>
document.write(Math.random())
</script>
<script>
button1.onclick = function(){
let f = "width=400,height=400,toolbar=no,menbar=no,location=no,scrollbars=yes,resizable=yes"
window.open('demo1.html','_blank',f)
}
</script>
</body>
</html>
demo1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id = "button2"> reload</button>
<script>
button2.onclick = function(){
//点击此处刷新之前的页面
window.opener.location.reload()
window.close()//自己关闭
}
</script>
</body>
</html>
在页面正中央打开一个指定宽高的窗口
bom.js,即封装jQuery部分
window.$ = function(){
let array = []
return array
}
$.bom = {
openAtCenter:function(width,height,url){
window.open(url,'_blank',`
width = ${width}px,height = ${height}px,
screenX = ${screen.width/2 - width/2}px,
screenY = ${screen.height/2 - height/2}px
`)
}
}
打开一个网页，之后刷新自己，在关闭打开的网页
//打开的人自己刷新一下
window.opener.location.reload()
//弹出的窗口自己关闭
window.close()
逐个访问查询字符串中的参数
<script>
function getQueryStringArgs(){
//取得查询字符串并去掉开头的问号
var qs = (location.search.length > 0 ? location.search.substring(1) : ''),
//保存数组的对象
args = {},
//取得每一项
items = qs.length ? qs.split('&') : [],
item = null,
name = null,
value = null,
//在for循环中使用
i = 0,
len = items.length;
//逐个将每一项添加到args对象中
for(i = 0; i < len; i++){
item = items[i].split('=')
name = decodeURIComponent(item[0])
value = decodeURIComponent(item[1])
if(name.length) {
args[name] = value
}
}
return args
}
//假设：http://10.13.17.52:8080/%E6%9F%A5%E8%AF%A2%E5%8F%82%E6%95%B0.html?q=123&w=345
var args = getQueryStringArgs()
console.log(args['q'])
console.log(args['w'])
</script>
修改查询参数
http://xxx.com/index.html?a=1(你好)&b=2
$.bom.search('a') // 1 / 你好
$.bom.search('a','xxx')
http://xxx.com/index.html?a=xxx
$.bom = {
search:function(name,value){
let searchAll = function(){
let result = {}
let search = window.location.search
//去掉问号
if(search[0] === '?'){
search = search.slice(1)
}
//用&分割成数组
let searchArr = search.split('&')
//遍历数组
for(var i = 0; i < searchArr.length; i++){
let parts = searchArr[i].split('=')
console.log(parts)
result[decodeURIComponent(parts[0])] = decodeURIComponent(parts[1])
//parts[0] === 'a'
//parts[1] === '1'
//result['a'] === '1'
}
return result
}
let result = searchAll()
if(value === undefined){
return searchAll()[name]
}else{
// 已经有 a = xxx 字样
// // 没有 a = xxx 字样
if(result[name] === undefined){
location.search += `&${encodeURIComponent(name)}=${encodeURIComponent(value)}`
}else{
result[name] = encodeURICompent(value)
let search = "?"
for(let key in result){
newSearch += `${encodeURICompent(key)}=${encodeURICompent(result[key]) || ''}&`
}
location.search = newSearch
}
}
}
具体的封装代码
window.$ = function(){
let array = []
return array
}
$.bom = {
openAtCenter:function(width,height,url){
window.open(url,'_blank',`
width = ${width}px,height = ${height}px,
screenX = ${screen.width/2 - width/2}px,
screenY = ${screen.height/2 - height/2}px
`)
},
search: function(name,value){
let searchAll = function(){
let search = window.location.search
let result = {}
//如果有问号，则把问号去掉，即原search的第1位变成新search的第0位
if(search[0] === '?'){
search = search.slice(1)
}
//用 & 分隔成数组
let searchArray = search.split('&')
//遍历数组
for(var i = 0; i < searchArray.length; i++){
//用 = 分割成两个数组
let parts = searchArray[i].split('=')
result[decodeURIComponent(parts[0])] = decodeURIComponent(parts[1] || '')
//如果a的值为汉字，也能很好的打印出来
// result[parts[0]] = parts[1] 此时a不为汉字，不是a的取值，a代表的是一类名称
//parts[0] === 'a'
//parts[1] === '1'
//result['a'] === '1'
}
return result
}
let result = searchAll()
if(value === undefined){
return result[name]
}else {
//对a进行赋值，分两种情况
//1. 已经有a = xxx字样
//2. 没有a = xxx,需要search += '&a=frank'
if(result[name] === undefined){
location.search += `&${encodeURIComponent(name)}=${encodeURIComponent(value)}`
}else{
result[name] = encodeURIComponent(value)
let newSearch = "?"
for(let key in result){
newSearch += `${encodeURIComponent(key)}=${encodeURIComponent(result[key]) || ''}&`
}
location.search = newSearch
}
}
}
}
//screen.width/2，screen.height/2是让左上角在正中心
//width/2,height/2是让弹出窗口的中心在页面的正中心
//return result[name] 如果a的值为汉字，打印出来则为乱码，只能打印英文结果
