Bom

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对象
短时间储存

image.png

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存储的数据也就被清空了。

image.png

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
posted @ 2019-12-13 22:11  一个年轻淫  阅读(97)  评论(0编辑  收藏  举报