本文介绍了HTML5中几个常用对象。Location对象是window对象一部分；Navigator对象包含浏览器信息，可通过第三方API获取地理位置，还能检测网络状态；History对象包含访问过的URL，有back、forward等方法及pushState、replaceState等操作；Files对象可用于文件读取，借助FileReader对象实现。
1. Location对象
location 对象是 window 对象的一部分，可通过window.location属性对其进行访问。
属性
| 名称 | 释义 |
|---|---|
| origin | 返回页面来源的域(当前协议 + 主机名+端口号) |
| host | 返回一个URL的主机名和端口 |
| hostname | 返回URL的主机名 |
| port | 返回一个URL服务器使用的端口号 |
| pathname | 返回的URL路径名。 |
| protocol | 返回一个URL协议 |
| href | 返回完整的URL |
| hash | 返回从井号 (#) 开始的 URL（锚） |
| search | 返回从问号 (?) 开始的 URL（查询部分） |
方法
| 属性 | 描述 |
|---|---|
| assign() | 加载新的文档。跟href一样，可以跳转页面 |
| replace() | 用新的文档替换当前文档。替换当前页面，不记录历史，不可以后退 |
| reload() | 重新加载当前文档。 |
2. Navigator对象
navigator 对象是包含有关浏览器的信息。
window.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.href = ""; //跳转到手机端的页面
} else {
window.location.href = ""; //跳转到pc端的页面
}
扩展阅读：
2.1 通过第三方API获取
HTML5中提供了一个Navigator.geolocation可以获取地理位置，但是由于兼容性太差，所以在这我们不过多给同学讲解。
在现实开发中，通过调用第三方API（如百度地图）来实现地理定位信息，这些API都是基于用户当前位置的，并将用位置位置（经/纬度）当做参数传递，就可以实现相应的功能。
百度地图开放平台 | 百度地图API SDK | 地图开发 百度地图api，调用百度API进行地图设置
2.2 Navigator.onLine网络状态
onLine 属性是一个只读的布尔值，声明了系统是否处于脱机模式，如果系统属于脱机状态，则返回 false，否则返回 true。
if (navigator.onLine) {
alert('online')
} else {
alert('offline');
}
HTML5 也给我们提供了2个事件 online 和 offline，给window绑定事件--检测网络开始状态
window.ononline = function() {
console.log('你的浏览器在线工作');
};
window.onoffline = function() {
console.log('你的浏览器离线工作');
}
3. History对象
History 对象包含用户（在浏览器窗口中）访问过的 URL。
History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。
属性
| 属性 | 描述 |
|---|---|
| length | 返回浏览器历史列表中的 URL 数量。 |
| state | 返回浏览器在当前 URL 下的状态信息，如果没有调用过 pushState() 或 replaceState() 方法，则返回默认值 null。 |
方法
| 方法 | 描述 |
|---|---|
| back() | 加载 history 列表中的上一个 URL。 |
| forward() | 加载 history 列表中的下一个 URL。 |
| go() | 加载 history 列表中的某个具体页面。其中go()参数为正值前进,参数为负值后退,为0刷新页面 |
| pushState() | 用于在历史中添加一条记录。 |
| replaceState() | 用来修改 History 对象的当前记录，其他都与pushState()方法一模一样。 |
3.1 History.back()、History.forward()、History.go()
这三个方法用于在浏览历史之中切换。
-
History.back()：切换到上一个网址，等同于点击浏览器的后退键。对于第一个访问的网址，该方法无效果。
-
History.forward()：切换到下一个网址，等同于点击浏览器的前进键。对于最后一个访问的网址，该方法无效果。
-
History.go()：接受一个整数作为参数，以当前网址为基准，移动到参数指定的网址，比如go(1)相当于forward()，go(-1)相当于back()。如果参数超过实际存在的网址范围，该方法无效果；
如果不指定参数，默认参数为0，相当于刷新当前页面。
注意，切换到以前访问过的页面时，页面通常是从浏览器缓存之中加载，而不是重新要求服务器发送新的网页。
3.2 History.pushState()
History.pushState()方法是html5中新增无刷新修改URL,用于在历史中添加一条记录。
window.history.pushState(state, title, url) //读出状态对象 console.log(history.state)
该方法接受三个参数，依次为：
-
state：一个与添加的记录相关联的状态对象，浏览器会将这个对象序列化以后保留在本地，重新载入这个页面的时候，可以拿到这个对象。如果不需要这个对象，此处可以填null。
-
title：新页面的标题。不需要时可以填空字符串。
-
url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。
3.3 History.replaceState()
History.replaceState()方法用来修改 History 对象的当前记录，其他都与pushState()方法一模一样。 假定当前网页是example.com/example.html。
history.pushState({page: 1}, 'title 1', '?page=1')
// URL 显示为 http://example.com/example.html?page=1
总结：
相同点：（1）共同的参数，（2）不会刷新页面只是修改或喜欢历史记录。
不同点：pushState会在history中添加一个新的记录（ replace不会添加新的history记录，而是替换当前的url。
4. Files对象(文件读取)
怎么上传文件显示到页面？ 或者 上传完毕图片显示缩略图到页面上。。。
通过FileReader对象我们可以读取本地存储的文件，使用 File 对象来指定所要读取的文件或数据。其中File对象可以是来自用户在一个元素上选择文件后返回的FileList 对象。
4.1 Files对象
由于HTML5中我们可以通过为表单元素添加multiple属性，因此我们通过<input>上传文件后得到的是一个Files对象（伪数组形式）。
4.2 FileReader对象
HTML5新增内建对象，可以读取本地文件内容。
var reader = new FileReader(); 可以实例化一个对象
实例方法
1、reader.readAsDataURL()：DataURL形式读取文件
2、reader.readAsText()：读取文件根据特殊的编码格式转化为内容(字符串形式)
事件监听
onload 当文读取完成时调用
属性
reader.result 文件读取结果
扫一扫
156
到【灌水乐园】发言
