JavaScript的三种BOM对象 JavaScript的三种BOM对象

一、location对象

1、URL
2、location 对象的属性

3、location 对象的方法

二、navigator对象

三、history对象

总结

window 对象给我们提供了一个 location 属性用于获取或设置窗体的 URL，并且可以用于解析 URL 。因为这个属性返回的是一个对象，所以我们将这个属性也称为 location 对象。

接下来我们就具体的看一下。

一、location对象
1、URL
统一资源定位符 (Uniform Resource Locator, URL) 是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的 URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。

URL的一般语法格式为：

protocol://host[:port]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=18#link

组成	说明
protocol	通信协议，常用的http,ftp,maito等
host	主机（域名）
port	端口号可选，省略时使用方案的默认端口，如http的默认端口为80
path	路径，由零个或多个‘/'符号隔开的字符串，一般用来表示主机上的一个目录或文件地址
query	参数以键值对的形式，通过&符号分隔开来
fragment	片段 #后面内容常见于链接，锚点

2、location 对象的属性

文章图片

我们可以通过这些属性得到地址栏中对应的信息，举个例子：

比如：在csdn首页，打开我们的开发者工具–>控制台，输入location,就会出现location对象的很多属性和返回值：

文章图片

或者我们直接在控制台输入对应的属性，就可以拿到对应的返回值。

文章图片

比如我们现在做一个点击按钮跳转页面的效果：

运行结果为：

文章图片

3、location 对象的方法

location对象方法	返回值
location.assign()	跟href一样，可以跳转页面（也称为重定向页面）
location.replace()	替换当前页面，因为不记录历史，所以不能后退页面
location.reload()	重新加载页面，相当于刷新按钮或者f5 如果参数为true 强制刷新 ctrl+f5

例如，我们也可以通过使用location对象方法来实现跳转页面：

文章图片

location.assign() 这种方法实现的跳转是可以后退页面，但是 location.replace() 因为不记录历史，所以不能后退页面。

二、navigator对象 navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent，该属性可以返回由客户机发送服务器的 user-agent 头部的值。

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {window.location.hrefhttps://www.it610.com/article/= ""; //手机 } else {window.location.hrefhttps://www.it610.com/article/= ""; //电脑 }

三、history对象