遇到一些政府/国企开发时经常遇到兼容IE的问题，给大家介绍一种我刚研究出的一种解决方案
1.代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="./../jquery/jquery-1.11.3.min.js"></script>
<title>fullScreen</title>
<style>
body {
margin: 0;
}
</style>
<script type="text/javascript">
$(document).keydown(function(event){
if(event.keyCode == 27){
//这里写你原始的iframe的大小
//例如
document.getElementById("fullScreen").style.height="500px";
document.getElementById("fullScreen").style.width="500px";
}
});
function showFullScreen(){
var elm = document.getElementById("fullScreen");
launchFullscreen(elm );
}
// 全屏，退出按esc或参考参考参考注释代码写退出全屏按钮
function launchFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();//火狐
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();//ie浏览器
document.getElementById("fullScreen").style.height=window.screen.height+"px";
document.getElementById("fullScreen").style.width=document.documentElement.clientWidth+"px";
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullScreen();//谷歌浏览器
}
}
</script>
</head>
<body>
<iframe id="fullScreen" allowfullscreen src="www.baidu.com"
frameborder="0" style="width: 500px;height: 500px;background:#aaa">
</iframe>
<button οnclick="showFullScreen();">全屏</button>
</body>解决思路：
1.全屏
通过判断出各个浏览器内核的不同分别给出不同的解决方案
2.退出全屏时
通过监控ESC健，动态设置iframe的大小（主要是为了兼容IE，谷歌等成熟浏览器会自动处理）
ps
1.在子页面也要写监控ESC事件
2.要在子页面设置 resize事件，常识了对吧（为了防止极端事件）
