最近在工作中使用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>
 

//遠端連線全屏
    $("#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頁面載入完畢的時候，找到全屏按鈕(id=fullscreen)，給它繫結click事件，事件就是切換全屏；