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 | 返回?后面的内容 |
注意点
- hash或search等返回特定字段的属性都是包含开始符的,比如search返回的内容包含?
- 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; 可实例化一个对象
实例方法
- reader.readAsDataURL():DataURL形式读取文件//读取图片文件
- reader.readAsText():读取文件根据特殊编码格式转化为内容(字符串形式)
事件监听
- 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;
}
};