HTML5（五）——新增的API

程序员文章站 2022-05-26 20:37:04

...

网络监听接口：

online，offline事件

HTML5（五）——新增的API

全屏接口：

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

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>

文件读取接口：

拖拽接口：

被拖拽元素添加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>

HTML5（五）——新增的API

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

第二个版本第一次修订：

<!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>

HTML5（五）——新增的API

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

第二个版本第二次修订：（使用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>

HTML5（五）——新增的API

地理定位接口：

参考W3school

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

HTML5（五）——新增的API

网络监听接口：

全屏接口：

文件读取接口：

拖拽接口：

地理定位接口：

Web存储接口：

应用缓存接口：

多媒体接口：

针对iOS10新增Api的详细研究

针对iOS10新增Api的详细研究

HTML5的文档结构和新增标签完全解析

HTML5 Geolocation API的正确使用方法

用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能

使用HTML5 Canvas API中的clip()方法裁剪区域图像

HTML5的Geolocation地理位置定位API使用教程

HTML5中的postMessage API基本使用教程

HTML5 Canvas API中drawImage()方法的使用实例

HTML5新增的标签和属性归纳总结