退出全屏直接使用document调用exitFullscreen方法即可。
document.fullscreenElement():获取当前全屏的元素。
注意:
1.document下没有requestFullscreen
2.requestFullscreen方法只能由用户触发,比如:在onload事件中不能触发
3.页面跳转需先退出全屏
4.进入全屏的元素,将脱离其父元素,所以可能导致某些css失效
解决方案:使用 :full-screen伪类 为元素添加全屏时的样式(使用时为了兼容注意添加-webkit、-moz或-ms前缀)
5.一个元素全屏后,其子元素要再全屏,需先让该元素退出全屏
那就用JS模拟按键F11实现吧!<html><head>
<title>JS模拟按键</title>
<script type="text/javascript">
function $(id){return document.getElementById(id)}
function loadListener(){
$("testBtn").onclick=function(){
var WshShell = new ActiveXObject('WScript.Shell')
WshShell.SendKeys('{F11}')
}
}
window.attachEvent("onload",loadListener)
</script>
<body>
我要实现这样一个效果:<br/>
当鼠标点击下面这个button时,就触发键盘按键事件,并且按下的键要为 F11,这样当前窗口就会全屏.<br/>
<input type="button" id="testBtn" value="点我全屏化">
</body>
</head>
</html>