Html5 Api 实现浏览器全屏

一、全屏方法和事件

1、全屏显示

function fullScreen(toFullScreenElement)
{
var docElm =toFullScreenElement ;

//W3C
            if (docElm.requestFullscreen) { //不能用document.requestFullscreen判断
                docElm.requestFullscreen();
                document.addEventListener("fullscreenchange", removeFullScreenEle, false);//监听全屏改变事件
            }
           //FireFox
            else if (docElm.mozRequestFullScreen) {
                docElm.mozRequestFullScreen();
                document.addEventListener("mozfullscreenchange", removeFullScreenEle, false);//监听事件方法不能加参数，如果按esc退出的话则无法传递参数
            }
           //Chrome等
            else if (docElm.webkitRequestFullScreen) {
                docElm.webkitRequestFullScreen();
                document.addEventListener("webkitfullscreenchange",removeFullScreenEle, false);
            }
            //IE11
            else if (docElm.msRequestFullscreen) {
                docElm.msRequestFullscreen();
                document.addEventListener("MSFullscreenChange", removeFullScreenEle, false); //注意IE全屏状态改变事件名不能用小写mfsfullscreenchange,否则无法监听到,其他浏览器可以用小写

};

}
        2、退出全屏
        function exitFullScreen()
        {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            }
            else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            }
            else if (document.webkitCancelFullScreen) {
                document.webkitCancelFullScreen();
            }
            else if (document.msExitFullscreen) {
                document.msExitFullscreen();

};

}

3、全屏改变事件
function removeFullScreenEle() {

if (fullEle.requestFullscreen) {
if(document.fullscreen)

{

//全屏后操作

}

else

{

//退出全屏后操作

}

}
        //FireFox
        else if (fullEle.mozRequestFullScreen) {
            if(document.mozFullScreen)

{

//全屏后操作

}

else

{

//退出全屏后操作

}

}
//Chrome等
else if (fullEle.webkitRequestFullScreen) {

if(document.webkitIsFullScreen)

{

//全屏后操作

}

else

{

//退出全屏后操作

}

}
        //IE11
        else if (fullEle.msRequestFullscreen) {
            if(document.msFullscreenElement)

{

//全屏后操作

}

else

{

//退出全屏后操作

}

4、设置全屏样式

1、统一设置

html:-moz-full-screen {

background: red;

}

html:-webkit-full-screen {

background: red;

}

html:fullscreen {

background: red;

}

html:-ms-fullscreen{
background:red !important;//如果有单独对全屏元素设置样式，则必须用!important标志，应该是在IE下系统默认全屏样式优先级低于自定义css样式
}

2、单独设置

#element:-moz-full-screen{}

#element:-webkit-full-screen{}

#element:fulscreen{}

#element:-ms-fullscreen{}

二、使用

1、整个浏览器全屏

fullScreen(document.documentElement);

2、某个元素全屏

fullScreen(document.getElementById('div1'));

3、退出全屏

exitFullScreen();

注意：IE下全屏改变事件不能用小写的mfsfullscreenchange，而要用大写的MSFullscreenChange

Html5 Api 实现浏览器全屏相关推荐

html5实现浏览器自动全屏,[JavaScript] 用html5 js实现浏览器全屏
项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有g ...
用html5 js实现浏览器全屏
项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有goo ...
Html5结合JS实现浏览器全屏功能
项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有goo ...
js实现浏览器全屏与退出全屏，解决chrome下F11进入全屏后退出全屏API方法失效
1. 问题说明网页全屏和退出全屏其实已经算的上一个很常见的功能了,那是不是直接用HTML5全屏API就没什么问题了,但是不要忘了键盘上的F11有着同样的功能,实际使用的时候就发现F11使网页进入全屏 ...
html5退出全屏触发的方法_在实战中学??typescript - 实现浏览器全屏(100行)
学习一门新的语言, 最快速的方法还是看实战代码! 初学ts的时候, 大家都会问"有什么实际项目可以参考吗?". 好了! 满足大家的需求, 我计划定期用ts做一些业务常用小插件, 代 ...
php让浏览器全屏,js实现各浏览器全屏代码
本篇文章给大家分享了js实现各浏览器全屏的详细代码,有兴趣的朋友可以参考学习下. 现代浏览器包括ie11,可以直接用h5的全屏api实现低版本的IE需要通过ActiveX插件实现: //直接上代码 ...
js 实现各浏览器全屏
现代浏览器包括ie11,可以直接用h5的全屏api实现低版本的IE需要通过ActiveX插件实现: //直接上代码 <!DOCTYPE html> <html><hea ...
vue中浏览器全屏和退出全屏
1.首先要判断浏览器类型 (是否IE),来控制是否展示功能,在计算属性中判断: computed: {showFullScreenBtn () {return window.navigator.use ...
【Vue实用功能】Vue实现浏览器全屏退出全屏
Vue实现浏览器全屏 vue代码 <v-btn class="ml-2" @click="fullScreen" v-show="!is_sma ...

Html5 Api 实现浏览器全屏

Html5 Api 实现浏览器全屏相关推荐

最新文章

热门文章