iframe嵌套頁面全屏實現

1.設置allowfullscreen="true"屬性

  <iframe id="mapFrame" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" oallowfullscreen="true" msallowfullscreen="true" name="mapFrame" scrolling="no" frameborder="0" src="../map/baiduRDF.jsp"></iframe>

  <div id="buttonPanel">
      <input id="full_screen_open" type="button" value="打開全屏">
      <input id="full_screen_close" type="button" value="退出全屏">
  </div>

2.全屏事件實現

	//全屏按鈕上調用的方法
    $('#full_screen_open').click(function(){
        // console.log('打開全屏');
        var elm = $("#mapFrame")[0];
        launchFullscreen(elm );
    })

    // 全屏，退出按esc
    function launchFullscreen(element) {
        if (element.requestFullscreen) {
            element.requestFullscreen();
        } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
            element.msRequestFullscreen();//ie瀏覽器
        } else if (element.webkitRequestFullscreen) {
            element.webkitRequestFullScreen();//谷歌瀏覽器
        }
    }
     // 監聽全屏事件webkitfullscreenchange是谷歌內核的事件；MSFullscreenChange是ie內核的事件
    document.addEventListener('webkitfullscreenchange', function fullscreenChange() {
        if (document.fullscreenEnabled ||
            document.webkitIsFullScreen ||
            document.mozFullScreen ||
            document.msFullscreenElement) {
            console.log('enter fullscreen');

           //可以在這裏做一些全屏時的事
        } else {
            console.log('exit fullscreen');

            //可以在這裏做一些退出全屏時的事
        }
    }, false);

3. 退出全屏代碼

	function exitFullscreen() {            
		if (document.exitFullscreen) { 
		 document.exitFullscreen(); 
		} else if (
		  document.msExitFullscreen){ 
		 document.msExitFullscreen();
		} else if (document.mozCancelFullScreen) {
		  document.mozCancelFullScreen();
		} else if (document.webkitExitFullscreen) {
		  document.webkitExitFullscreen();
		} 
	}

注：

1.document下沒有requestFullscreen
2.requestFullscreen方法只能由用戶觸發，比如：在onload事件中不能觸發
3.頁面跳轉需先退出全屏
4.進入全屏的元素，將脫離其父元素，所以可能導致之前某些css的失效
解決方案：使用 :full-screen僞類 爲元素添加全屏時的樣式（使用時爲了兼容注意添加-webkit、-moz或-ms前綴）
5.一個元素A全屏後，其子元素要再全屏，需先讓元素A退出全屏