H5C3-day07

1. Location对象

1.1  Location对象常用属性

  console.log(window.location)

        // 协议 文件协议 http协议
        // 返回一个url协议
        console.log(location.protocol);
        // 返回页面来源的域名
        console.log(location.origin);
        // 主机名和端口号
        console.log(location.host);
        // 主机名
        console.log(location.hostname);
        // 端口号
        console.log(location.port);
        // 返回整个路径名
        console.log(location.pathname);
        // 返回整个url
        console.log(location.href);

        // search 返回？后面的参数
        // hash 锚链接
        console.log(location.hash);

1.2  Location对象常用方法

assign() 加载新的文档。跟href一样，可以跳转页面

replace() 用新的文档替换当前文档。替换当前页面，不记录历史，不可以后退

reload()reload() 重新加载当前文档。相当于点击刷新按钮刷新F5，如果参数为true，相当于ctrl+F5强制刷新

// location.assign('http://www.itcast.cn'); //跳转页面  相当于href属性  记录浏览历史  可以回退  form表单提交也是可以返回的
location.replace('http://www.itcast.cn'); // 页面替换 不记录浏览历史  不可以回退
// location.reload(true); //**参数true / false（默认）相当于刷新按钮 或 f5   true强制刷新 ctrl+f5  
// 有时打开以前使用过的页面会很快  是因为浏览器对其图片进行了本地缓存  可以通过reload实现刷新

2. Navigator对象

Navigator包含有关浏览器的信息

window.navigator 接口表示用户代理的状态和标识

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端的页面
 }

Navigator.onLine网络状态

onLine 属性是一个只读的布尔值，声明了系统是否处于脱机模式

if (navigator.onLine) {
  alert('online')
} else {
  alert('offline');
}

window  检测网络状态

online 和 offline，给window绑定事件

window.ononline = function() {
    console.log('网络状态良好');
};
window.onoffline = function() {
    console.log('网络已断开');
}

3. History对象

History 对象包含用户（在浏览器窗口中）访问过的 URL。

History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

3.1 history.length

返回浏览器历史列表中的 URL 数量。

3.2  History对象方法

back() 加载 history 列表中的前一个 URL。

forward() 加载 history 列表中的下一个 URL。

go() 加载 history 列表中的某个具体页面。其中go()参数为正值前进,参数为负值后退,为0刷新页面

4. fileReader对象

4.1 Files对象

为表单元素添加multiple属性

通过<input>上传文件后得到的是一个Files对象（伪数组形式）

4.2 FileReader对象

var reader = new FileReader(); 可以实例化一个对象

实例方法

1、reader.readAsDataURL()：DataURL形式读取文件

2、reader.readAsText()：读取文件根据特殊的编码格式转化为内容(字符串形式)

事件监听

onload 当文读取完成时调用

属性

reader.result 文件读取结果

4.3 canvas 转换为 base64

canvas.toDataURL()