在web开发中经常会用到一些web api来实现指定的功能，例如全屏，复制，关闭浏览器提示等等，总结一下，开发会用的到。
1.全屏
function fullScreen() {
var element = document.documentElement;
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
}
}
//退出全屏
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
2.复制，访问粘贴版
访问粘贴版
navigator.clipboard.readText().then(
clipText => document.queryElementSelector(".cliptext").innerText = clipText
);
复制
navigator.clipboard.writeText(Der.innerHTML).then(
alert("复制成功")
);
3.关闭刷新浏览器提示
window.onbeforeunload = function (e) {
e = e || window.event;
// 兼容IE8和Firefox 4之前的版本
if (e) {
e.returnValue = '关闭提示';
}
// Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
return '关闭提示';
}
4.获取网络连接信息
- downlink（网络下行速度） effectiveType（网络类型） onchange（有值代表网络状态变更） rtt（估算的往返时间） saveData（打开/请求数据保护模式）
- 用于获取视频或图片的清晰度。
console.log(navigator.connection)
image.png
5.获取网页是否使用cookie
- 返回一个
boolean值，true是使用，false未使用或禁用
console.log(navigator.cookieEnabled)
6.获取浏览器语言
获取浏览器默认语言
console.log(navigator.language)
获取浏览器所有语言是一个数组
console.log(navigator.languages)
7.获取网络连接状态
- 返回
boolean值，true为正常连接，false为网络出现问题。
console.log(window.navigator.onLine)
8.获取浏览器的操作平台
- 返回字符串
console.log(window.navigator.platform )
image.png
