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);
- 退出全屏代码
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退出全屏