HTML5新增API总结

作者: 前端辉羽 | 来源:发表于2019-12-31 17:53 被阅读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> 标签定义嵌入的内容,比如插件、各种多媒体。格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径,可以是相对路径或绝对路径。
但是因为兼容性问题,embed支持嵌入的形式多样,但也仅仅是展示作用,这点和video和audio标签有很大的区别,这里记录一下使用embed插入网络视频的方法:
在优酷、爱奇艺、腾讯等能上传分享视频的网站上传对应的视频,通过分享产生<iframe>代码,把这个代码放置到对应的src位置中就可以了,embed可以通过width和height属性来定义窗口的大小,示例:

<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() {});

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

相关文章

网友评论

    本文标题:HTML5新增API总结

    本文链接:https://www.haomeiwen.com/subject/kwfioctx.html