首页 专题 H5案例 前端导航 UI框架

JavaScript学习笔记整理(17):HTML5 API

阅读 2628 评论 0

这篇文章整理了HTML5 的API:

  1. 地理位置
  2. Blob
  3. 文件系统 API
  4. 客户端数据库(IndexedDB)
  5. 设备震动
  6. 亮度调节
  7. 设备方向检测
  8. 全屏操作 API

1、地理位置(Geolocation API)

Geolocation接口用于获取用户的地理位置。它使用的方法基于GPS或者其他机制(比如IP地址、Wifi热点、手机基站等)。

1.1 检测地理位置是否可用

if('geolocation' in navigator){

  //地理位置可用

}else{

  //地理位置不可用

}

1.2 获取当前定位

getCurrentPosition()函数可用来获取设备当前位置:

navigator.geolocation.getCurrentPosition(success,error,option);

参数说明:

success:成功得到位置信息时的回调函数,使用Position对象作为唯一的参数

error:获取位置信息失败时的回调函数,使用PositionError对象作为唯一的参数,可选项

options:一个可选的PositionOptions对象,可选项

注意:使用它需要得到用户的授权,浏览器会跳出一个对话框,询问用户是否许可当前页面获取他的地理位置。如果同意授权,就会调用success;如果用户拒绝授权,则会抛出一个错误,调用error。

1.2.1 授权成功

function success(position){

  //成功

}

position参数是一个Position对象。其有两个属性:timestampcoords。timestamp属性是一个时间戳,返回获得位置信息的具体时间。coords属性指向一个对象,包含了用户的位置信息,主要是以下几个值:

coords.latitude:纬度  

coords.longitude:经度  

coords.accuracy:精度  

coords.altitude:海拔  

coords.altitudeAccuracy:海拔精度(单位:米)  

coords.heading:以360度表示的方向  

coords.speed:每秒的速度(单位:米)

1.2.2 授权失败

function error(PositionError){

  //用户拒绝授权

}

PositionError 接口表示当定位设备位置时发生错误的原因。

PositionError.code 返回无符号的、简短的错误码:

1 相当于PERMISSION_DENIED 地理位置信息的获取失败,因为该页面没有获取地理位置信息的权限。  

2 相当于POSITION_UNAVAILABLE   

地理位置获取失败,因为至少有一个内部位置源返回一个内部错误。   

3 相当于TIMEOUT   

获取地理位置超时,通过定义PositionOptions.timeout 来设置获取地理位置的超时时长。

1.2.3 options参数

用来设置定位行为

var option = {   

  enableHighAccuracy : true,   

  timeout : Infinity,   

  maximumAge : 0   

};

参数说明:

enableHighAccuracy:如果设为true,就要求客户端提供更精确的位置信息,这会导致更长的定位时间和更大的耗电,默认设为false。   


Timeout:等待客户端做出回应的最大毫秒数,默认值为Infinity(无限)。 


maximumAge:客户端可以使用缓存数据的最大毫秒数。如果设为0,客户端不读取缓存;如果设为infinity,客户端只读取缓存。

1.3 监视定位

watchPosition()方法可以用来监听用户位置的持续改变。它与 getCurrentPosition() 接受相同的参数,但回调函数会被调用多次。错误回调函数与 getCurrentPosition() 中一样是可选的,也会被多次调用。

var watchID = navigator.geolocation.watchPosition(success,error, options);

一旦用户位置发生变化,就会调用回调函数success。这个回调函数的事件对象,也包含timestampcoords属性。

watchPosition() 函数会返回一个 ID,唯一地标记该位置监视器。您可以将这个 ID 传给 clearWatch() 函数来停止监视用户位置。

navigator.geolocation.clearWatch(watchID);

1.4 完整例子

<div id="myLocation"></div> <script> var ml=document.getElementById("myLocation"); function getUserLocation(){ if("geolocation" in navigator){ var options={ enableHighAccuracy: true, maximumAge: 30000, timeout: 27000 };

navigator.geolocation.getCurrentPosition(success,error,options);

            var watchID = navigator.geolocation.watchPosition(success,error, options);

}else{ ml.innerHTML="您的浏览器不支持定位!";

}

}

function success(position){ var coords=position.coords; var lat=coords.latitude; var lng=coords.longitude; ml.innerHTML="您当前所在的位置:经度"+lat+";纬度:"+lng;

//只有firefox支持address属性

if(typeof position.address !== "undefined"){ var country = position.address.country; var province = position.address.region; var city = position.address.city; ml.innerHTML +="您的地址" + country + province + city; } } function error(error){ switch(error.code){ case error.TIMEOUT: ml.innerHTML="连接超时,请重试";break; case error.PERMISSION_DENIED: ml.innerHTML="您拒绝了使用位置共享服务,查询已取消";break; case error.POSITION_UNAVAILABLE: ml.innerHTML="亲,非常抱歉,我们暂时无法为您提供位置服务";break; } ml.style.color="red"; } window.onload=function(){ getUserLocation(); } </script>


2、Blob

Blob(Binary Large Object)对象代表了一段二进制数据,提供了一系列操作接口。比如通过new Blob()创建的对象就是Blob对象.又比如,在XMLHttpRequest里,如果指定responseType为blob,那么得到的返回值也是一个blob对象.


2.1 生成Blob对象

生成Blob对象有两种方法:一种是使用Blob构造函数,另一种是对已有的Blob对象使用slice()方法切出一段。

(1)Blob构造函数

var blob = new Blob(data, type)

Blob构造函数接受两个参数:

参数data是一组数据,所以必须是数组,即使只有一个字符串也必须用数组装起来.

参数type是对这一Blob对象的配置属性,目前也只有一个type也就是相关的MIME需要设置 type的值:    

'text/csv,charset=UTF-8' 设置为csv格式,并设置编码为UTF-8    

'text/html'    设置成html格式

注意:任何浏览器支持的类型都可以这么用  

var blob = new Blob(['我是Blob'],{type: 'text/html'});


2.2 属性

blob.size   //Blob大小(以字节为单位)

blob.type   //Blob的MIME类型,如果是未知,则是“ ”(空字符串)


2.3 slice()

slice()返回一个新的Blob对象,包含了源Blob对象中指定范围内的数据。

blob.slice(      

  optional long long start,      

  optional long long end,      

  optional DOMString contentType };

参数说明

start 可选,开始索引,可以为负数,语法类似于数组的slice方法.默认值为0.  

end 可选,结束索引,可以为负数,语法类似于数组的slice方法.默认值为最后一个索引.  

contentType可选 ,新的Blob对象的MIME类型,这个值将会成为新的Blob对象的type属性的值,默认为一个空字符串.


2.4 Blob的使用

使用Blob最简单的方法就是创建一个URL来指向Blob:

<a download="data.txt" id="getData">下载</a>   


var data= 'Hello world!';  

var blob = new Blob([data], {   

  type: 'text/html,charset=UTF-8'   

});

window.URL = window.URL || window.webkitURL; 

document.querySelector("#getData").href = URL.createObjectURL(blob);

上面的代码将Blob URL赋值给a,点击后提示下载文本文件data.txt,文件内容为“Hello World”。


2.5 URL.createObjectURL()

objectURL = URL.createObjectURL(blob);

使用URL.createObjectURL()函数可以创建一个Blob URL,参数blob是用来创建URL的File对象或者Blob对象,返回值格式是:blob://URL。

注意:在每次调用 createObjectURL() 方法时,都会创建一个新的 URL 对象,即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时,每个对象必须通过调用 URL.revokeObjectURL() 方法传入创建的URL为参数,用来释放它。浏览器会在文档退出的时候自动释放它们,但是为了获得最佳性能和内存使用状况,你应该在安全的时机主动释放掉它们。


2.6 乱码问题

当数据中包含汉字时,导出的文件可能会出现乱码,不过我们可以这样解决:

var data = "\ufeff" + "汉字";


3、文件系统API


3.1 File API

在HTML5中新增了File API,可以让网页要求用户选择本地文件,并且读取这些文件的信息。选择的方式可以是HTML<input>元素,也可以是拖拽。

<input type="file" id="photo">


var selectedFile = document.getElementById('photo');

var file = selectedFile.files[0];

//或者

file = selectedFile.files.item(0)

selectedFile.files返回一个FileList对象(有一个属性length,表示文件(File对象)个数),包含了一个或多个File对象,每个File对象都有自己的属性:

file.name:文件名,该属性只读。

file.size:文件大小,单位为字节,该属性只读。

file.type:文件的MIME类型,如果分辨不出类型,则为空字符串,该属性只读。

file.lastModified:文件的上次修改时间,格式为时间戳。

file.lastModifiedDate :文件的上次修改时间,格式为Date对象实例。

注意:如果要允许用户选取多个文件,需要加上multiple属性

<input type="file" multiple />

一般情况下,我们会为input注册change事件,当文件被选择时,触发change。

selectFile.addEventListener('change',function(){

  var fileList = this.files;

  for(var i = 0; i < fileList.length; i++){

    var file = fileList[i];  //或者 fileList.item(0);

  }

},false);

3.1.1 拖拽文件

前面也说过,我们也可以通过拖拽方式选择文件。

<div id="dropbox"></div>


dropbox = document.getElementById('dropbox');

dropbox.addEventListener('dragenter',dragenter,false);

dropbox.addEventListener('dragover',dragover,false);

dropbox.addEventListener('drop',drop,false);

在上面的代码中,ID为dropbox的div就是我们拖放目的区域。

拖放事件:

function dragenter(e){

  e.stopPropagation();

  e.preventDefault();

}

function dragover(e){

  e.stopPropagation();

  e.preventDefault();

}

function drop(e){

  e.stopPropagation();

  e.preventDefault();

 

  var dt = e.dataTransfer;

  var files = dt.files;

}

在上面的代码中,参数e是一个事件对象,该参数的dataTransfer.files属性就是一个FileList对象,里面包含了拖放的文件。

注意:使用拖放事件时,必须阻止dragenter和dragover事件的默认行为,才能触发drop事件。


3.1.2 FileReader API

在上面我们知道如何获取文件信息,如何使用呢?

这时我们就要用到FileReader API了,此API用于读取文件,,即把文件内容读入内存。它的参数是File对象或Blob对象。

首先,我们需要实例化FileReader对象:

var reader = new FileReader();

对于不同类型的文件,FileReader提供了不同的方法来读取文件:

readAsBinaryString(Blob|File):返回二进制字符串,该字符串每个字节包含一个0到255之间的整数。  

readAsText(Blob|File, opt_encoding):返回文本字符串。默认情况下,文本编码格式是’UTF-8’,可以通过可选的格式参数,指定其他编码格式的文本。  

readAsDataURL(Blob|File):返回一个基于Base64编码的data-uri对象。  

readAsArrayBuffer(Blob|File):返回一个ArrayBuffer对象,即固定长度的二进制缓存数据。

我们来看一个显示用户所选图片的缩略图的例子:

<input type="file" onchange="handleFiles(this.files)"/>


function handleFiles(files){

  for(var i = 0; i < files.length; i++){

    var file = files[i];

    var imageType = /^image\//;

    if(!imageType.test(file.type))  continue;

    var img = document.createElement('img');

    img.file = file;

    document.body.appendChild(img);

    

    var reader = new FileReader();

    reader.onload = function(e){

       img.src=e.target.result;

    };

    reader.readAsDataURL(file);

  }

}

在上面的代码中,我们通过onchange去监听input内文件信息的变化,通过file.type判断用户选择的是否是图片,这里使用File对象的readAsDataURL()方法来返回一个data URL,然后使用onload事件监听文件是否读取完毕,如果读取完毕,我们就可以事件对象e来读取文件内容,也就是e.target.result


readAsDataURL()方法用于读取文本文件,它的第一个参数是FileBlob对象,第二个参数是前一个参数的编码方法,如果省略就默认为UTF-8编码。该方法是异步方法,一般监听onload件,用来确定文件是否加载结束,方法是判断FileReader实例的result属性是否有值。其他三种读取方法,用法与readAsDataURL方法类似。


注意:如果浏览器不支持FileReader,你也可以使用URL.createObjectURL(file)方法来创建一个data URL来显示图片缩略图。


FileReader API还有一个abort方法,用于中止文件上传。


FileReader API的其他监听事件

onabort方法:读取中断或调用reader.abort()方法时触发。  

onerror方法:读取出错时触发。  

onload方法:读取成功后触发。  

onloadend方法:读取完成后触发,不管是否成功。触发顺序排在 onload 或 onerror 后面。  

onloadstart方法:读取将要开始时触发。  

onprogress方法:读取过程中周期性触发。


4、客户端数据库(IndexedDB)

IndexedDB(对象数据库)可以说是浏览器端数据库,可以被网页脚本程序创建和操作。它允许储存大量数据,提供查找接口,还能建立索引。


在IndexedDB API中,一个数据库就是一个命名对象仓库(object store)的集合,对象存储区存储的是对象。


IndexedDB特点:

  1. 键值对存储:在对象仓库中,数据以“键值对”的形式保存,每一个数据都有对应的键名,键名是独一无二的,不能有重复,否则会抛出一个错误。
  2. 同域限制:IndexedDB数据库的作用域是限制在包含它们的文档源中,每一个数据库对应创建该数据库的域名,两个同源的Web页面互相之间可以访问对方的数据,但非同源的页面就不行。
  3. 支持事务:IndexedDB支持事务,这就是说对数据库的查询和更新都是包含在一个事务(transaction)中,以此来确保这些操作要么是一起成功,要么是一起失败,并且永远不会让数据库出现更新到一半的情况。
  4. 异步:IndexedDB的操作不会阻塞浏览器的UI主线程。
  5. 储存空间大:IE的储存上限是250MB,Chrome和Opera是剩余空间的某个百分比,Firefox则没有上限。


(1)检测浏览器是否支持IndexedDB API

if('indexedDB' in window){

  //支持

}else{

  //不支持

}

(2)访问数据库

要异步访问数据库,就要调用 window 对象 indexedDB 属性的 open() 方法

var request = indexedDB.open(name[,version])

indexedDB.open方法可传输人两个参数:name是数据库名称,必填;version是数据库版本,是一个大于0的正整数(0将报错)。


open方法返回一个 IDBRequest 对象 (IDBOpenDBRequest),


注意:如果数据库存在,将打开数据库,否则,则会新建该数据库。如果省略第二个参数,则会自动创建版本为1的该数据库。


当打开数据时,有可能触发4种事件:

success:打开成功。  

error:打开失败。  

upgradeneeded:第一次打开该数据库,或者数据库版本发生变化。  

blocked:上一次的数据库连接还未关闭。

第一次打开数据库时,会先触发upgradeneeded事件,然后触发success事件。

request.onupgradeneeded = function(e){}


request.onsuccess = function(e){

  db = e.target.result;

}

回调函数接受一个事件对象event作为参数,它的target.result属性就指向打开的IndexedDB数据库。


(3)IndexedDB实例对象的方法


3.1 createObjectStore()方法

createObjectStore()方法用于创建存放数据的“对象仓库”(object store)。

db.createObjectStore(name[,options]);

参数说明:

参数name是对象仓库的名字;options是可选参数,用来设置对象仓库的属性,可配置两个属性:keyPathautoIncrement,分别表示每条记录的键名和是否使用自动递增的整数作为键名,默认为false。

db.createObjectStore('db1', {keyPath: 'user'});

db.createObjectStore('db2', {autoIncrement: true});


由于对象仓库的名字具有唯一性(当创建已存在的数据库时,会报错),所以在创建对象仓库时,我们有必要检测对象仓库是否已存在:

db.objectStoreNames.contains(name)

objectStoreNames属性返回一个DOMStringList对象,里面包含了当前数据库所有“对象仓库”的名称。可以使用DOMStringList对象的contains方法,检查数据库是否包含某个“对象仓库”。


3.2 transaction方法

创建了数据库,当然要使用它,不过数据库的更新、读取和删除是建立在事务的基础上的,所以我们首先要创建一个事务:

var t = db.transaction(array,type)

transcation()方法接受两个参数:参数array是一个数组,包含了所要使用的对象仓库,通常是一个;参数type是一个表示操作类型的字符串,目前只有两种类型:readonly(只读)和readwrite(读写)。

t = db.transaction(['db1','readwrite');

transaction()方法返回一个事务对象,该对象的objectStore()方法用于获取指定的对象仓库:

var store = t.objectStore('db1');

事务对象有三个监听事件:

abort:事务中断。  

complete:事务完成。  

error:事务出错。

假如事务完成时:

t.oncomplete =function(e){}


3.2.1 数据操作

下面的方法都是在事件对象上。

(1)add()方法

add()方法用来添加数据

var add = store.add(data,key)

参数说明:参数data是所要添加的数据;参数key是这条数据对应的键名(key)。


add()方法是异步的,有success和error事件:

add.onsuccess = funciton(e){}

add.onerror = function(e){}


(2)get()方法

get()方法用来读取数据,它的参数是键名

store.get(key)

get方法也是异步的,也有success和error事件。


(3)put()方法

put()方法用来更新数据,与add()方法类似:

var update = store.put(data,key)


(4)delete()方法

delete()方法用来删除数据,它的参数是键名:

var delete = store.delete(key)

delete方法也是异步的,也有success和error事件。


(5)openCursor()方法

openCursor()方法用来遍历数据:

var cursor = store.openCursor()

openCursor方法也是异步的,也有success和error事件。

cursor.onsuccess = function(e){

  var res = e.target.result;

  console.log('key',res.key);

  console.log('data',res.value);

  res.continue()

}

e.target.result属性指向当前数据对象。当前数据对象的keyvalue分别返回键名和键值(即实际存入的数据)。continue方法将光标移到下一个数据对象,如果当前数据对象已经是最后一个数据了,则光标指向null。


openCursor方法还可以接受第二个参数,表示遍历方向,默认值为next,其他可能的值为prev、nextunique和prevunique。后两个值表示如果遇到重复值,会自动跳过。


3.3 createIndex()方法

createIndex()方法用来创建索引:

createIndex(index,name,options)

createIndex方法接受三个参数,第一个是索引名称,第二个是建立索引的属性名,第三个是参数对象,用来设置索引特性。unique表示索引所在的属性是否有唯一值.


3.3.1 index方法

index()方法用于从对象仓库返回指定的索引。

var index = store.index(index);

var data = index.get(name)

注意:get方法有可能取回多个数据对象,因为name属性没有唯一值。


5、设备震动(Vibration API)

Vibration接口用于在浏览器中发出命令,使得设备振动。


(1)检测是否可用

目前,只有Chrome和Firefox的Android平台最新版本支持它。

navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;   


if (navigator.vibrate) {   

  // 支持  

}

(2)振动

navigator.vibrate(1000);

vibrate()方法的参数就是振动持续的毫秒数,除了单个数值外,还可以接受一个数组作为参数,表示振动的模式。偶数位置的数组成员表示振动的毫秒数,奇数位置的数组成员表示等待的毫秒数。

navigator.vibrate([200,100,300])

上面代码表示,设备先振动200毫秒,然后等待100毫秒,再接着振动300毫秒。


注意:vibrate是一个非阻塞式的操作,即手机振动的同时,JavaScript代码仍然继续向下运行。要停止振动,只有将0毫秒或者一个空数组传入vibrate方法。


6、屏幕亮度(Luminosity API)

Luminosity API用来屏幕亮度调节,不过目前只有Firefox支持。


当移动设备的亮度传感器感知外部亮度发生显著变化时,会触发devicelight事件。

window.addEventListener('devicelight', function(event) {   

  console.log(event.value + 'lux');  

});

上面代码表示,devicelight事件的回调函数,接受一个事件对象作为参数。该对象的value属性就是亮度的流明值。


7、手机设备方向


7.1 方向

Orientation API用于检测手机的摆放方向(竖放或横放)。

(1)检测浏览器是否支持

if(window.DeviceOrientationEvent){

  //支持

}else{

  //不支持

}

(2)监听方向变化

一旦设备的方向发生变化,会触发deviceorientation事件,可以对该事件指定回调函数。

window.addEventListener("deviceorientation", listener,false);


function listener(event){

  var alpha = event.alpha;

  var beta = event.beta;

  var gamma = event.gamma;

}

上面代码中,event事件对象有alphabetagamma三个属性,它们分别对应手机摆放的三维倾角变化。要理解它们,就要理解手机的方向模型。当手机水平摆放时,使用三个轴标示它的空间位置:x轴代表横轴、y轴代表竖轴、z轴代表垂直轴。event对象的三个属性就对应这三根轴的旋转角度。

alpha:表示围绕z轴的旋转,0~360(度)。当设备水平摆放时,顶部指向地球的北极,alpha此时为0。  

beta:表示围绕x轴的旋转,-180~180(度),由前向后。当设备水平摆放时,beta此时为0。  

gramma:表示围绕y轴的选择,-90~90(度),从左到右。当设备水平摆放时,gramma此时为0。


7.2 移动(motion)

(1)检测是否支持

if(window.DeviceMotionEvent){

  //支持

}else{

  //不支持

}

(2)和方向事件一样,移动也有监听事件:devicemotion

window.addEventListener('devicemotion',listener,true)


function listener(event){

  var acceleration = event.acceleration;

  var accelerationIncludingGravity = event.accelerationIncludingGravity;

  var rotationRate = event.rotationRate;

  var interval = event.interval;

}

上面代码中,event事件对象有accelerationaccelerationIncludingGravityrotationRateinterval四个属性。


属性说明:

(1)acceleration、accelerationIncludingGravity

acceleration和accelerationIncludingGravity属性都包含三个轴:

  • x轴:西向东(acceleration.x)
  • y轴:南向北(acceleration.y)
  • z轴:垂直地面(acceleration.z)


(2)rotationRate

rotationRate有三个值: 

alpha: 设备沿着垂直屏幕的轴的旋转速率 (桌面设备相对于键盘) 

beta: 设备沿着屏幕左至右方向的轴的旋转速率(桌面设备相对于键盘) 

gamma: 设备沿着屏幕下至上方向的轴的旋转速率(桌面设备相对于键盘) 


(3)interval

interval 表示的是从设备获取数据的频率,单位是毫秒。


更多:检测设备方向


简单的摇一摇功能

var SHAKE_THRESHOLD = 3000;   

var last_update = 0;   

var x = y = z = last_x = last_y = last_z = 0;


if (window.DeviceMotionEvent) {   

  window.addEventListener('devicemotion', deviceMotionHandler, false);   

}

 

function deviceMotionHandler(eventData) {   

  var acceleration = eventData.accelerationIncludingGravity;   

  var curTime = new Date().getTime();   

  var diffTime = curTime - last_update;   

  if (diffTime > 100) {   

    last_update = curTime;   

    x = acceleration.x;   

    y = acceleration.y;   

    z = acceleration.z;   

    var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;   

   if (speed > SHAKE_THRESHOLD) {

     //dosomething

   };    

   last_x = x;   

   last_y = y;   

   last_z = z;   

 }   

}


8、全屏操作(FullScreen API)

全屏API可以控制浏览器全屏显示。


8.1 requestFullscreen()

Element节点的requestFullscreen方法,可以使得这个节点全屏。

function openFullscreen(elem){

  if (elem.requestFullscreen) {   

    elem.requestFullscreen();  

  } else if (elem.mozRequestFullScreen) {   

    elem.mozRequestFullScreen();  

  } else if (elem.webkitRequestFullscreen) {   

    elem.webkitRequestFullscreen();  

  }

}


openFullscreen(document.documentElement);   //整个页面全屏

openFullscreen(document.getElementById('videoElement');  //使播放器全屏

运行到这里,Gecko 与 WebKit 两个实现中出现了一个值得注意的区别:

Gecko 会为元素自动添加 CSS 使其伸展以便铺满屏幕: "width: 100%; height: 100%"。 WebKit 则不会这么做;它会让全屏的元素以原始尺寸居中到屏幕中央,其余部分变为黑色。

所以为了在 WebKit 下也达到与 Gecko 同样的全屏效果,你需要手动为元素增加 CSS 规则"width: 100%; height: 100%;":

/* html */    

:-webkit-full-screen {}    


:-moz-fullscreen {}        


:fullscreen {}       


:-webkit-full-screen video {     

  width: 100%;     

  height: 100%;    

}  


8.2 exitFullscreen()

Document对象的exitFullscreen方法用于取消全屏。

function closeFullscreen(){

  if (document.exitFullscreen) {   

    document.exitFullscreen();  

  } else if (document.mozCancelFullScreen) {   

    document.mozCancelFullScreen();  

  } else if (document.webkitCancelFullScreen) {   

    document.webkitCancelFullScreen();  

  } else if (document.msExitFullscreen) {   

    document.msExitFullscreen();  

  }

}

closeFullscreen()

用户手动按下ESC键或F11键,也可以退出全屏键。此外,加载新的页面,或者切换tab,或者从浏览器转向其他应用(按下Alt-Tab),也会导致退出全屏状态。


8.3 全屏属性和事件


8.3.1 属性

document.fullscreenElement: 当前处于全屏状态的元素 element. document.fullscreenEnabled: 标记 fullscreen 当前是否可用.

var fullscreenElement = document.fullscreenElement || document.mozFullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement;    


var fullscreenEnabled = document.fullscreenEnabled || document.mozFullscreenEnabled || document.webkitFullscreenEnabled || document.msFullscreenEnabled;


8.3.2 全屏事件

fullscreenchange事件:浏览器进入或离开全屏时触发。   

fullscreenerror事件:浏览器无法进入全屏时触发,可能是技术原因,也可能是用户拒绝。

document.addEventListener('fullscreenchange',function(){

  if(document.fullscreenElement){

    //进入全屏

  }else{

    //退出全屏

  }

},false);



关注”全栈技术杂货铺“

全栈技术杂货铺