1. Network monitoring interface
1.ononline: triggered when the network is connected
window.addEventListener('online', function () {
alert('网络连通了')
})
2.onoffline: trigger when the network is disconnected
window.addEventListener('offline', function () {
alert('网络断开了')
})
Second, the use of full screen interface
1. Turn on full screen display: requestFullscreen()
不同浏览器需要不能的前缀
chrome:webkit firefox:moz ie:ms opera:o
使用能力测试添加不同浏览器下的前缀达到所有浏览器都能正常使用
2. Exit the full screen: cancelFullscreen()
也需要添加前缀，并且退出全屏只能使用document来实现
3. Determine whether it is full screen state: fullscreenElement()
也需要添加前缀，并且退出全屏只能使用document来实现
案例：
<div class="container">
<img src="./imgs/u=126814066,3359646815&fm=111&gp=0.jpg" alt="">
<button>全屏</button>
<button>判断是否全屏</button>
</div>
let button = document.querySelectorAll('button')
let img = document.querySelector('img')
// 点击按钮全屏显示图片
button[0].onclick = function () {
console.log('全屏')
if (img.requestFullScreen) {
img.requestFullScreen()
} else if (img.webkitRequestFullScreen) {
img.webkitRequestFullScreen()
} else if (img.mozRequestFullScreen) {
img.mozRequestFullScreen()
} else if (img.msRequestFullScreen) {
img.msRequestFullScreen()
} else if (img.oRequestFullScreen) {
img.oRequestFullScreen()
}
}
// 点击图片退出全屏显示
img.onclick = function () {
console.log('退出全屏')
// 退出全屏只能使用document来实现
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()
}
}
// 点击按钮判断图片是否全屏显示
button[1].onclick = function () {
console.log('判断是否全屏')
// 使用document进行判断
if (document.fullscreenElement || document.mozFullscreenElement || document.msFullscreenElement || document
.oFullscreenElement || document.webkitFullscreenElement) {
console.log('是')
} else {
console.log('否')
}
}