常用web api

在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