浏览器全屏

2020-11-11  本文已影响0人  zhi染hh

在HTML5中,W3C制定了关于全屏的API但是只能由用户事件触发(可以是鼠标事件,键盘事件等),所以不能自动全屏;

最近做这一块挺恶心的,非要实现跳转出来的页面自动实现F11效果,卡死。。。

来一段网上收集的全屏效果代码,随意点击一下全屏【ie,chrome已经试过,其他没试】

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body onclick="openFullscreen()">

    <div>

        整个body区域随意点击一下吧

    </div>

    <script>

        //全屏

        function openFullscreen() {

            var element = document.documentElement;

            if (element.requestFullscreen) {

                element.requestFullscreen();

            } else if (element.mozRequestFullScreen) {

                element.mozRequestFullScreen();

            } else if (element.msRequestFullscreen) {

                element.msRequestFullscreen();

            } else if (element.webkitRequestFullscreen) {

                element.webkitRequestFullScreen();

            }

        }

    </script>

</body>

</html>

上一篇下一篇

猜你喜欢

热点阅读