html5新增api-1
2021-02-06 本文已影响0人
菜蚴菜
1、online && offline（在线状态检测）
获取当前网络状态
window.navigator.onLine //true为在线，false为离线
当开发离线应用时，通过 navigator.onLine 获取网络状态通常是不够的。开发者还需要在网络状态发生变化时立刻得到通知，因此 HTML5 还提供了 online/offline 事件。当在线 / 离线状态切换时，online/offline 事件将触发在 body 元素上，并且沿着 document.body，document 和 window 的顺序冒泡。因此，开发者可以通过监听它们的 online/offline 事件来获悉网络状态。）。
监测网络状态的变化
window.addEventListener("offline", function () { console.log("offline")});
window.addEventListener("online", function () {console.log("online")});
2、webStorage（客户端轻量级存储方案）
localStorage ： 没有时间限制的数据存储 （持久化本地）(存储的内容会被JSON.stringify处理，如果不是字符串，需要先变为字符串的形式再存储，以防类型转换产生问题)
sessionStorage： 针对一个 session 的数据存储 （内存方式存储）,当用户关闭浏览器窗口后，数据会被删除。
3、应用缓存
构建一个离线应用，创建一个cache manifest文件
优势
1、可配置需要缓存的资源
2、网络无连接应用仍可以使用
3、本地读取缓存资源，提升访问速度
4、减少请求，缓解服务器负担
缓存清单
缓存的文件以.appcache为后缀。在设置缓存以后，第一次加载页面时会根据manifest文件中列出的缓存文件路径，将文件进行缓存到浏览器，再次打开的时候，不会再次从服务器请求，而是加载缓存数据。但是如果manifest文件没有发生改变，那么服务器上的相关页面发生改动，加载时也是只会加载缓存的数据，不会进行更新；如果需要更新，必须改动manifest文件，哪怕只是一个空格或者换行。
开启缓存机制
在每个需要缓存的html页面增加manifest属性，设置AppCache文件，进行缓存。
创建manifest文件
study.appcache
CACHE MENTIFEST
# 上面必须是第一行，#表示注释的意思
CACHE：
# 所需要缓存文件的路径可以是绝对路径或者相对路径，一般相对路径比较好
./images/img1.png
NETWORK:*
# *代表所有
*如果不想要所有的话，可直接像这样写
./images/img2/jpg
# 是需要即时从服务器请求的文件，一般默认*号，表示除CACHE所列所见以外的文件都是需要即时请求更新的。
# 替代方案 ，当请求失败时需要跳转的页面
FALLBACK:../error.html
VERSION：版本号
# 这是一个附加属性，可有可无，加这个是为了在页面改动时，可以进行改动此版本号。
# manifest文件发生改动，第一次不会检验，还是会显示原有缓存内容
# 浏览器再次请求html页面时，发现页面manifest文件进行改动，浏览器会从服务器重新拉取更新的内容。
使用
<html lang="en" manifest="study.appcache">
缺点及解决方案
可参考：https://juejin.cn/post/6844904116066467847
4、全屏显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
/* 全屏显示以后改变背景色，也有兼容性问题 */
#full:-webkit-full-screen{
background:red;
}
</style>
<body>
<div id="full">
<img class='img' src="https://static.e-hqins.com/cms/material/wechat_csyh_hotImage.png" alt="">
<button id='openfull'>全屏</button>
<button id='cancelfull'>取消全屏</button>
<button id='isfull'>是否全屏</button>
</div>
<script>
// 全屏显示 requestFullScreen 有兼容性问题，需要兼容处理
let full = document.querySelector('#full')
document.querySelector('#openfull').onclick = function () {
if (full.requestFullscreen) {//正常浏览器
full.requestFullscreen()
} else if (full.webkitRequestFullScreen) {//WEBKIT
full.webkitRequestFullScreen()
} else if (full.mozRequestFullscreen) {//moz
full.mozRequestFullscreen()
} else if (full.msRequestFullScreen) {//微软 screen小写
full.msRequestFullScreen()
} else if (full.oRequestFullScreen) {//欧朋
full.oRequestFullScreen()
}
}
//取消全屏 cancelFullScreen 和具体元素没有关系，是文档全屏退出
document.querySelector('#cancelfull').onclick = function () {
if (document.cancelFullscreen) {//正常浏览器
document.cancelFullscreen()
} else if (document.webkitCancelFullScreen) {//WEBKIT内核 chorme
document.webkitCancelFullScreen()
} else if (document.mozCancelFullscreen) {//moz
document.mozCancelFullscreen()
} else if (document.msCancelFullScreen) {//微软
document.msCancelFullScreen()
} else if (document.oCancelFullScreen) {//欧朋
document.oCancelFullScreen()
}
}
//是否全屏显示(兼容性写法和上面一样)
document.querySelector('#isfull').onclick = function () {
console.log( document.webkitIsFullScreen)
}
</script>
</body>
</html>
5、拖放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#div1, #div2 {
height: 400px;
}
#img {
height: 300px;
width: auto;
}
</style>
<body>
<!-- 可以实现图片在两个div中来回拖放 -->
<div id="div1" ondrop="drop(event)" ondragover="dragover(event)">
<img id="img" draggable="true" ondragstart="dragstart(event)"
src="https://ibes.e-hqins.com/api-file/data/downloadImage?url=7337565631200620048.png" alt="">
</div>
<div id="div2" ondrop="drop(event)" ondragover="dragover(event)"></div>
<script>
function drop(e) {
console.log('drop', e)
//调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
// 通过 dataTransfer.getData("imgDrag") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
// 被拖数据是被拖元素的 id ("img")
// 把被拖元素追加到放置元素（目标元素）中
e.preventDefault();
var data = e.dataTransfer.getData("imgDrag");
e.target.appendChild(document.getElementById(data));
}
function dragstart(e) { //它规定了被拖动的数据
console.log('dragstart', e)
e.dataTransfer.setData('imgDrag', e.target.id) //设置被拖数据的数据类型和值
}
function dragover(e) {
console.log('dragover', e)
// 规定在何处放置被拖动的数据。
// 默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
e.preventDefault();
}
</script>
</body>
</html>
