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 服务,现在想把另外一台机器上的数据库迁到同一台机器上。...

golang 缓存模版的方法

这是官方使用的方法,实例初始化时把所有模版渲染后缓存到 templates,后续使用ExecuteTemplate 方法来使用特定的模版...

在SAE Python上开启gzip的方法

开启 gzip 的作用自不必说,可以省很多流出带宽,可以省很多云豆。昨天这个博客的云豆消耗,其中流出带宽就占九成多,开启后就会只占五成多。...

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

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

删除确认 js confirm onclick

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

Leave a Comment