JS之BOMBOM！

什么是BOM?

　　bom即browser object model 也就是浏览器对象模型，BOM由多个对象组成，其中代表浏览器窗口的window对象是BOM的顶层对象，其他对象都是该对象的子对象。

　　顶层对象：window

　　子对象：location：location 对象包含有关当前 URL 的信息；

　　　　　　history：History 对象包含用户（在浏览器窗口中）访问过的 URL；

　　　　　　screen：Screen 对象包含有关用户屏幕的信息；

　　　　　　navigator：Navigator 对象包含有关访问者浏览器的信息；

　　　　　　document：Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问；

　　　　　　event：Event 对象代表着事件对象的状态。

　一.window对象：

　　（一）alert警告框

　　　　语法：window.alert（）；或 alert（）；

　　　　功能：显示一段带有消息和确认按钮的警告框

　　（二）confirm选择框

　　　　语法：window.confirm（）；或 confirm（）；

　　　　功能：显示一个带有指定消息的和确定及取消按钮的对话框

　　　　返回值：用户点击确定，confirm（）返回true

　　　　　　　　用户点击取消，confirm（）返回false

　　(三)prompt输入框

　　　　语法：window.prompt（text[,defaultText]）；或者 prompt（text，[,defaultText]）；

　　　　参数：text：要在对话框中显示的纯文本（不是HTML格式文本）

　　　　　　   defaultText：默认的输入文本

　　　　返回值：如果用户点击提示框的取消按钮，则返回null

　　　　　　　　如果用户点击确定按钮，则返回输入的内容

　　（四）open打开一个新窗口

　　　　语法：window.open（pageURL，name，parameters）

　　　　功能：打开一个新的浏览器窗口或者查找一个名称的窗口

　　　　参数：pageURL：子窗口路径

　　　　　　　name：子窗口的名字

　　　　　　　parameters：窗口参数（各参数用逗号分隔）

　　　　　　　　　　width：窗口宽度，

　　　　　　　　　　height：窗口高度，

　　　　　　　　　　left：窗口X轴坐标 ；top：窗口Y轴坐标，

　　　　　　　　　　toolbar：是否显示浏览器工具栏（yes/no），

　　　　　　　　　　menubar：是否显示菜单栏（yes/no），

　　　　　　　　　　scrollbars：是否显示滚动条（yes/no），

　　　　　　　　　　location：是否显示地址字段，

　　　　　　　　　　status：是否添加状态栏，

　　（五）close关闭浏览器

　　　　语法：window.close（）；

　　　　功能：关闭浏览器窗口

　　（六）setTimeout超时调用

　　　　语法：setTimeout（code，millisec）；

　　　　功能：在指定的毫秒数后调用函数或计算表达式

　　　　参数：code：要调用的函数名或要执行的js代码串

　　　　　　　millisec：在执行代码前需等待的时间（毫秒）

PS：setTimeout（）只执行code一次，如果要多次调用请使用setInterval（）或者让code自己调用自己；

　　（七）clearTimeout清除超时调用

　　　　语法：clearTimeout（id_of_settimeout）；

　　　　功能：取消由setTimeout()方法设置的超时调用；

　　　　参数：id_of_settimeout：由setTimeout（）返回的ID值，该值标识要取消的延迟代码块

　　（八）setInterval间歇调用

　　　　语法：setInterval（code，millisec）

　　　　功能：每隔指定的时间执行一次代码

　　　　参数：code:要调用的函数名或要执行的js代码串

　　　　　　　millisec：在执行代码前需要等待的时间（毫秒）

　　（九）clearInterval清除间歇调用

　　　　语法：clearInterval（id_of_setinterval）

 

二.location对象

　　location对象提供了与当前窗口中加载的文档有关的信息，还提供了功能，它既是window对象的属性，也是document对象的属性

　　（一）location.href获取url

　　　　1.获取url

　　　　　　语法：location.href

　　　　　　功能：返回当前加载页面完整url

　　　　　　说明：location.href（）与window.location.href（）等价

　　　　2.设置url

　　　　　　语法：location.href = "url"

　　　　　　功能：使网页加载到指定的url地址上

　　（二）location.hash获取锚点链接

　　　　1.获取锚点

　　　　　　语法：location.hash

　　　　　　功能：返回url中的hash（#以及后面的字符），如果不包含，返回空字符串

　　　　2.设置锚点

　　　　　　语法：location.hash = "param"；

　　　　　　功能：为url添上指定的锚点，实现页面上的锚点位置跳转

　　（三）location对象其他常用属性

　　　　　# TODO 待补充

　　（四）location.replace重新定向url

　　　　语法：location.replace（url）

　　　　功能：重新定向url

　　　　PS：使用location.replace不会在历史记录中生产新记录（没有后退按钮）

　　（五）location.reload重新加载当前显示的页面

　　　　语法：location.reload（）

　　　　功能：重新加载当前显示的页面

　　　　说明：location.reload（）有可能从浏览器缓存中加载

　　　　　　　location.reload（true）强制从服务器重新加载

三，history对象

　　history对象保存了用户在浏览器中访问页面的历史记录

　　（一）history.back（）

　　　　语法：history.back（）

　　　　功能：回到历史记录的上一步

　　　　PS：相当于使用了history.go（-1）

　　（二）history.forward（）

　　　　语法：history.forward（）

　　　　功能：回到历史记录的下一步

　　　　PS：相当于使用了history.go（1）

　　（三）history.go（-n）

　　　　语法：history.go（-n）

　　　　功能：回到历史记录的前n步　

　　（四）history.go（n）

　　　　语法：history.go（n）

　　　　功能：去到历史记录的后n步

四，screen对象

　　screen对象包含有关客户端显示屏幕的信息　　

　　（一）screen.availWidth（可用屏幕宽度）和screen.availHeight（可用屏幕高度）

 

　　（二）screen.innerWidth（窗口文档显示宽度）；screen.innerHeight（窗口文档显示高度）

五，navigator对象

　　提供了用户的浏览器，操作系统等信息，可通过当前对象得知用户所用浏览器类型，版本等

　　（一）navigator.userAgent用来识别浏览器名称，版本，引擎以及操作系统等信息

　　　　语法：navigator.userAgent

　　　　例子：