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退出全屏