H5新API：Location，Navigator，History，文件读取

---

一、Location

1.1 介绍

location 对象包含有关当前URL的信息
location 对象是 window 对象的一部分，可通过 window.Location 实行对其进行访问

1.2 属性

属性	描述
host	返回URL的主机名和端口号
hostname	返回URL的主机名
port	返回一个URL服务器使用过得端口号
pathname	返回URL路径名
protocol	返回一个URL协议
hash	返回锚（#）
href	返回一个完整的URL
search	返回？后面的内容

注意点

1. hash或search等返回特定字段的属性都是包含开始符的，比如search返回的内容包含？
2. href不仅仅可以用来获取当前页面的URL，还可以通过修改值进行页面的跳转，相当于assign()的跳转。

1.3 方法

属性	描述
assign()	加载新的文档。跟href一样，可以跳转页面，记录历史，可以后退
replace()	用新的文档替换当前文档。替换当前页面，不记录历史，不可以后退
reload()	重新加载页面。相当于点击刷新页面，如果参数为true，相当于ctrl+F5强制刷新

二、Navigator

2.1 介绍

Navigator 对象是包含浏览器的信息。
window.navigator 接口表示用户代理的状态和表示

navigator.userAgent 获取当前浏览器的终端类型

if(navigator.userAgent.mach(/(phone|pad|pod|iphone|ipod|ios)/i)){
	window.location.href = "";   //跳转到手机端的页面
}else{
	window.location.href = "";   //跳转到Pc端的页面
}

2.2 浏览器网络状态

onLine 属性是一个只读的布尔值，声明系统是否处于脱机模式。
online和offline事件，监听网络状态

onLine属性可以获取当前网络状态，连接返回true，否则返回false
if(window.onLine){
	console.log("在线");
}else{
	console.log("离线");
}

online当网络状态从离线变为在线时触发。offline相反
window.ononline = function(){
	console.log("你的浏览器在线工作");
}
window.onoffline = function(){
	console.log("你的浏览器离线工作");
}

三、History

3.1 介绍

History 对象包含用户（在浏览器窗口中）访问过得URL。
History 对象是window 对象的一部分，可通过 window.history 属性对其进行访问。

3.2 属性和方法

属性	描述
length	返回浏览器历史列表中的URL数量。
方法	描述
back()	加载history列表中的前一个URL。
forward()	加载history列表中的下一个URL。
go()	加载history列表中的某个具体页面。

四、文件读取

4.1 介绍

通过FileReader对象我们可以读取本地存储的文件。File对象是来自用户在一个元素上选择文件后返回的FileList对象
FileReader对象是HTML5新增内键对象，可以读取本地文件内容

4.2 实例化对象和方法

var reader = new FileReader; 可实例化一个对象
实例方法

1. reader.readAsDataURL()：DataURL形式读取文件//读取图片文件
2. reader.readAsText()：读取文件根据特殊编码格式转化为内容(字符串形式)

事件监听

1. onload 当文件读取完成时调用
   属性
   reader.result 文件读取结果

4.3 案例

fileEle.onchange = function() {
    console.log(fileEle.files);
    // 读取文件信息
    var reader = new FileReader();
    reader.readAsDataURL(this.files[0]);
    // 绑定onload
    reader.onload = function() {
        var li = document.createElement('li');
        // 读取结果
        li.innerText = reader.result;
        ul.appendChild(li);
        img.src = reader.result;
    }
};