Table of contents
In web development, sometimes we need to pass
Table of contents
In web development, sometimes we need to control the browser's full-screen mode through JavaScript. This is useful for scenarios such as video players, slideshow presentations, and games. This article will introduce in detail how to use JavaScript to implement the browser's full screen and exit full screen functions.
Go to full screen
To enter full-screen mode, we first need to get an element and then call the element's requestFullscreen() method.
Here's a sample code that uses JavaScript to go full screen:
const element = document.documentElement; // 获取整个文档的元素
if (element.requestFullscreen) { // 标准写法
element.requestFullscreen();
} else if (element.mozRequestFullScreen) { // Firefox 浏览器
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) { // Chrome 和 Safari
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) { // IE11
element.msRequestFullscreen();
}
The above code first obtains the root element of the entire document (document.documentElement), and then checks whether the browser supports the standard requestFullscreen() method. If not, then Try specific methods using different browsers in turn.
Exit Full Screen
To exit full-screen mode, we can call the document object's exitFullscreen() method or call the current full-screen element's exitFullscreen() method .
Here is sample code to exit full screen using JavaScript:
if (document.exitFullscreen) { // 标准写法
document.exitFullscreen();
} else if (document.mozCancelFullScreen) { // Firefox 浏览器
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) { // Chrome 和 Safari
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { // IE11
document.msExitFullscreen();
}
The above code first checks whether the browser supports the standard exitFullscreen() method. If it does not support it, it tries to use the specific methods of different browsers in turn.
Compatibility Notes
It should be noted that different browsers may have slightly different implementations of the full-screen function, so we need to use compatibility writing to cover multiple browsers. When writing full-screen code, it is recommended to check and use the APIs of multiple browsers at the same time to ensure that it works correctly on different browsers.