BOM 浏览器模型

2024-10-16 16:57:58

# BOM 概述[toc]# 1. BOM（浏览器模型）Browser 蚪嬷吃败Object Moder浏览器对象模型* 什么是BOM ？* BOM 是JS 的组成之一，* 事项和HTML 的交互* BOM 中提供了非常对的对象，用于访问浏览器的* 功能，这些功能与任何网页内容都无关* BOM 的作用： * 将相关的元素组织包裹起来，提供给我们## BOM核心--- Windowwindow 实际上表示浏览器的一个实例，* 在浏览器中，window实际上扮演了两个角色* 它既是通过JS 去访问浏览器窗口的一个接口* 又是ECMAScript 中规定的Global 对象，* 可以通过window 来操作整个浏览器============* 拓展：* Global 对象 * 是ECMAScript 总非常特殊的一个对象， * 因为这个对象其实根本不存在。 * 但是Global 无法通过new 创建。 * 但是Global 还拥有自己的属性、方法、 * 甚至还拥有全局对象 * * 一般来说 Global 都是默认在浏览器引擎 * 启动时候，自动初始化完成的 * * *===========window 对象就是BOM 的核心对象* 所有的对象都是由window 对象延伸出来* 全局作用域```var age = 18; //全局变量function sayAge(){ // 全局方法// console.log(this.age) // console.log(window.age)}sayAge();console.log(age);window.sayAge();```//this 高级的时候会讲，代表由于window 对象同时扮演者ECMAScript 的Global对象，因此所有的全局作用域中声明的全局变量以及函数等，全部都会变成window 对象的属性和方法## 3_window窗口大小问题1. 针对 IE9+,Chrome,FireFox,Opera 和safari* 浏览器窗口的内部宽度* window.innerWidth* 浏览器窗口的内部高度* window.innerHeight```var msg="窗口的高度"+window.innerHeight+ "\n窗口的高度"+window.innerWidth; ```2. 针对IE6/ IE7/ IE8 /IE5* 支持Chrome 和 FireFox* 浏览器内部高度* docment.documentElement.clientHight* 浏览器内部宽度* docment.documentElement.clientWidth3. 兼容的版本```var w =window.innerWidth ||document.documentElement.clientWidth;var h =alert("窗口宽度"+w)```## 4_调整窗口大小调整窗口大小* resizeTO() * 调整到指定大小* resizeBy() * 增加指定的宽度和高度（宽度和高度增加10px）* 在IE 8 中还可以使用## 5_打开窗口open()* open(URL,name,features) * 该方法用于打开一个新窗口 * 查找一个已经命名的窗口* 参数：* URL: * 可选参数 * 主要声明了要在浏览器新窗口中显示文档的 * URL。如果省略该参数或者该参数数值为空 * 则新窗口不会显示任何文档 * name ： * 可选参数 * 由多个逗号 * 包括数字，字母，下划线 * 声明新窗口的名称 * 标记<a> <from>的target 属性 * 如果指定存在窗口 * 那么open()方法不在创建新窗口 * 而是返回对该窗口的引用 * 同时忽略features ** features: * 可选参数 * 声明标准浏览器特征 * 如果省略，则新窗口具有所有浏览器 * 标准特征 * 如果声明特殊的特征，则按照声明执行备注：*=========窗口特征* width/height* left/top * 默认是像素* toolbar * yes/no * 1/0* scrollbar * yes/no 默认是 yes * 1/0* location * yes/no * 1/0* status * yes/no * 1/0* fullscreen 是否使用全屏显示 * yes/no * 1/0 默认是 no* menubar 是否显示菜单栏 * yes/no * 1/0* resizable 是否可调节尺寸 * yes/no * 1/0* titlebar 显示标题栏 * yes/no * 1/0```<body><button onclick="openAnother()">打开新窗口</button><script type...>var win;function openAnother(){ win = window.open("http....","","w400,h400,toolbar=no,menubar= no,left=50,top = 500");}//关闭当前窗口window.close();//一般设置按钮关闭，这里设置了，打开一瞬间就关闭了。</scrlpt></body>```## 6_定时器window 中的定时器* window 对象中的...方法* JS 中式单线程语言，但是它允许通过设置超时数值，* 以及间歇时间来调用代码在特定时间执行* 超时。。在指定的时间后去执行某段代码* 周期调用时指每隔指定多长时间....* 超时调用 * window.setIimeout()* 周期调用 * window.setInterval()```estTimeout(code,millisec)```* 参数：* * * code* 指需要放入的函数* * millisec* 执行参数1中的代码* 时间单位毫秒（ms）* 1s=1000ms*```var timeoutId = window.setTimeout(go,3000);```调用函数时需要注意：* 传入函数的时候，函数名千万不要加括号* 因为这个方法不是由我们自己调用* 而是通过引擎去进行调用```function go{ window.open("http://baidu.com");}```//取消超时调用//但是如果当前的超时调用已经执行，那么无效果```timeoutId.cancel;```上面的内容相互叠加就可以了。## 定时器```<h1></h1>var h1 = document.getElementById("time");window.setIntervall(function){ var msg = new Date().toLocaleString();}```讲事件还会将## 系统对话框* alert() 警告框* confirm() 提示框（对话框）* prompt() 提示框```var msg = prompt("请输入你的名字")；if(msg != null && msg.length > 0){ comsole.log(msg);}```设置判断该方法用于清除超时问题```window.clearTimeout(timeoutId)```## 8_location 对象location 对象* location 对象可以称为window 的子对象，* 也是最有用的BOM 对象之一* 我们可以通过window.location 来使用它，* 但是一般我们都会将 window省略* 提供了域当前窗口加载文档有关信息* 导航功能* 应用场景：* 鱼鱼获取当前网页的URL，并浏览器重定向到新的界面*====* location 对象的常用属性* host 主机名称和URL端口名* hostname 主机名* href 完整的URL* psthname 路径部分* port 端口号* protocol 协议* search 查询协议```document.write("protocol"+location.protocol+"<br>");```主机名```document.write("hostname"+location.hostname+"<br>");```将好几个一块写出来```<script...>document.write("host"+location.host+"<br>");document.write("post"+location.post+"<br>");document.write("href:"+location.href+"<br>");document.write("protocol"+location.protocol+"<br>");</script>```HBulider 边改边看模式## 9_location常用方法location 常用方法1. assign(url) 加载新的文档2. reload(reforce) 重新加载当前文档3. replace(newURL) 用新的文档替换当前文档```<body><button onclick="" ...>按钮</button></body><script...>function openNewURL(){ location.assign("http://www.baidu.com");}function reload(){ location.reload(true)}</script>```reload(reforce)* 重新加载当前文档* 参数：* reforce * 可选参数 * 一般填写 true * 该方法如果没有规定参数，或者填写参数为false * 采用HTTP 中的头if-Modifed-Since * 来检测服务器上文档是否发生改变 * * 如果文档已经改变，则会通过reload()方法 * 重新加载该文档 * 如果没有，则该方法从缓存中加载文件 * 该方法如果有参数，则会从服务器中重新加载* 该方法如果没有参数，则会优先从缓存器中重新加载注意：* reload()方法调用之后可能会造成reload 加载顺序* 之后的文档不执行* 所以一般讲reload()放在最后``````relace()* 用新的文档代替当前文档* 该方法不会在history 对象中生成记录。* 使用该方法时，会直接采用新的URL 覆盖History## History 对象* history 对象包含用户（当前浏览器窗口）中访问过的URL* history 对象是window 对象的一部分* 可以进行window.history 进行访问* 属性：* length* 方法：* back() 加载history 列表中的前一个URL* toward()加载history 列表中的下一个URL* go()加载history 列表中指定的某一页面 * 如果为负数，代表后退 * 如果为正数，代表前进```<body><button onclick="urlCount()">显示历史记录<script..>function urlCount(){ alert("历史列表中"+history.length + "个URL")；}function myForward(){ history.forward();//前进}function myBack(){ history.back();//后退}function myGo(){ history.myGO(-2);//后退两步</script> ```## 10_navigator 对象* navigator 对象包含关于浏览器的信息* navigator 对象包含属性描述正在使用的浏览器* 我们根据这些属性，进行专门平台的配置* 属性：* appCodeName* appName* appVersion* systemLanguage* language* onLine* cookieEnable * Cookie * true * false* platfrom* plugins* userAgent用法：* navigator.对应的属性```document.write("appCodeName"+navigator.appCodeName+"<br>");document.write("appCodeName"+navigator.appCodeName+"<br>");document.write("appCodeName"+navigator.appCodeName+"<br>");```相应的修改调用上面的数移动端 B 阶段媒体查询Chrome和userAgent## Screen 对象Screen 对象* Screen 对象包含有关用于屏幕的信息* 虽然Screen 对在JS 中用处不大，* 但是Screen 对象包含浏览器窗口外部的显示器信息** 例如能够获取到相应的像素宽度和高度等* 各个浏览器的Screen 对象都至少包含以下信息* =========* windth 像素宽度* height 像素高度* colorDepth 颜色位数* avaiWidth 屏幕的像素宽度减去...任务栏* availHeight 屏幕的像素高度减去...任务栏``` document.write("width : " + screen.width +"<br>"); document.write("height : " + screen.height +"<br>"); document.write("colorDepth : " + screen.colorDepth +"<br>"); document.write("availWidth: " + screen.availWidth +"<br>"); document.write("availHeight: " + screen.availHeight+"<br>");```## cookie注意：本地终端打开百度cookie实际是能看到的。```JQ...首先：E C S Network T（网络加载）P Application <-Application 里面实际是可以看到的```cookie作用可以作为1.全局变量2. 3. 4. 注意看cookie缺陷 1.2.3.4. 针对浏览器例如看到的百度这边以后工作注意提前进行加密1.2.。4.56.7.在控制台会有相应的对应有心情可以查查，目前对我们游泳的是删，增，查### cookie 存储有两个词必须要给出的name和value1. 参数1 : cookie 的 name2. 参数2: cookie 的 value3. 参数3: cookie 的存储时间（单位 day）* cookie 中 name 不同，那么就可以存储多个 cookil```function saveCookie(name,value,expireday){ //声明一个日期对象 var date = new Date(); console.log(date.getDate()); date.setDate(date.getDate()+expireday); console.log(date.toGMTString());}```cookie 的内容其实就是一段纯文本encodeURLComponent()* 该函数可以将字符串作为URL 组件去进行编码* 返回值：* URLString 的副本，其中某些字符将其* 十六进制转义序列化``` var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value) + ";expires = " + date.toGMTString(); document.cookie = cookieText; }</script></html>```储存```function getCookie(name){ //先去拿到cookie 中的字符串 var cookieText = document.cookie; //获取要查找到的cookie 的name 所在的下标 var index = cookieText.indexOf(name+"="); if(index != -1){ //查找指定的cookie 结束位置 var endIndex = cookieText.indexOf ... //把想要的cookie 中的 value 获取出来 }}```