BOMBrowserObjectModel-浏览器对象模型由网络浏览器暴露的所有对象组成的表示模型。当浏览器分析文档时，它会创建一个对象集合来定义文档并详细说明文档的显示方式。浏览器创建的对象称为文档对象，它是浏览器使用的更大对象集合的一部分，这个浏览器对象集合统称为浏览器对象模型或BOM子对象的双重身份被重用作为ECMAScript中的全局对象。浏览器窗口的JavaScript接口全局窗口定时器系统对话框1.1全局作用域所有通过var声明的全局变量和函数都会成为窗口对象的属性和方法vara=10;varshowA=()=>{console.log（这是）;}console.log(window.a);//10window.showA()//10letb=20;letshowB=()=>{console.log(b);}console.log(window.b);//undefinedwindow.showB()//UncaughtTypeError1.2window窗口关系窗口位置和像素比例窗口大小viewportpositionnavigationwithnewwindow1.2.1窗口关系top：顶层窗口，指向最外层窗口windowparent：父窗口windowsself:当前窗口，当前窗口//单窗口window===top//truewindow===parent//truewindow===self//true1.2.2窗口位置和像素比例screenLeft:窗口相对于屏幕左侧screenTop：相对于顶部的位置moveTo(x,y)：移动到绝对坐标moveBy(x,y)：相对于当前位置的偏移//半屏console.log(screenLeft);//953console.log(screenTop);//30且moveTo()和moveBy()只在IE中有效，不再举例devicePixelRatio：物理像素和逻辑像素缩放因子1.2.3窗口大小innerWidth：页面视口在窗口中的宽度innerHeight：窗口的高度窗口document.documentElement.clientWidth/clientHeight中的页面视口也表示外视口大小width：窗口宽度outerHeight：窗口高度console.log(innerHeight);//364console.log(outerHeight);//1057resizeTo(x,y)：设置窗口的绝对大小resizeBy(x,y)：相对于originalsize方法和Zoomingout也只在IE上有效，其他浏览器支持，但可能处于保护模式。1.2.4Viewportsize上面介绍了两种获取可视区域宽度和高度的方法。页面宽高较大时，可视区域滚动.log(pageXOffset);//200console.log(scrollX);//200console.log(pageYOffset===scrollY);//truescroll(x,y):滚动到绝对坐标scrollTo(x,y):滚动到绝对坐标scrollBy(x,y):相对于当前位置的偏移参数，可以是一个option对象，具体描述滚动行为//平滑滚动到顶部scrollTo({left:0,top:0,behavior:'smooth'})//向下滚动一页scrollBy({left:0,top:innerHeight,behavior:'smooth'})behavior:smooth:smoothscrollinginstant:instantscrollingauto:instant1.2.5navigationandnewwindowopen(url,name,features):使用指定的名称将指定的资源加载到浏览器上下文中，打开一个新窗口withnoname,name打开指定名称'_self'的窗口，'_blank''_parent'在父框架中打开，如果没有name，则相当于'_self''_top'，进入顶层browserContext，如果没有就相当于'_self'featuresheight,width,top,left：新窗口的大小和位置fullscreen：是否最大化窗口IElocation：是否显示地址栏Menubar：是否显示菜单栏toolbar:是否显示工具栏status:是否显示状态栏resizable:是否可以拖动改变新窗口的大小scrollbars:yes内容过长时不滚动boolean类型默认noopen返回当前窗口的窗口，opener返回打开该窗口的窗口newWin=open('http://www.bilibili.com','_blank','height=400,width=400,top=0,left=0,resizable=yes')//关闭窗口newWin.close()newWin.closed//trueloadingstage中的open()会被浏览器拦截，只允许用户手动添加窗口1.2TimersetTimeout(func,delay,arg1...):在指定时间参数：arg为func回调的默认参数返回值，返回TimerID//2000ms后执行lettimer=setTimeout((...a)=>{console.log(a);},2000,'a','b');//关闭定时器clearTimeout(timer)setInterval(func,delay,arg1...):每隔一段时间执行一次。参数和返回值同setTimeout。通过clearInterval取消间隔时间：每隔一段时间向执行队列中添加一个任务，无论浏览器需要多长时间开始执行，都会在下一个时间间隔时向执行队列中添加另一个任务，不管前一个任务是否执行。意思是可能有多个任务被定时器添加，最后没有间隔同时执行的效果1.3系统对话框alert():警告窗口confirm():确认窗口-返回布尔值prompt():提示对话框box-返回字符串或nullfind()：查找页面内容-返回布尔值print()：显示打印对话框一般我们会自己写对话框，在样式和功能上都比较完善2location对象window的公共属性和document：提供当前窗口加载的文档信息，以及常用的导航功能window.location===document.location//truehref：完整URLorigin：URL源地址只读protocol：协议名host：服务器名+端口号hostnamr：服务器名port：端口号pathname：路径或文件名hash：哈希值，#search之后的值：查询参数username：域名前指定的用户名密码：域名前指定的密码2.1查询字符串location.search()返回查询参数，需要拆分保存//使用字符串拆分遍历函数getQueryStringArgs()的方法{letqs=location.search.length>0？location.search.slice(1):'';常量参数={};for(constitemofqs.split('&').map(i=>i.split('='))){letkey=decodeURIComponent(item[0])letval=decodeURIComponent(item[1])if(key.length)args[key]=val}returnargs}decodeURIComponet函数是一个解码函数，将编码后的URI的转义序列转换为原始字符functiongetQueryStringArgs(){letqs=newURLSearchParams(location.search)常量参数={};for(constitemofqs){letkey=decodeURIComponent(item[0])letval=decodeURIComponent(item[1])if(key.length)args[key]=val}返回args}console.log(getQueryStringArgs());newURLSearchParams(query)返回一个可迭代对象，以数据的形式存储key-val实例对象，可以使用get()set()delete()方法相当于处理后返回一个map结构。2.2location上的方法assign(url)：修改浏览器地址，location的其他地址属性会重新解析replace(url)：替换浏览器地址replace与assign不同是的，原页面不会保存到替换后的sessionhistory，相当于直接替换reload()：重新加载page3navigatorobjectuseragentstatusandidentification，允许脚本查询并注册自己进行一些activityattributesconnection：设备网络连接信息只读onLine：是否联网deviceMemory：设备内存hardwareConcurrency：逻辑处理器核心数，浏览器可并行的最大工作线程数maxTouchPoints：最大关联联系人数language[s]:浏览器的主要语言和首选语言数组mediaDevices:可用的媒体设备plugins:插件数组userAgent:用户代理字符串webdriver:浏览器是否被自动程序控制storage:暴露相关APIserviceWorker:暴露相关APIpermissions:暴露相关APImediaCapabilities:暴露相关APIlocks:暴露相关API当前设备geolocation方法registerProtocolHandler(scheme,url)网站返回一个promise为自己的注册协议requestMediaKeySystemAccess(keySystem,supportedConfigurations)访问特定媒体的密钥系统，反过来可以创建密钥来解密媒体流sendBeacon(url,data)异步发送数据到指定地址，如果只是简单的字符串，则发送数据到这个地址和字符串拼接后的地址，并返回trueshare(data)data:urltexttitlefilesreturnpromise,returns当前平台的共享机制，数据格式不正确。承诺被拒绝。vibrate(pattern)触发设备振动。不支持返回false。pattern为单个振动或振动数组4屏幕对象客户端在浏览器窗口外显示的信息没有系统组件占用的屏幕availTop：最顶层colorDepth：屏幕颜色的位数pixelDepth：屏幕位深orientation：屏幕方向5history对象导航history5.1基本属性和方法length：历史记录数back():后退forward():前进go(n):前进/后退|n|步骤，或指定地址以导航到最近的地址5.2History状态管理pushState(state,title,url):向历史添加一个statereplaceState(state,title,url):替换当前history当pushState()会触发popstate事件时，其事件对象的state属性包含pushState的第一个状态参数pushState()创建的“假”URL对应服务器上真实的物理URL，否则点击刷新会出现404错误一些配置解决这个问题
