jquery单独元素实现全屏显示

项目中用到实现部分元素全屏的功能，特此记录一下

html代码

<div id="iframeTest"></div>

按下F11，全屏显示

    $(document).bind("keydown", function (event) {
        if (event.which == 122) {
            $("#iframeTest").css("background-image", "url(../../Images/images/bg.png)");
            launchFullScreen(document.getElementById("iframeTest")); // 单独元素显示全屏
            return false;
        }
    });

打开全屏模式

//判断各种浏览器
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();
	}
else {
    wtx.info("当前浏览器不支持部分全屏！");
}
}

监听退出全屏事件

    window.onresize = function () {
        if (!isFullscreen()) {
            //要执行的动作
            $("#iframeTest").removeAttr("style", "");
        }
    }

判断是否退出全屏

function isFullscreen() {
    return document.fullscreenElement ||
        document.msFullscreenElement ||
        document.mozFullScreenElement ||
        document.webkitFullscreenElement || false;
}

今天突然发现在低版本的chrome中全屏失效，网上查了一下是因为页面在iframe中，在iframe标签中添加allowfullscreen属性就可以了 。

<iframe src="RoomStatus" frameborder="0" allowfullscreen></iframe>