打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
HTML5 底层API概要
一、Drag & Drop API

1.创建拖放事件监听程序时,一定要阻止默认行为,尤其是在dragover事件中一定要执行preventDefault(),否则drop事件不会出发,同时dropEffect也不会生效。

2.dataTransfer接口:

dataTransfer.effectAllowed[=value]

dataTransfer.dropEffect[=value]

  dataTransfer.setDragImage(element,x,y)

  dataTransfer.setData(format,data):format有两种格式:text/plain,text/uri-list

dataTransfer.getData(format)

  dataTransfer.clearData([format])

 

dataTransfer.items:返回关于拖拽数据的DataTransferItemList对象。


dataTransfer.addElement(element)将元素添加到被拖拽的列表里。如果想要让某个元素跟随被拖拽元素一同被拖拽,可使用该方法。

dataTransfer.types:返回再dragStart事件触发时为元素存储数据的格式。如果是系统文件的拖拽,则返回files。

dataTransfer.files:如果是拖拽系统文件,返回正在被拖拽的文件列表对象。可以通过它获得所拖拽的文件数据。



二、History API

1.解决了传统AJAX回传无法记录页面状态的问题,使得即可用JS来局部刷新页面,同时又可以更新地址栏和浏览器历史记录。

2.原有的history对象方法:back(),forward(),go(),length:当前页面历史记录的条数.

3.HTML5 API对象在原对象的基础上添加了两个新方法:

pushState(state对象,标题,目标URL):用于向history对象添加当前页面的记录,并且改变浏览器地址栏的URL。

replaceState():类似于pushState(),只是将当前页面状态替换为新的状态。


 

三、Communication API

1.XMLHttpRequest Level 2是XMLHttpRequest的改进和升级,它主要包括:

跨源XMLHttpRequest请求;

进度事件:事件名称:loadstart,progress,abort,error,load,loadend。


2.跨文档消息通信 

postMessage API;

服务器端推送事件;

管道消息传送(尚未成为正式标准);



四、Notification API

1.window.webkitNotifications可用来检测浏览器是否之词Notification API;

2.webkitNotifications.checkPermission()判断当前Notification的许可状态(0表示允许,1表示未作许可授权,2表示拒绝);

3.webkitNotifications.requestPermission():用于检查是否授权桌面提醒;

4.利用webkitNotifications.createNotification(icon,title,body) 和 webkitNotifications.createHTMLNotification(icon,title,body)方法的返回对象方法show()、cancel()实现桌面提醒的显示与撤销;





五、Canvas API 





六、通用Base64方法及应用

1.编码:window.btoa('string'),解码:window.atob('');

2.图形数据方面的应用:图片文件——二进制数据——Base64字符串;Base64字符串——二进制数据——图片文件

3.音频文件方面的应用,数据加密方面的应用。



七、Web Database API

1.Web SQL标准已经在2010年停止更新,即废弃,原因是:SQLite本身并不是一个被广泛接受的标准(提供的方法有:openDatabase(),transaction(),executeSql(),其中execute()函数执行后,产生一个SQLResultSet参数对象,该参数对象有insertId,rowsAffected,rows属性)。

2.IndexedDB API,基于对象的数据存储,NoSQL时代的产物,比较著名的NoSQL数据库有Redis和MongoDB等。

3.兼容性判断:webkit浏览器('webkitIndexedDB' in window) 火狐('moz_indexdDB' in window);

4.调用:var myDB = window.webkitIndexedDB.open("MyDB","MyDataBase"); 查看数据库属性及方法:console.log(myDB);



八、File API

1.File API包含以下对象:FileList接口,Blob接口,File接口,FileReader接口,FileError接口,FileException接口。FileAPI定义的接口用来读取文件以及操作大对象数据和文件访问带来的错误。

2.FileWriter API主要用于从Web应用来写文件,这个API主要包括以下接口:blobBuilder接口,fileSaver接口,fileWriter接口,fileWriterSync接口。



九、Canvas API

1.基于Canvas的绘图要依赖画面提供的渲染上下文,所有的绘图命令和属性都定义在渲染上下文当中。当使用Canvas的getContext("2D")方法时,其返回的是CanvasRenderingContext2D对象,其内部表现为笛卡尔平面坐标,并且左上角坐标为(0,0).


本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
Javascript使用HTML5 File Api进行文件读取
拖拽:从Dojo到HTML5
HTML5
HTML5拖拽
推荐一款开源的接口测试练手实战项目!
(引用)API基础知识(引用)_
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服