devbox
不正经
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

HTML5（五）——新增的API_html5新增的api

作者：不正经 | 2024-02-26 09:12:06

赞

踩

html5新增的api

网络监听接口：

online，offline事件

全屏接口：

全屏操作主要方法和属性：

  1. requestFullScreen()：开启全屏
  2. cancelFullScreen()：退出全屏----------对象只能是document
  3. FullScreenElement：是否全屏状态-------------对象只能是document

兼容性问题：不同浏览器需要加不同的前缀

Chrome：webkit         Firefox：moz         IE：ms         Opera：o

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. 	<meta charset="gbk">
  5. 	<title>全屏API</title>
  6. </head>
  7. <body>
  8. 	<div>
  9. 		<img src="李沁1.jpg" width="200">
  10. 		<button id="fullScreen">全屏</button>
  11. 		<button id="cancelFullScreen">退出全屏</button>
  12. 		<button id="isFullScreen">是否全屏状态</button>
  13. 	</div>
  14.  
  15. 	<script type="text/javascript">
  16. 		window.onload = function() {
  17. 			var div = document.querySelector('div');
  18.  
  19. 			// 全屏操作
  20. 			document.querySelector('button').onclick = function() {
  21. 				if (div.requestFullScreen) {
  22. 					div.requestFullScreen();
  23. 				}
  24. 				else if (div.webkitRequestFullScreen) {
  25. 					div.webkitRequestFullScreen();
  26. 				}
  27. 				else if (div.mozRequestFullScreen) {
  28. 					div.mozRequestFullScreen();
  29. 				}
  30. 				else if (div.msRequestFullScreen) {
  31. 					div.msRequestFullScreen();
  32. 				}
  33. 				else if (div.oRequestFullScreen) {
  34. 					div.oRequestFullScreen();
  35. 				}
  36. 			}
  37.  
  38. 			// 退出全屏
  39. 			document.querySelector('#cancelFullScreen').onclick = function() {
  40. 				if (document.cancelFullScreen) {
  41. 					document.cancelFullScreen();
  42. 				}
  43. 				else if (document.webkitCancelFullScreen) {
  44. 					document.webkitCancelFullScreen();
  45. 				}
  46. 				else if (document.mozCancelFullScreen) {
  47. 					document.mozCancelFullScreen();
  48. 				}
  49. 				else if (document.msCancelFullScreen) {
  50. 					document.msCancelFullScreen();
  51. 				}
  52. 				else if (document.oCancelFullScreen) {
  53. 					document.oCancelFullScreen();
  54. 				}
  55. 			}
  56.  
  57. 			// 是否为全屏状态
  58. 			document.querySelector('#isFullScreen').onclick = function() {
  59. 				if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullscreenElement ||document.msFullscreenElement || document.oFullscreenElement) {
  60. 					alert('全屏状态');
  61. 				}
  62. 				else {
  63. 					alert('退屏状态');
  64. 				}
  65. 			}
  66. 		}
  67. 	</script>
  68. </body>
  69. </html>

全屏背景设置参考：

 谷歌浏览器调用webkitRequestFullScreen方法后，设置的背景色只填充可视范围问题。（该博主作用在body，而我作用在html标签对象上才生效！）

文件读取接口：

参考MDN Filereader API

构造函数 FileReader()

方法：

FileReader.abort()

中止读取操作。在返回时，readyState属性为DONE。

FileReader.readAsArrayBuffer()

开始读取指定的 Blob中的内容, 一旦完成, result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象.

FileReader.readAsBinaryString() 

开始读取指定的Blob中的内容。一旦完成，result属性中将包含所读取文件的原始二进制数据。

FileReader.readAsDataURL()

开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的Base64字符串以表示所读取文件的内容。

FileReader.readAsText()

开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个字符串以表示所读取的文件内容。

（readerAsDataURL适合使用于选中的文件/拖拽的文件，将读取结果（文件参数数据）返回放在src等DataURL中）

（readerAsText适合使用于选中的文件/拖拽的文件，将读取结果（文本字符串）返回）

事件处理：

 

FileReader.onabort

处理abort事件。该事件在读取操作被中断时触发。

FileReader.onerror

处理error事件。该事件在读取操作发生错误时触发。

FileReader.onload

处理load事件。该事件在读取操作完成时触发。

FileReader.onloadstart

处理loadstart事件。该事件在读取操作开始时触发。

FileReader.onloadend

处理loadend事件。该事件在读取操作结束时（要么成功，要么失败）触发。

FileReader.onprogress

处理progress事件。该事件在读取Blob时触发。

相关链接（建议参考一下）：

案例1：

  1. <body>
  2.     <form action="">
  3.         <input type="file" name="myFile" id="myFile"/>
  4.         <input type="submit">
  5.     </form>
  6.     <br/>
  7.     <img src="images/找不到图片.gif" width="300" style="border-radius: 50px;"/>
  8.     <script>
  9.         document.querySelector('#myFile').addEventListener('change', function() {
  10.             let fileReader = new FileReader();
  11.             let checkedFile = document.querySelector('#myFile').files[0];
  12.             console.log('name:'+checkedFile.name);
  13.             console.log('type:'+checkedFile.type);
  14.             console.log('size:'+checkedFile.size);
  15.             fileReader.readAsDataURL(checkedFile);
  16.             fileReader.addEventListener('load', function() {
  17.                 console.log(fileReader.result); //读取结果
  18.                 document.querySelector('img').src = fileReader.result;
  19.             });
  20.         });
  21.     </script>
  22. </body>

案例2：

  1. <body>
  2.     <form action="">
  3.         <input type="file" name="myFile" id="myFile"/>
  4.         <input type="submit">
  5.     </form>
  6.     <br/>
  7.  
  8.     <span></span>
  9.     <script>
  10.         document.querySelector('#myFile').addEventListener('change', function() {
  11.             let fileReader = new FileReader();
  12.             let checkedFile = document.querySelector('#myFile').files[0];
  13.             console.log('name:'+checkedFile.name);
  14.             console.log('type:'+checkedFile.type);
  15.             console.log('size:'+checkedFile.size);
  16.             fileReader.readAsText(checkedFile);
  17.             fileReader.addEventListener('load', function() {
  18.                 console.log(fileReader.result);
  19.                 document.querySelector('span').innerText = fileReader.result;
  20.             });
  21.         });
  22.     </script>
  23. </body>

 

 

其他案例：

通过 click() 方法使用隐藏的 file input 元素

使用 label 元素来触发一个隐藏的 file input 元素

使用拖放来选择文件

使用对象URL来显示图片 

异步处理文件上传

拖拽接口：

被拖拽元素添加draggable="true"属性

拖拽事件：

        被拖拽元素：

  • drag：应用于被拖拽元素，整个拖拽过程都会调用  
  • dragstart：应用于被拖拽元素，拖拽开始时调用
  • dragleave：应用于被拖拽元素，鼠标离开拖拽元素原来的范围时调用
  • dragend：应用于被拖拽元素，拖拽结束时调用

        目标元素（目的地）：

  • dragenter：应用于目标元素，当被拖拽元素进入目标元素时调用
  • dragover：应用于目标元素，当停留在目标元素上时调用
  • drop：应用于目标元素，当在目标元素上松开鼠标时调用（浏览器默认阻止该事件的触发，必须在dragover事件中e.preventDeafult()阻止阻止浏览器默认行为）
  • dragleave：应用于目标元素，当鼠标离开目标元素范围时调用

第一个版本第一次修订：

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. 	<meta charset="gbk">
  5. 	<title>拖拽API测试版</title>
  6. 	<style type="text/css">
  7. 		* {
  8. 			margin: 0px;
  9. 			padding: 0px;
  10. 		}
  11. 		.divLeft {
  12. 			width: 400px;
  13. 			height: 500px;
  14. 			border: 1px solid black;
  15. 			float: left;
  16. 		}
  17. 		.divRight {
  18. 			width: 400px;
  19. 			height: 500px;
  20. 			border: 1px solid black;
  21. 			float: right;
  22. 		}
  23. 		p {
  24. 			width: 100%;
  25. 			height: 40px;
  26. 			background-color: green;
  27. 		}
  28. 	</style>
  29. </head>
  30. <body>
  31. 	<div class="divLeft" id="divLeft">
  32. 		<!-- 被拖拽元素必须加可拖拽属性draggable="true" -->
  33. 		<p id="pe" draggable='true'>把我拖走！！！</p>
  34. 	</div>
  35. 	<div  class="divRight" id="divRight">
  36. 		
  37. 	</div>
  38. 	<script type="text/javascript">
  39. 		var divLeft = document.querySelector('#divLeft');
  40. 		var divRight = document.querySelector('#divRight');
  41. 		var pe = document.querySelector('#pe');
  42.  
  43. 		pe.ondrag = function() {}
  44. 		pe.ondragstart = function() {}
  45. 		pe.ondragleave = function() {}
  46. 		pe.ondragend = function() {}
  47.  
  48. 		divRight.ondragenter = function() {}
  49. 		divRight.ondragover = function(e) {
  50. 			e.preventDefault();
  51. 		}
  52. 		divLeft.ondragover = function(e) {
  53. 			e.preventDefault();
  54. 		}
  55. 		divRight.ondragleave = function() {}
  56. 		divRight.ondrop = function() {
  57. 			divRight.appendChild(pe);
  58. 		}
  59. 		divLeft.ondrop = function() {
  60. 			divLeft.appendChild(pe);
  61. 		}
  62. 	</script>
  63. </body>
  64. </html>

上面一个版本存在很大的问题是：只能拖拽指定的元素，多个元素就要写多个事件监听

第一个版本第二次修订：

  1. <!-- 升级：把this赋给that -->
  2.     <div class="divLeft" id="divLeft">
  3. 		<!-- 被拖拽元素必须加可拖拽属性draggable="true" -->
  4. 		<p id="pe" draggable='true'>把我拖走！！！</p>
  5. 		<p id="pel" draggable='true'>把我拖</p>
  6. 	</div>
  7. 	<div  class="divRight" id="divRight">
  8. 		
  9. 	</div>
  10. 	<script type="text/javascript">
  11. 		var divLeft = document.querySelector('#divLeft');
  12. 		var divRight = document.querySelector('#divRight');
  13. 		var pe = document.querySelector('#pe');
  14. 		var pel = document.querySelector('#pel');
  15.  
  16. 		var that;
  17. 		pe.ondrag = function() {}
  18. 		pe.ondragstart = function() {
  19. 			that = this;
  20. 		}
  21. 		pel.ondragstart = function() {
  22. 			that = this;
  23. 		}
  24. 		pe.ondragleave = function() {}
  25. 		pe.ondragend = function() {}
  26.  
  27. 		divRight.ondragenter = function() {}
  28. 		divRight.ondragover = function(e) {
  29. 			e.preventDefault();
  30. 		}
  31. 		divLeft.ondragover = function(e) {
  32. 			e.preventDefault();
  33. 		}
  34. 		divRight.ondragleave = function() {}
  35. 		divRight.ondrop = function() {
  36. 			divRight.appendChild(that);
  37. 		}
  38. 		divLeft.ondrop = function() {
  39. 			divLeft.appendChild(that);
  40. 		}
  41. 	</script>

上面一次修订存在问题是：依然存在需要写多个监听和获取对象代码

第二个版本第一次修订：

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. 	<meta charset="gbk">
  5. 	<title>拖拽API</title>
  6. 	<style type="text/css">
  7. 		* {
  8. 			margin: 0px;
  9. 			padding: 0px;
  10. 		}
  11. 		.divLeft {
  12. 			width: 400px;
  13. 			height: 500px;
  14. 			border: 1px solid black;
  15. 			float: left;
  16. 		}
  17. 		.divRight {
  18. 			width: 400px;
  19. 			height: 500px;
  20. 			border: 1px solid black;
  21. 			float: right;
  22. 		}
  23. 		p {
  24. 			width: 100%;
  25. 			height: 40px;
  26. 			background-color: green;
  27. 			border-bottom: 1px solid blue;
  28. 		}
  29. 	</style>
  30. </head>
  31. <body>
  32. 	<div class="divLeft" id="divLeft">
  33. 		<!-- 被拖拽元素必须加可拖拽属性draggable="true" -->
  34. 		<p id="pe" draggable='true'>把我拖走！！！</p>
  35. 		<p id="pel" draggable='true'>把我拖</p>
  36. 	</div>
  37. 	<div  class="divRight" id="divRight">
  38. 		
  39. 	</div>
  40. 	<script type="text/javascript">
  41. 		var obj = null;
  42.  
  43. 		// 将dom元素对象换成document对象（pe,pel元素也在文档中）
  44. 		document.ondrag = function() {}
  45. 		document.ondragstart = function(e) {
  46. 			obj = e.target;//获取被拖拽元素对象
  47. 		}
  48. 		document.ondragleave = function() {}
  49. 		document.ondragend = function() {}
  50.  
  51. 		// 同样的将divRight元素对象换成document对象
  52. 		document.ondragenter = function(e) {
  53. 			// target属性获取目标元素
  54. 			console.log(e.target);//获取目标元素对象
  55. 		}
  56. 		document.ondragover = function(e) {
  57. 			e.preventDefault();
  58. 		}
  59. 		document.ondragleave = function() {}
  60. 		document.ondrop = function(e) {
  61. 			e.target.appendChild(obj);
  62. 		}
  63. 	</script>
  64. </body>
  65. </html>

上面版本存在一个优化问题：尽量不使用全局变量！

第二个版本第二次修订：（使用dataTransfer属性来实现数据的存储与获取）

dataTransfer的使用：（仅适用于拖拽）

  1. 存储数据：dataTransfer.setData(format, data); 
    1. format：text/html      text/uri-list两种存储格式（方式）
    2. data：数据，一般都是字符串
  2. 获取数据：dataTransfer.getData(format)
    1. format：存储数据时的存储格式
  1.     <script type="text/javascript">
  2.  
  3. 		// 将dom元素对象换成document对象（pe,pel元素也在文档中）
  4. 		document.ondrag = function() {}
  5. 		document.ondragstart = function(e) {
  6. 			e.dataTransfer.setData('text/html', e.target.id);	//存储触发事件对应的源元素的ID
  7. 		}
  8. 		document.ondragleave = function() {}
  9. 		document.ondragend = function() {}
  10.  
  11.  
  12. 		document.ondragenter = function(e) {
  13. 			console.log(e.target);
  14. 		}
  15. 		document.ondragover = function(e) {
  16. 			e.preventDefault();
  17. 		}
  18. 		document.ondragleave = function() {}
  19. 		document.ondrop = function(e) {
  20. 			var id = e.dataTransfer.getData('text/html');    //获取数据-ID
  21. 			e.target.appendChild(document.getElementById(id));
  22. 		}
  23. 	</script>

地理定位接口：

参考W3school

使用第三方平台：百度地图开放平台

Web存储接口：

window对象属性：（sessionStorage，localStorage可在浏览器调试工具面板的application查看）

  1. sessionStorage：（存储数据到本地，只存储在当前页面，新页面或关闭页面都无效（即使同一浏览器），最大容量5MB左右）

  • setItem(K, V)：以键值对的方式存储数据

  • getItem(K)：获取数据

  • remove(K)：移除数据

  • clear()：清空数据

     2.localStorage：（存储数据到本地，存储在浏览器，同一浏览器新页面可以共享，最大容量20MB）

  • setItem(K, V)

  • getItem(K)

  • remove(K)

  • clear()

应用缓存接口：（该接口将被废弃）

原理：

浏览器请求服务器返回页面数据，通过渲染引擎和JS引擎显示页面，页面的全部数据都缓存在浏览器中

可以通过创建cachemanifest文件，设置缓存内容，轻松创建web离线版本

优势：

自定义配置需要缓存的资源

网络无连接时仍可用

利用缓存，提高访问服务器速度

缓存减少请求次数，减轻服务器负担

步骤：

  1. 在<html>标签中添加属性manifest="缓存配置文件名.appcache"
  2. 新建appcache文件：设置内容

  3. 注意：如果不生效，可能是服务器主体的MIME-type配置错误，即“text/cache-manifest”，需要到服务器配置（IIS需要，Apache就不需要了！）

参考文章：https://blog.csdn.net/weixin_30861797/article/details/95287575

=======谷歌将在四月左右废弃app cache（离线缓存）=========

manifest的缺点：

而我们在webQQ时代就已经使用过这项技术，当时遇到一些挺恼人的问题:
1.更新机制：一旦你采用了manifest之后，你将不能清空这些缓存，只能更新缓存，或者得用户自己去清空这些缓存。
这里一旦更新到错误的页面，将被缓存起来，而无法有机会访问到正确的页面，那么就只能杯具了，所以保证更新的页面资源的正确性显得尤为重要。
另外电信之类的运营商很喜欢在一些流量大的网站进行劫持广告，这样的话，很可能在更新过程将这些广告给缓存起来了，那就杯具了。

2.manifest本身的编写要求比较严格，要注意换行跟路径文件名之类的问题。不然缓存将无效。

3.如果更新的资源中有一个资源更新失败了，将导致全部更新失败，将用回上一版本的缓存。

4.二次更新的问题，即在更新新版本过程中，用户需要第一次时访问的还是旧的资源，需要第二次进去才是新的资源。如果此时后台接口发生变化，访问第一次时的旧数据很可能将出现兼容问题。

5.限制大小问题，一般是最多缓存5mb，不过一般是够用的。

6.回滚问题，这个可以参考之前的一篇《慎用manifest》的文章，大体是从无到有，又想回滚到无的情形。

多媒体接口：

（暂时不做更新。。。等项目用到再来更新自定义音频吧！）

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/145351
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号