版权声明:未经同意,不得随意转载转载 https://blog.csdn.net/lucky541788/article/details/86673359
网络监听接口
/*1.ononline:网络连通的时候触发这个事件*/
window.addEventListener('online', function () {
alert('网络连通了')
});
/*2.onoffline:网络断开时触发*/
window.addEventListener('offline', function () {
alert('网络断开了')
})
全屏接口
全屏操作的主要方法和属性
- requestFullScreen():开启全屏显示
浏览器兼容需要加前缀:
chrome:webkit 、 firefox:moz 、 ie:ms 、 opera:o - cancelFullScreen():退出全屏显示,在不同浏览器下,退出全屏只能使用document来实现
- fullScreenElement:是否是全屏状态,也只能使用document进行判断
<div>
<img src="../images/beauty.jpg" alt="" width="500">
<button class="full">全屏</button>
<button class="cancelFull">退出全屏</button>
<button class="isFull">是否全屏</button>
</div>
window.onload = function () {
var div = document.querySelector('div');
/*添加三个按钮的点击事件*/
/*全屏操作*/
document.querySelector('.full').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();
}
};
/*退出全屏*/
document.querySelector('.cancelFull').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();
}
};
/*判断是否是全屏状态*/
document.querySelector('.isFull').onclick = function () {
if (document.fullscreenElement || document.webkitFullscreenElement || document.mosFullScreenElement || document.msFullscreenElement) {
alert(true)
} else {
alert(false)
}
}
};