js实现浏览器全屏方法

浏览器全屏在某些环境下体验很好,特别是小屏幕手机,地址栏占用的空间很多。

js实现浏览器全屏方法

js 全屏函数

1
2
3
4
5
6
7
8
9
10
11
function launchFullscreen(element) {
    if(element.requestFullscreen) {
        element.requestFullscreen();
    } else if(element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } else if(element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
    } else if(element.msRequestFullscreen) {
        element.msRequestFullscreen();
    }
}

某个元素全屏调用函数:

1
launchFullscreen(document.getElementById("goFS"));

全页面全屏:

1
launchFullscreen(document.documentElement);

考虑到浏览器兼容,整页面全屏可以用下面的函数:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function toggleFullScreen() {
  var doc = window.document;
  var docEl = doc.documentElement;

  var requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen || docEl.msRequestFullscreen;
  var cancelFullScreen = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen || doc.msExitFullscreen;

  if(!doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement && !doc.msFullscreenElement) {
    requestFullScreen.call(docEl);
  }
  else {
    cancelFullScreen.call(doc);
  }
}

应注意的是,FullScreen 函数只能由用户动作触发,不能自动调用。否则会出现下面错误提示:

1
Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.

参考

本文网址: https://pylist.com/topic/183.html 转摘请注明来源

Suggested Topics

ssdb 全文搜索的实现

ssdb 作为key-value 数据库,底层没有提供全文搜索的功能,只能在应用层作检索。...

用 misaka 实现 gfm Markdown 格式

misaka 是python 世界性能最好的 markdown 解析库,gfm (GitHub Flavored Markdown)是 github 扩展的格式。可以通过下面的方式用 misaka 实现 gfm 解析...

删除确认 js confirm onclick

删除确认经常使用在删除按钮或链接上,可以防止误操作,特别是对没有恢复数据的程序。...

android webview 加载URL js不执行的解决方法

作为一个懒者,想做一个简单的apk,把做好的一个简单SPA 页面嵌入webview,是个不错的主意。在使用过程中发现页面的有些js 不执行,下面介绍个人遇到这问题的解决方法及相关知识的记录。...

Leave a Comment