js代码让iframe窗口全屏

最近在工作中使用novnc远程连接电脑，在ifrmae中嵌入novnc页面，点击全屏按钮，能够让iframe页面全屏。

我的思路是：

1）点击全屏按钮，让当前页面全屏；

2）将iframe重新fixed定位，高宽设置100%，left top为0，定位到铺满当前浏览器全屏；

3）将全屏按钮也一起定位到右上角；

html代码 ：

	<!-- 状态详情 -->
	<div class="rapair_status">
		<div class="repair_title status_title">
			远程详情
		</div>
		<div class="statis_machinetype">
            <span style="white-space:pre">	</span>    <div class="fullscreen" id="fullscreen">
                       <img src="__INS__/img/fullscreen.png" />
                    </div>
                    <iframe src="" class="ifr_diagnose" id="ifr_diagnose"></iframe>
		</div>
	</div>

js代码：

//远程连接全屏
    $("#fullscreen").click(function(){
        toggleFullscreen();
    });

    var toggleFullscreen = function(){
        if(document.fullscreenElement ||
           document.mozFullScreenElement ||
           document.webkitFullscreenElement ||
           document.msFullscreenElement){
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }
        }else{
            if (document.documentElement.requestFullscreen) {
                document.documentElement.requestFullscreen();
            } else if (document.documentElement.mozRequestFullScreen) {
                document.documentElement.mozRequestFullScreen();
            } else if (document.documentElement.webkitRequestFullscreen) {
                document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
            } else if (document.body.msRequestFullscreen) {
                document.body.msRequestFullscreen();
            }
        }

        //更新iframe定位
        update_iframe_pos();
    }

    //退出全屏时恢复全屏按钮、iframe的定位方式
    var update_iframe_pos = function(){
        if(document.fullscreenElement ||
            document.mozFullScreenElement ||
            document.webkitFullscreenElement ||
            document.msFullscreenElement){
            $("#ifr_diagnose").addClass("ifr_fixed");
            $("#fullscreen").addClass("full_fixed");
        }else{
            $("#ifr_diagnose").removeClass("ifr_fixed");
            $("#fullscreen").removeClass("full_fixed");
        }
    }

    //添加退出全屏时的监听事件
    window.addEventListener("fullscreenchange", function(e) {
      update_iframe_pos();
    });
    window.addEventListener("mozfullscreenchange", function(e) {
      update_iframe_pos();
    });
    window.addEventListener("webkitfullscreenchange", function(e) {
      update_iframe_pos();
    });
    window.addEventListener("msfullscreenchange", function(e) {
      update_iframe_pos();
    });

上面设置全屏、退出全屏代码很标准；

全屏时候、退出全屏时候给iframe（ifr_diagnose）、全屏按钮(fullscreen)重新定位；

效果：

有更好的使iframe全屏的例子或者思路欢迎提出来；会重新写个的。

后来想了下，上面的代码；点击全屏是在parent页面点击的，全屏按钮是定位在那里的，全屏后将全屏按钮也定位到相应的位置，但是全屏窗口拖动滚动条的时候，全屏按钮的位置就不对了；

改进了下：将全屏按钮放在iframe子页面上面；点击这个按钮，调用父页面的全屏方法；

代码：

    //远程连接全屏
    //当iframe加载完毕的时候执行,绑定全屏点击事件
    $("#ifr_diagnose").load(function(){
        //alert("加载完成！");
        var Obtn = $("iframe").contents().find("#fullscreen");
        $(Obtn).click(function(){
            toggleFullscreen();
        });
    });

其他代码一样，只是将全屏按钮移到iframe子页去了、不用去定位全屏按钮了；
上面这个代码是精髓；

当子iframe页面加载完毕的时候，找到全屏按钮(id=fullscreen)，给它绑定click事件，事件就是切换全屏；