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

原生 js 实现选择图片后本地预览

在web 编程里有时候会需要这样的功能,在 file 控件里选择图片后需要实时预览,而不用上传到服务器。可以用 `URL.createObjectURL()` 函数实现。...

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

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

删除确认 js confirm onclick

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

ssdb 全文搜索的实现

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

ssdb 数据库合并的方法

应用场景:原来有两台机器上面都跑ssdb 服务,现在想把另外一台机器上的数据库迁到同一台机器上。...

Leave a Comment