HTML5（五）——新增的API

最新推荐文章于 2022-08-30 17:52:19 发布

C-A-L-D

最新推荐文章于 2022-08-30 17:52:19 发布

阅读量439

点赞数

分类专栏： Web前端-html5

本文链接：https://blog.csdn.net/qq_42952262/article/details/104487876

版权

Web前端-html5 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

网络监听接口：

online，offline事件

全屏接口：

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

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

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

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

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="gbk">
	<title>全屏API</title>
</head>
<body>
	<div>
		<img src="李沁1.jpg" width="200">
		<button id="fullScreen">全屏</button>
		<button id="cancelFullScreen">退出全屏</button>
		<button id="isFullScreen">是否全屏状态</button>
	</div>

	<script type="text/javascript">
		window.onload = function() {
			var div = document.querySelector('div');

			// 全屏操作
			document.querySelector('button').onclick = function() {
				if (div.requestFullScreen) {
					div.requestFullScreen();
				}
				else if (div.webkitRequestFullScreen) {
					div.webkitRequestFullScreen();
				}
				else if (div.mozRequestFullScreen) {
					div.mozRequestFullScreen();
				}
				else if (div.msRequestFullScreen) {
					div.msRequestFullScreen();
				}
				else if (div.oRequestFullScreen) {
					div.oRequestFullScreen();
				}
			}

			// 退出全屏
			document.querySelector('#cancelFullScreen').onclick = function() {
				if (document.cancelFullScreen) {
					document.cancelFullScreen();
				}
				else if (document.webkitCancelFullScreen) {
					document.webkitCancelFullScreen();
				}
				else if (document.mozCancelFullScreen) {
					document.mozCancelFullScreen();
				}
				else if (document.msCancelFullScreen) {
					document.msCancelFullScreen();
				}
				else if (document.oCancelFullScreen) {
					document.oCancelFullScreen();
				}
			}

			// 是否为全屏状态
			document.querySelector('#isFullScreen').onclick = function() {
				if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullscreenElement ||document.msFullscreenElement || document.oFullscreenElement) {
					alert('全屏状态');
				}
				else {
					alert('退屏状态');
				}
			}
		}
	</script>
</body>
</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时触发。

拖拽接口：

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

拖拽事件：

被拖拽元素：

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

目标元素（目的地）：

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

第一个版本第一次修订：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="gbk">
	<title>拖拽API测试版</title>
	<style type="text/css">
		* {
			margin: 0px;
			padding: 0px;
		}
		.divLeft {
			width: 400px;
			height: 500px;
			border: 1px solid black;
			float: left;
		}
		.divRight {
			width: 400px;
			height: 500px;
			border: 1px solid black;
			float: right;
		}
		p {
			width: 100%;
			height: 40px;
			background-color: green;
		}
	</style>
</head>
<body>
	<div class="divLeft" id="divLeft">
		<!-- 被拖拽元素必须加可拖拽属性draggable="true" -->
		<p id="pe" draggable='true'>把我拖走！！！</p>
	</div>
	<div  class="divRight" id="divRight">
		
	</div>
	<script type="text/javascript">
		var divLeft = document.querySelector('#divLeft');
		var divRight = document.querySelector('#divRight');
		var pe = document.querySelector('#pe');

		pe.ondrag = function() {}
		pe.ondragstart = function() {}
		pe.ondragleave = function() {}
		pe.ondragend = function() {}

		divRight.ondragenter = function() {}
		divRight.ondragover = function(e) {
			e.preventDefault();
		}
		divLeft.ondragover = function(e) {
			e.preventDefault();
		}
		divRight.ondragleave = function() {}
		divRight.ondrop = function() {
			divRight.appendChild(pe);
		}
		divLeft.ondrop = function() {
			divLeft.appendChild(pe);
		}
	</script>
</body>
</html>

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

第一个版本第二次修订：

<!-- 升级：把this赋给that -->
    <div class="divLeft" id="divLeft">
		<!-- 被拖拽元素必须加可拖拽属性draggable="true" -->
		<p id="pe" draggable='true'>把我拖走！！！</p>
		<p id="pel" draggable='true'>把我拖</p>
	</div>
	<div  class="divRight" id="divRight">
		
	</div>
	<script type="text/javascript">
		var divLeft = document.querySelector('#divLeft');
		var divRight = document.querySelector('#divRight');
		var pe = document.querySelector('#pe');
		var pel = document.querySelector('#pel');

		var that;
		pe.ondrag = function() {}
		pe.ondragstart = function() {
			that = this;
		}
		pel.ondragstart = function() {
			that = this;
		}
		pe.ondragleave = function() {}
		pe.ondragend = function() {}

		divRight.ondragenter = function() {}
		divRight.ondragover = function(e) {
			e.preventDefault();
		}
		divLeft.ondragover = function(e) {
			e.preventDefault();
		}
		divRight.ondragleave = function() {}
		divRight.ondrop = function() {
			divRight.appendChild(that);
		}
		divLeft.ondrop = function() {
			divLeft.appendChild(that);
		}
	</script>

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

第二个版本第一次修订：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="gbk">
	<title>拖拽API</title>
	<style type="text/css">
		* {
			margin: 0px;
			padding: 0px;
		}
		.divLeft {
			width: 400px;
			height: 500px;
			border: 1px solid black;
			float: left;
		}
		.divRight {
			width: 400px;
			height: 500px;
			border: 1px solid black;
			float: right;
		}
		p {
			width: 100%;
			height: 40px;
			background-color: green;
			border-bottom: 1px solid blue;
		}
	</style>
</head>
<body>
	<div class="divLeft" id="divLeft">
		<!-- 被拖拽元素必须加可拖拽属性draggable="true" -->
		<p id="pe" draggable='true'>把我拖走！！！</p>
		<p id="pel" draggable='true'>把我拖</p>
	</div>
	<div  class="divRight" id="divRight">
		
	</div>
	<script type="text/javascript">
		var obj = null;

		// 将dom元素对象换成document对象（pe,pel元素也在文档中）
		document.ondrag = function() {}
		document.ondragstart = function(e) {
			obj = e.target;//获取被拖拽元素对象
		}
		document.ondragleave = function() {}
		document.ondragend = function() {}

		// 同样的将divRight元素对象换成document对象
		document.ondragenter = function(e) {
			// target属性获取目标元素
			console.log(e.target);//获取目标元素对象
		}
		document.ondragover = function(e) {
			e.preventDefault();
		}
		document.ondragleave = function() {}
		document.ondrop = function(e) {
			e.target.appendChild(obj);
		}
	</script>
</body>
</html>

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

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

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

存储数据：dataTransfer.setData(format, data);
1. format：text/html text/uri-list两种存储格式（方式）
2. data：数据，一般都是字符串
获取数据：dataTransfer.getData(format)
1. format：存储数据时的存储格式

    <script type="text/javascript">

		// 将dom元素对象换成document对象（pe,pel元素也在文档中）
		document.ondrag = function() {}
		document.ondragstart = function(e) {
			e.dataTransfer.setData('text/html', e.target.id);	//存储触发事件对应的源元素的ID
		}
		document.ondragleave = function() {}
		document.ondragend = function() {}


		document.ondragenter = function(e) {
			console.log(e.target);
		}
		document.ondragover = function(e) {
			e.preventDefault();
		}
		document.ondragleave = function() {}
		document.ondrop = function(e) {
			var id = e.dataTransfer.getData('text/html');    //获取数据-ID
			e.target.appendChild(document.getElementById(id));
		}
	</script>

地理定位接口：

参考W3school

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

Web存储接口：

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

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

setItem(K, V)：以键值对的方式存储数据
getItem(K)：获取数据
remove(K)：移除数据
clear()：清空数据

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

setItem(K, V)
getItem(K)
remove(K)
clear()

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

原理：

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

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

优势：

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

网络无连接时仍可用

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

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

步骤：

在<html>标签中添加属性manifest="缓存配置文件名.appcache"
新建appcache文件：设置内容
注意：如果不生效，可能是服务器主体的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》的文章，大体是从无到有，又想回滚到无的情形。

多媒体接口：

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

C-A-L-D

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5（五）——新增的API

网络监听接口：online，offline事件全屏接口：全屏操作主要方法和属性：requestFullScreen()：开启全屏 cancelFullScreen()：退出全屏----------对象只能是document FullScreenElement：是否全屏状态-------------对象只能是document兼容性问题：不同浏览器需要加不同的前缀Chro...
复制链接

扫一扫