十六:BOM之源—BOM基本应用
最后更新于:2022-04-01 20:32:25
BOM的基本应用包括:管理浏览器历史、解析地址和获取浏览器信息,本文将介绍这些应用。
## 一、浏览历史管理
1、history对象的方法和属性
History 对象包含用户(在浏览器窗口中)访问过的 URL,是 window 对象的一部分,可通过 window.history 属性对其进行访问。没有应用于 History 对象的公开标准,不过所有浏览器都支持该对象。
length属性:返回浏览器历史列表中的URl数量。是"前进“和”后退“两个按钮之下包含的地址数的总和。
back([num]):加载 history 列表中的前一个 URL。参数num表示后退的地址步数,若没有定义num,效果等价于点击后退按钮或调用 history.go(-1)。
forward():加载 history 列表中的下一个 URL。该方法的效果等价于点击前进按钮或调用 history.go(1)。
go([location]):加载history列表中的location位置的页面,location可以是字符串或者整数。若是字符串,表示是要访问历史列表中的某个 URL,或 URL 的子串;若是整数,表示是要访问的 URL 在 History 的 URL 列表中的相对位置,正数是前进,负数是后退,0表示刷新当前网页,与location.reload()等效
2、HTML 5 BOM新增功能
HTML 5 BOM新增了两个方法和一个属性:
window.history.pushState(data,title[,url]):添加新的浏览历史项。data定义历史记录的数据,title定义历史记录的标题,URL定义历史记录的URL地址。触发popstate事件。
window.history.replaceState(data,title[,url]):更新当前历史浏览项。参数同上。触发popstate事件。
state属性:返回上述两个方法添加的信息。
## 二、解析地址
location对象描述的是一个窗口对象打开的URL地址。使用window.location可以返回一个location对象(window可以省略)。表示当前窗口的地址,可以用alert(location)获取;若要表示某一个窗口的地址,则要用”窗口对象名.location“获取URL。
var newWin = window.open("http://www.baidu.com","_target");
alert(newWin.location);
1、location对象的属性:
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54eca1ee17.jpg)
2、location对象的方法
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54eca36d2b.jpg)
HTML5新增一个resolveURL(sURL):将相对的URL转为绝对的URL
~~~
document.write("书签名称: "+location.hash+"
"); document.write("主机全称: "+location.host+"
"); document.write("主机名称: "+location.hostname+"
"); document.write("路径名称: "+location.pathname+"
"); document.write("连接端口名称: "+location.port+"
"); document.write("协议名称: "+location.protocol+"
"); document.write("查询字符串: "+location.search+"
"); ~~~ 结果: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54eca4af2a.jpg) 三、获取浏览器信息 Navigator 对象包含有关浏览器的信息,其对象实例唯一,可以用 Window 对象的 navigator 属性来引用它。没有应用于 navigator 对象的公开标准,不过所有浏览器都支持该对象。 1、遍历Navigator对象成员 使用window.navigator属性可以返回一个Navigator对象,使用for..in循环可以检测 ~~~ for(var i in window.navigator) { document.write(i + "==="+window.navigator[i]+"
"); } ~~~ 在不同的浏览器中运行结果不同,在google中结果如下 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54eca5f57e.jpg) 2、Navigator对象属性: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54eca7abf1.jpg) 3、Navigator对象的方法 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54eca8e097.jpg) | | | |-----|-----| 四、非标准应用---screen对象 Screen 对象包含有关客户端显示屏幕的信息。每个 Window 对象的 screen 属性都引用一个 Screen 对象。没有应用于 screen 对象的公开标准,不过所有浏览器都支持该对象。其属性: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ecaa0fd6.jpg)
';
"); document.write("主机全称: "+location.host+"
"); document.write("主机名称: "+location.hostname+"
"); document.write("路径名称: "+location.pathname+"
"); document.write("连接端口名称: "+location.port+"
"); document.write("协议名称: "+location.protocol+"
"); document.write("查询字符串: "+location.search+"
"); ~~~ 结果: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54eca4af2a.jpg) 三、获取浏览器信息 Navigator 对象包含有关浏览器的信息,其对象实例唯一,可以用 Window 对象的 navigator 属性来引用它。没有应用于 navigator 对象的公开标准,不过所有浏览器都支持该对象。 1、遍历Navigator对象成员 使用window.navigator属性可以返回一个Navigator对象,使用for..in循环可以检测 ~~~ for(var i in window.navigator) { document.write(i + "==="+window.navigator[i]+"
"); } ~~~ 在不同的浏览器中运行结果不同,在google中结果如下 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54eca5f57e.jpg) 2、Navigator对象属性: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54eca7abf1.jpg) 3、Navigator对象的方法 ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54eca8e097.jpg) | | | |-----|-----| 四、非标准应用---screen对象 Screen 对象包含有关客户端显示屏幕的信息。每个 Window 对象的 screen 属性都引用一个 Screen 对象。没有应用于 screen 对象的公开标准,不过所有浏览器都支持该对象。其属性: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-30_57c54ecaa0fd6.jpg)