HTML5新增API总结

2019-12-31 本文已影响0人前端辉羽

本文目录

1.全屏方法
2.多媒体
3.地理定位
4.本地存储
5.历史管理
6.文件读取
7.网络状态

1.全屏方法

浏览器自带全屏实现方式是F11，但是在HTML5中也提供了操作元素是否全屏显示的方法，目前兼容性比较差，所以在使用的时候需要封装一个公用的函数进行兼容性处理

Node.requestFullScreen() 开启全屏显示
Node.cancelFullScreen() 关闭全屏显示
由于其兼容性原因，不同浏览器需要添加前缀如：
webkit内核浏览器：webkitRequestFullScreen、webkitCancelFullScreen，如chrome浏览器。
Gecko内核浏览器：mozRequestFullScreen、mozCancelFullScreen，如火狐浏览器。
document.fullScreen检测当前是否处于全屏
不同浏览器需要添加前缀
document.webkitIsFullScreen、document.mozFullScreen

函数封装

1.进入全屏

function requestFullScreen(ele) {
      if (ele.requestFullscreen) {
          ele.requestFullscreen();
      } else if (ele.mozRequestFullScreen) {
          ele.mozRequestFullScreen();
      } else if (ele.webkitRequestFullscreen) {
          ele.webkitRequestFullscreen();
      } else if (ele.msRequestFullscreen) {
          ele.msRequestFullscreen();
      }
}

2.退出全屏

function cancelFullScreen() {
    if(document.exitFullScreen) {
        document.exitFullScreen();
    } else if(document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if(document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    } else if(document.msExitFullscreen) {
        document.msExitFullscreen();
    }
}

3.判断当前是否全屏

function isFullScreen() {
  return  !! (
      document.fullscreen || 
      document.mozFullScreen ||                         
      document.webkitIsFullScreen ||       
      document.webkitFullScreen || 
      document.msFullScreen 
   );
}

调用上面这个函数的时候直接isFullScreen()就可用获得返回值了
console.log(isFullScreen())
注意事项
1.document下没有requestFullscreen
2.requestFullscreen方法只能由用户触发，比如：在onload事件中不能触发
3.页面跳转需先退出全屏
4.进入全屏的元素，将脱离其父元素，所以可能导致之前某些css的失效
5.一个元素A全屏后，其子元素要再全屏，需先让元素A退出全屏

2.多媒体

在HTML5中，新增了两个元素---video元素与audio元素，其中video元素专门用来播放网络上的视频或电影，而audio元素专门用来播放网络上的音频数据，另外都可以通过子标签source来实现让浏览器自动选择支持的文件。

<audio controls>
   <source src="horse.ogg" type="audio/ogg">
   <source src="horse.mp3" type="audio/mpeg">
 Your browser does not support the audio element.
</audio>

audio和video的属性、方法和事件有很多都是相同的，下面总结一下比较常用的一些。
1.方法

方法	描述
canPlayType()	检测浏览器是否能播放指定的音频/视频类型
load()	重新加载音频/视频元素
paly()	开始播放音频/视频
pause()	暂停当前播放的音频/视频

2.属性

属性	描述
autoplay	设置或返回是否在加载完成后随即播放音频/视频
controls	设置或返回音频/视频是否显示控件（比如播放/暂停等）
loop	设置或返回音频/视频是否应在结束时重新播放
src	设置或返回音频/视频元素的当前来源
volume	设置或返回音频/视频的音量

3.事件

事件	描述
canplay	当浏览器可以播放音频/视频时
ended	当目前的播放列表已结束时
pause	当音频/视频已暂停时

canplay事件使用示例：
提示该视频已准备好开始播放

myVid=document.getElementById("video1");
myVid.oncanplay=alert("Can start playing video");

另外，可以在audio或者video的开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。

embed标签

<embed src="http://player.youku.com/player.php/sid/XMTI4MzM2MDIwOA==/v.swf" 
allowFullScreen="true" quality="high" width="480" height="400" 
align="middle" allowScriptAccess="always" 
type="application/x-shockwave-flash"></embed>

3.地理定位

在HTML规范中，增加了获取用户地理信息的API，
这样使得我们可以基于用户位置开发互联网应用，
即基于位置服务 (Location Base Service)
鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。

获取当前地理信息

navigator.geolocation.getCurrentPosition(successCallback, errorCallback)

当成功获取地理信息后，会调用succssCallback，并返回一个包含位置信息的对象position。
position.coords.latitude纬度
position.coords.longitude经度
position.coords.accuracy精度
position.coords.altitude海拔高度
当获取地理信息失败后，会调用errorCallback，并返回错误信息error

var x=document.getElementById("demo");
function getLocation(){
    if (navigator.geolocation){
        navigator.geolocation.watchPosition(showPosition);
    }else{
        x.innerHTML="该浏览器不支持获取地理位置。";
    }
}
function showPosition(position){
    x.innerHTML="纬度: " + position.coords.latitude + 
    "<br>经度: " + position.coords.longitude; 
}
getLocation()

在现实开发中，通过调用第三方API（如百度地图）来实现地理定位信息，这些API都是基于用户当前位置的，并将用位置位置（经/纬度）当做参数传递，就可以实现相应的功能。
重复获取当前地理信息watchPosition() =>返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）
clearWatch() - 停止 watchPosition() 方法

4.本地存储

随着互联网的快速发展，基于网页的应用越来越普遍，
同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，
HTML5规范提出了相关解决方案。
在浏览器中的查看位置：开发者工具里的Application里面的Storage

特性
- 设置、读取方便
- 容量较大，可达到5M及以上
- 只能存储字符串，可以将对象JSON.stringify() 编码后存储
window.sessionStorage
- 生命周期为关闭浏览器窗口
- 在同一个窗口(页面)下数据可以共享
window.localStorage
- 永久生效，除非手动删除（服务器方式访问然后清除缓存）
- 可以多窗口（页面）共享
方法
- setItem(key, value) 设置存储内容
- getItem(key) 读取存储内容
- removeItem(key) 删除键值为key的存储内容
- clear() 清空所有存储内容

5.历史管理

提供window.history，对象我们可以管理历史记录，
可用于单页面应用，Single Page Application，可以无刷新改变网页内容。

history.back() 回退
history.forward() 前进
history.go(n) 跳转至指定页
history.pushState(data, title, url) 追加一条历史记录
- data用于存储自定义数据，通常设为null
  + title网页标题，基本上没有被支持，一般设为空
  + url 以当前域为基础增加一条历史记录，不可跨域设置
history.replaceState(data, title, url) 与pushState()基本相同，
不同之处在于replaceState()，只是替换当前url，不会增加/减少历史记录。
popstate事件历史记录发生改变时触发，注意:用history.pushState()或者history.replaceState()不会触发popstate事件，只有在做出浏览器动作时，才会触发该事件，如用户点击浏览器的回退按钮（或者在Javascript代码中调用history.back()）

window.addEventListener('popstate',function(e){
  console.log('历史记录发生改变时，我触发了')
})

hashchange事件，用于监听hash值(以 '#' 号为开始) 的改变触发事件

6.文件读取

HTML5新增内建对象，可以读取本地文件内容。
下面这个案例实现了读取并预览图片：

<input type="file" class="file" multiple>
<img src="" alt="" id="img">
<script>
    /*获取到了文件表单元素*/
    var file = document.querySelector('.file');
    /*选择文件后触发*/
    file.onchange = function () {
        /*初始化了一个文件读取对象,h5提供的*/
        var reader = new FileReader();
        /*读取文件数据  this.files[0] 文件表单元素选择的第一个文件 */
        reader.readAsDataURL(this.files[0]);
        /*读取的过程就相当于 加载过程 */
        /*读取完毕  预览 */
        reader.onload = function () {
             /*读取完毕 base64位数据  表示图片*/
            console.log(this.result);
            document.querySelector('#img').src = this.result;
        }
    }
</script>

7.网络状态

我们可以通过window.onLine来检测，用户当前的网络状况，返回一个布尔值

// 获取当前网络状态
var state = window.navigator.onLine;
if (state) {
      alert("联网状态");
}else {
      alert("断网状态");
}

网络状态事件

window.ononline用户网络连接时被调用

使用方法
1.不推荐，有兼容性问题
window.ononload = function() {}
2.推荐
window.addEventListener('online', function() {});

window.onoffline用户网络断开时被调用

1.不推荐，有兼容性问题
window.onoffline = function() {}
2.推荐
window.addEventListener('offline', function() {});

注意事项：如果在加载网页前就已经处于在线状态是不会触发程序的在线事件，同理离线也是，只有网络状态发生变化了才会触发。