js怎么让浏览器自动全屏显示

在HTML5中,W3C制定了关于全屏的API但是只能由用户事件触发，所以不能自动全屏；用户事件触发方法如下：

// 判断各种浏览器，找到正确的方法 进入全屏
function launchFullscreen (element) {if (element.requestFullscreencreen) {element.requestFullScreen()} else if (element.mozRequestFullScreen) {element.mozRequestFullScreen()} else if (element.webkitRequestFullScreen) {element.webkitRequestFullScreen()} else if (element.msRequestFullScreen) {element.msRequestFullScreen()}
}

必须用户事件触发（可以是鼠标事件，键盘事件等）

//某个元素全屏

launchFullscreen(dom)

// 整个网页全屏!launchFullscreen(document.documentElement)

// 判断浏览器种类 退出全屏
function exitFullscreen () {if (document.exitFullscreen) {document.exitFullscreen()} else if (document.mozCancelFullScreen) {document.mozCancelFullScreen()} else if (document.webkitExitFullscreen) {document.webkitExitFullscreen()}
}
// 退出全屏模式!
exitFullscreen()

全屏样式CSS
各种浏览器都提供了一个非常有用的全屏模式时的css样式规则：

-webkit-full-screen {

color:#000;

/* properties */

}

:-moz-full-screen {

/* properties */

}

:-ms-fullscreen {

/* properties */

}

:full-screen { /*pre-spec */

/* properties */

}

:fullscreen { /* spec */

/* properties */

}

/* deeper elements */

:-webkit-full-screen video {

width: %;

height: %;

}

/* styling the backdrop*/

::backdrop {

/* properties */

}

::-ms-backdrop {

/* properties */

}

另外某些浏览器可以通过meta直接设置全屏

<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- IOS启用 WebApp 全屏模式 -->
<meta name="apple-mobile-web-app-capable" content="yes" />

js怎么让浏览器自动全屏显示相关推荐

MATLAB app designer 自动全屏显示
MATLAB app designer 自动全屏显示两步完成: 单击UIfigure 更改position([0,0,1920,1080],其中(0,0)表示窗口左上角的起始位置在屏幕的左上角,(1 ...
html5实现浏览器自动全屏,[JavaScript] 用html5 js实现浏览器全屏
项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有g ...
firefox应用自动全屏显示_【b】—自动化测试：基础selenium—API
一.浏览器对象 # 导入webdriverfrom selenium import webdriver# 创建一个浏览器对象driver = webdriver.Firefox()# 设置全屏# dr ...
android浏览器自动全屏,android-完整的网页和所有移动浏览器的禁用的缩放视口元标记...
不幸的是,每个浏览器都有自己的视口元标记实现. 不同的组合将在不同的浏览器上工作. Android 2.2:似乎根本不支持视口元标记. Android 2.3.x / 3.x:通过设置user-sca ...
html中背景图片自动全屏显示,HTML设置body背景图片全屏显示
JMeter中返回Json数据的处理方法 Json 作为一种数据交换格式在网络开发,特别是 Ajax 与 Restful 架构中应用的越来越广泛.而 Apache 的 JMeter 也是较受欢迎的压力 ...
JavaScript 触发浏览器页面全屏，某div区域全屏
JavaScript Fullscreen API:全屏操作全屏API可以控制浏览器的全屏显示,让一个Element节点(以及子节点)占满用户的整个屏幕.目前各大浏览器的最新版本都支持这个API(包 ...
[html] 如何解决微信浏览器视频点击自动全屏的问题？
[html] 如何解决微信浏览器视频点击自动全屏的问题? 1.1 页面内播放 X5内核视频在用户点击后默认会进入全屏播放,前端可以设置video的x5-playsinline属性来将视频限定于网页内部 ...
html自动全屏js,js实现简单页面全屏
本文实例为大家分享了js实现简单页面全屏,供大家参考,具体内容如下全屏效果为传入div元素全屏: 代码块 js控制页面的全屏展示和退出全屏显示 js控制页面的全屏展示和退出全屏显示 #content ...
python打开浏览器全屏_Python+Selenium自动化——浏览器启动自动全屏配置
##直接上代码吧 from selenium import webdriver from selenium.webdriver.support.ui import WebDriverWait opti ...

js怎么让浏览器自动全屏显示

js怎么让浏览器自动全屏显示相关推荐

最新文章

热门文章