按钮切换网页全屏展示

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

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);


©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容