Html5结合JS实现浏览器全屏功能

项目中需要将后台浏览器的窗口全屏，也就是我们点击一个按钮要实现按F11全屏的效果。在HTML5中,W3C制定了关于全屏的API，就可以实现全屏幕的效果，也可以让页面中的图片，视频等全屏目前只有google chrome 15 , safri5.1 ,firfox10 ,IE11支持

全屏

var

docElm = document.documentElement;

//W3C

if

(docElm.requestFullscreen) {

docElm.requestFullscreen();

//FireFox

else

if

(docElm.mozRequestFullScreen) {

docElm.mozRequestFullScreen();

//Chrome等

else

if

(docElm.webkitRequestFullScreen) {

docElm.webkitRequestFullScreen();

//IE11

else

if

(elem.msRequestFullscreen) {

elem.msRequestFullscreen();

退出全屏

if

(document.exitFullscreen) {

document.exitFullscreen();

else

if

(document.mozCancelFullScreen) {

document.mozCancelFullScreen();

else

if

(document.webkitCancelFullScreen) {

document.webkitCancelFullScreen();

else

if

(document.msExitFullscreen) {

document.msExitFullscreen();

事件监听

document.addEventListener(

"fullscreenchange"

function

() {

fullscreenState.innerHTML = (document.fullscreen)?

""

"not "

;},

false

);

document.addEventListener(

"mozfullscreenchange"

function

() {

fullscreenState.innerHTML = (document.mozFullScreen)?

""

"not "

;},

false

);

document.addEventListener(

"webkitfullscreenchange"

function

() {

fullscreenState.innerHTML = (document.webkitIsFullScreen)?

""

"not "

;},

false

);

document.addEventListener(

"msfullscreenchange"

function

() {

fullscreenState.innerHTML = (document.msFullscreenElement)?

""

"not "

;},

false

);

全屏样式设置
在浏览器全屏的使用我们还可以进行样式设置

html:-moz-full-

screen

background

red

html:-webkit-full-

screen

background

red

html:fullscreen {

background

red

Html5结合JS实现浏览器全屏功能相关推荐

JS全屏代码，解决PDF.js在iframe中部分浏览器全屏功能错误
JS全屏代码,解决PDF.js在iframe中部分浏览器全屏功能错误 PDF.js在iframe模式在火狐浏览器中按钮被屏蔽经分析,viewer.js 发现了判断逻辑 debug发现第二个判断后为 ...
html5实现浏览器自动全屏,[JavaScript] 用html5 js实现浏览器全屏
项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有g ...
用html5 js实现浏览器全屏
项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有goo ...
js实现浏览器全屏与退出全屏，解决chrome下F11进入全屏后退出全屏API方法失效
1. 问题说明网页全屏和退出全屏其实已经算的上一个很常见的功能了,那是不是直接用HTML5全屏API就没什么问题了,但是不要忘了键盘上的F11有着同样的功能,实际使用的时候就发现F11使网页进入全屏 ...
浏览器全屏功能 icon图标设置
如图,通过点击全屏图标实现页面全屏/取消全屏功能,类似浏览器f11. 一.icon图标选择: 这里偷懒使用的阿里巴巴矢量图标库,当然也可以自己找ui设计一个,地址:icon图标库,icon相关代码如下 ...
js 进入浏览器全屏（F11效果）、退出全屏、指定元素全屏、判断当前是否全屏、监听浏览器全屏事件、定义全屏时的css样式（全屏伪类）
各部分功能代码详见注释: <template><div><button v-if="!ifFullScreen" @click="fullS ...
设置浏览器横屏可行性测试，附带浏览器全屏功能
输入法问题: 1.QQ浏览器.UC浏览器可通过标签设置横屏(这种模式下输入法也是横屏状态) <meta name='full-screen' content='true' /><me ...
js requestFullscreen实现全屏功能浏览器兼容问题解决
设置全屏谷歌:webkitRequestFullscreen() 火狐:mozRequestFullScreen() IE :msRequestFullscreen() var box=doc ...
js实现浏览器全屏 F11全屏
浏览器全屏模式的启动函数requestFullscreen仍然需要附带各浏览器的js方言前缀,相信下面这段代码需要你花大量的搜索才能凑齐: 代码如下: // 判断各种浏览器,找到正确的方法 funct ...

Html5结合JS实现浏览器全屏功能

Html5结合JS实现浏览器全屏功能相关推荐

最新文章

热门文章