Bom

Posted 2021-03-23 pengdt

bom是浏览器提供的api，也就是运行环境的工具
可以理解为因为有html页面所有有dom，因为运行在浏览器上所以有bom

那浏览器提供了什么呢？

• window对象
• location对象
• history对象
• navigtor对象
• 弹窗对象
• 计时器
• cookie
• Storage对象
• XMLHttpRequest构造函数
• 最新还有个缓存的api还没普及

下面复制上常用代码，来自大佬的博客

window对象
最高级的对象，下面所有的内容都是window的一部分

//关闭窗口
window.close();
//关闭窗口(a标签就是的href就是调用这个方法的)
window.open("xxx.com","_blank")
//可以使状态栏的文本暂时改变
window.status
//默认的状态栏信息，可在用户离开当前页面前一直改变文本  
window.defaultStatus

弹窗对象
window可以不写

//弹出一个具有OK按钮的系统消息框，显示指定的文本
window.alert("message");  
//弹出一个具有OK和Cancel按钮的询问对话框，返回一个布尔值
window.confirm("Are you sure?");  
//提示用户输入信息，接受两个参数，即要显示给用户的文本和文本框中的默认值，将文本框中的值作为函数值返回
window.prompt("What's your name?", "Default");  

计时器对象
window可以不写

//设置在指定的毫秒数后执行指定的代码，接受2个参数，要执行的代码和等待的毫秒数
window.setTimeout("alert('xxx')", 1000);  
//取消还未执行的暂停，将暂停ID传递给它
window.clearTimeout("ID");  
//无限次地每隔指定的时间段重复一次指定的代码，参数同setTimeout()一样
window.setInterval(function(){}, 1000);  
//取消时间间隔，将间隔ID传递给它
window.clearInterval("ID");  

history对象
当前标签的浏览历史，window可以不写

//访问浏览器窗口的历史，负数为后退，正数为前进
window.history.go(-1); 
//同上
window.history.back();  
//同上
window.history.forward();  
//可以查看历史中的页面数
window.history.length  
// 修改历史记录
window.history.pushState 
// 修改历史记录替换当前的url
window.history.replaceState 

document对象
是唯一一个既属于BOM又属于DOM的对象，window可以不写

//获取最后一次修改页面的日期的字符串表示
window.document.lastModified  
//用于跟踪用户从哪里链接过来的
window.document.referrer  
//获取当前页面的标题，可读写
window.document.title  
//获取当前页面的URL，可读写
window.document.URL  
//访问页面中所有的锚
window.document.anchors[0] 或 document.anchors["anchName"] 
//访问页面中所有的表单
window.document.forms[0] 或 document.forms["formName"]  
// 访问页面中所有的图像
window.document.images[0] 或 document.images["imgName"]  
//访问页面中所有的链接
window.document.links [0] 或 document.links["linkName"]  
//访问页面中所有的Applet
window.document.applets [0] 或 document.applets["appletName"]  
//访问页面中所有的嵌入式对象
window.document.embeds [0] 或 document.embeds["embedName"]  
//将字符串插入到调用它们的位置
window.document.write() 或 document.writeln();  

location对象
载入窗口的URL，window可以不写

//当前载入页面的完整URL
window.location.href  
//URL中使用的协议，即双斜杠之前的部分，如http
window.location.portocol  
//服务器的名字，如www.wrox.com
window.location.host  
//通常等于host，有时会省略前面的www
window.location.hostname  
//URL声明的请求的端口，默认情况下，大多数URL没有端口信息，如8080
window.location.port  
//URL中主机名后的部分，如/pictures/index.htm
window.location.pathname  
//执行GET请求的URL中的问号后的部分，又称查询字符串，如?param=xxxx
window.location.search  
//如果URL包含#，返回该符号之后的内容，如#anchor1
window.location.hash  
//同location.href，新地址都会被加到浏览器的历史栈中
window.location.assign("http:www.baidu.com");  
//同assign()，但新地址不会被加到浏览器的历史栈中，不能通过back和forward访问
window.location.replace("http:www.baidu.com");  
//重新载入当前页面，为false时从浏览器缓存中重载，为true时从服务器端重载，默认为false
window.location.reload(true | false);  

cookie对象
短时间储存

F12的第9个按钮Application这个窗口里除了前面说过的查看相关的所有文件外，cookie也在这里看，cookie是name-value的形式存在的，cookie没有同源策略，同个ip地址的cookie能通用，所以cookie常被用来作为父子iframe之间的通信

//cookie的操作
设置cookie: document.cookie = 'key=value';
获取cookie: document.cookie;
删除cookie: document.cookie = "key=value;max-age=0";
设置max-age存储期限: document.cookie = "key=value;max-age=1000"; // 1000秒

Storage对象
localStorage（本地存储）生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。
sessionStorage（会话存储）生命周期为当前窗口或标签页，一旦窗口或标签页被关闭了，那么所有通过sessionStorage存储的数据也就被清空了。

window.localStorage
window.localStorage.setItem("key", "value");
window.localStorage.getItem("key");
window.localStorage.removeItem("key");
// 上面的localStorage改成sessionStorage一样

navigator对象
在检测浏览器及操作系统上非常有用，window可以不写

//官方浏览器名的字符串表示
window.navigator.appName  
//浏览器版本信息的字符串表示
window.navigator.appVersion  
//如果启用cookie返回true，否则返回false
window.navigator.cookieEnabled  
//如果启用java返回true，否则返回false
window.navigator.javaEnabled  
//浏览器所在计算机平台的字符串表示
window.navigator.platform  
//安装在浏览器中的插件数组
window.navigator.plugins  
//如果启用了数据污点返回true，否则返回false
window.navigator.taintEnabled  
//用户代理头的字符串表示
window.navigator.userAgent  

screen对象
用于获取某些关于用户屏幕的信息，window可以不写

//屏幕的宽度与高度，以像素计
window.screen.width/window.height  
//窗口可以使用的屏幕的宽度和高度，以像素计
window.screen.availWidth/screen.availHeight  
//用户表示颜色的位数，大多数系统采用32位
window.screen.colorDepth  
//滚动条
window.moveTo(0, 0);
//填充用户的屏幕
window.resizeTo(screen.availWidth, screen.availHeight);  

XMLHttpRequest构造函数
是一个非常重要的数据请求的api，window可以不写
这个api改变了前端的生存环境，下一篇单独讲他的使用

window.XMLHttpRequest