h5c3中文件读取,拖拽,web存储,全屏接口,地理定位

1. 全屏接口

• 开启requestFullScreen 元素绑定开启全屏

  • 谷歌前缀 webkitRequestFullScreen()

  • 火狐 mozRequestFullScreen()

  • IE msRequestFullScreen()

  • 欧朋 oRequestFullScreen()

• 退出cancelFullScreen document绑定退出全屏

  • 谷歌前缀 webkitCancelFullScreen()

  • 火狐 mozCancelFullScreen()

  • IE msCancelFullScreen()

  • 欧朋 oCancelFullScreen()

• 检测 fullScreenElement document

  • 只有火狐浏览器是严格遵守驼峰命名 document.mozFullScreenElement

2. 文件读取★

2.1. 结构 上传控件 绑定onchange事件 该事件执行一段函数

2. 2 js

   2.2.1. 先new一个文件读取对象var reader= new FileReader(); 它就有了一个完整的事件模型

   2.2. 2. 在上传控件的files属性中拿文件因为files是个数组 files[0]

    1.  `reader.readAsDataURL(file[0])` 读取上传文件的路径
    2.  `reader.onload` 上传成功的事件中 读取路径 reader.result --- 就是上传的文件的路径
    3.  动态修改img的src属性
   

3. 拖拽 ★

• 元素可以被拖拽 draggable="true"

• 被拖拽元素

  • 拖拽开始 ondragstart

  • 拖拽结束 ondragend

  • 持续拖拽 ondrag

  • 拖拽离开 ondragleave 指的是鼠标离开被拖拽元素的原始位置就触发

• 目标元素

  • 拖拽进入 ondragenter

  • 拖拽离开 拖拽离开 ondragleave 指的是鼠标离开被拖拽元素的原始位置就触发

  • 持续拖拽 ondragover 想触发ondrop中的程序 必须在ondragover阻止掉浏览器的行为 e.preventDefault(); || return false;

  • 拖拽结束 ondrop

• 遗留问题处理方式

  • 将事件绑定给document e.target事件源

  • 被拖拽元素开始被拖拽时存储到全局变量 e.target

  • 在目标元素的ondrop事件中获取到 追加

• 遗留全局变量的问题

  • 在被拖拽元素ondragstart 存储 数据 e.dataTransfer.setData("text/html", e.target.id);

  • 在目标元素的ondrop事件中获取 e.dataTransfer.getData("text/html");

4.地理定位

• navigator.geolocation.getCurrentPosiotn(success,error,{})

• 在成功的回调函数中

  position.coords.latitude 纬度

  position.coords.longitude 经度

  position.coords.accuracy 精度

  position.coords.altitude 海拔高度

• 百度地图开放平台

5. web存储(会话存储) ★

• 都不能跨浏览器访问

5.1 sessionStorage

• 大小 - 5M左右

• 生命周期 - 关闭当前页面就消失

• 活动范围 - 当前页面

• 存储位置 - 当前页面的内存中

• API

  • 设置 window.sessionStorage.setItem(k,v);

  • 获取 window.sessionStorage.getItem(k);

  • 移除 window.sessionStorage.removeItem(k);

  • 清空 window.sessionStorage.clear();

5.2 localStorage

• 大小 - 20M左右

• 生命周期 - 永久存储 除非手动清除

• 活动范围 - 当前浏览器的所有页面

• 存储位置 - 硬盘中

• API

  • 设置 window.localStorage.setItem(k,v);

  • 获取 window.localStorage.getItem(k);

  • 移除 window.localStorage.removeItem(k);

  • 清空 window.localStorage.clear();

6. h5缓存 开启服务测试

6.1. 给需要缓存的html文件的html的开始标签添加 manifest="以.appcache结尾的文件"

6.2. 创建以.appcache结尾的文件

6.3. 第一行 CACHE MANIFEST

6.4. 缓存文件 CACHE:

6.5. 请求服务器 NETWORK:

6.6. 文件加载失败,替代文件渲染 FALLBACK:

6.7. (#) 注释 (*) 在CACHE的所有文件 (/) 在FALLBACK的所有文件