html5 窗口全屏

最新推荐文章于 2024-09-13 17:50:56 发布

lin49940

最新推荐文章于 2024-09-13 17:50:56 发布

阅读量1.4k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/lin49940/article/details/89050237

版权

JavaScript 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

这里先说明一下， 由于浏览器安全的考虑，通过JS 打开窗口，窗口最大化或全屏等操作是不被允许的，只有用户自己点击或输入才会允许触发这些操作。其实也不难理解为什么这样，你想想自己以前上一些网站，里面给你弹出很多广告窗口，你希望这样吗？

使用场景，某业务部门的人员，会在固定的一台电脑上做事情，这些事情在一个页面上进行，他们不会再切换其他页面了。就像ATM 或者其他终端机一样，打开一个浏览器，然后把这个浏览器全屏显示。

设计的初衷是用户点击业务链接，进入一个空白页面，该空白页面打开一个新窗口并且把这个新窗口全屏，全程JS 控制。

理想很丰满，现实很骨感。

改良的设计，用户点击业务链接，

1. 进入一个空白页面，尝试自动打开一个新窗口，并且提供一个打开新窗口的按钮给人员手动操作，该新窗口的高度和宽度设置为接近全屏。

2. 新窗口，尝试自动全屏，并且设置两个按钮，一个全屏按钮，一个退出全屏的按钮，提醒用户可以按F11，进入全屏或退出全屏。

思路就是能自动就自动，不能自动也要给用户一个手动操作的地方。

可能有人会说了，把浏览器的安全设置调低不就行了！你自己电脑可以随便设置，生产用的电脑，安全性把控很严。
可能有人会说按F11不是很简单吗？生产的人员流动大，人员水平参差不齐，你要把所有人当作小白来对待。

空白页面的js 代码

        function openWin() {
            win = window.open("链接" + '?timestamp' + new Date().getTime(), "newmaxwin",
                'width=' + (window.screen.availWidth + 8) + ',height=' + (window.screen.availHeight + 8) + ',top=0,left=0,resizable=0,status=0,menubar=0,location=0,scrollbars=yes');

            if (win && win.open && !win.closed) {
                win.toFullscreen();
                win.focus();
            };
        }

        openWin();

全屏页面（新窗口）的js 代码

function toFullscreen() {
            if (isFullScreen()) {
                return;
            }
            var docElement = document.documentElement;
            
            if (docElement.requestFullscreen) {//w3c, 原生html5的
                docElement.requestFullscreen();
            } else if (docElement.webkitRequestFullScreen) {   //chrome72+
                docElement.webkitRequestFullScreen();
            } else if (docElement.msRequestFullscreen) {     //ie11+
                docElement.msRequestFullscreen();
            } else if (docElement.mozRequestFullScreen) {    //firefox64+
                docElement.mozRequestFullScreen();
            } else {
                alert('浏览器不支持自动全屏操作，请升级IE11+，chrome72版本或FireFox64，' +
                    ' IE ,chrome 和FireFox 请按F11 进行手动全屏, ' +
                    ' 再次按F11 或ESC 退出全屏。');
                return;
            }
        }
        //判断是否全屏
        function isFullScreen() {
            return !!(
                document.fullscreen ||
                document.webkitIsFullScreen ||
                document.webkitFullScreen ||
                document.msFullScreen ||
                document.mozFullScreen
            );
        }
        //离开全屏
        function exitFullscreen() {
            if (!isFullScreen()) return;
            var docElement = document.documentElement;
            if (docElement.exitFullScreen) {
                docElement.exitFullScreen();
            } else if (document.mozCancelFullScreen) {
                docElement.mozCancelFullScreen();
            } else if (document.webkitExitFullscreen) {
                docElement.webkitExitFullscreen();
            } else if (document.msExitFullscreen) {
                docElement.msExitFullscreen();
            }
        }