美文网首页
按钮切换网页全屏展示

按钮切换网页全屏展示

作者: 凡客三千 | 来源:发表于2018-10-11 09:21 被阅读0次

    效果就是实现按下按钮时, 网页铺满整个电脑屏幕

    1  html 代码


    <input value="全屏" type='button' />


    2  js代码


    function toggleFullScreen() {

      if (!document.fullscreenElement && // alternative standard method

        !document.mozFullScreenElement && !document.webkitFullscreenElement) {// current working methods

        if (document.documentElement.requestFullscreen) {

          document.documentElement.requestFullscreen();

        } else if (document.documentElement.mozRequestFullScreen) {

          document.documentElement.mozRequestFullScreen();

        } else if (document.documentElement.webkitRequestFullscreen) {

          document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);

        }

      } else {

        if (document.cancelFullScreen) {

          document.cancelFullScreen();

        } else if (document.mozCancelFullScreen) {

          document.mozCancelFullScreen();

        } else if (document.webkitCancelFullScreen) {

          document.webkitCancelFullScreen();

        }

      }

    }

    document.getElementsByTagName('input')[0].addEventListener('click', toggleFullScreen);


    相关文章

      网友评论

          本文标题:按钮切换网页全屏展示

          本文链接:https://www.haomeiwen.com/subject/psvvaftx.html