js实现简单页面全屏的方法_F11 - 专业站长和开发者的学习网站

全屏效果为传入div元素全屏：

代码块

<html>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<body>  
<div style="margin:0 auto;height:600px;width:700px;"> 
<button id="btn">js控制页面的全屏展示和退出全屏显示</button>  
<div id="content" style="margin:0 auto;height:500px;width:700px; background:#ccc;" > 
<h1>js控制页面的全屏展示和退出全屏显示</h1>  
</div> 
</div>  
</body> 
<style type="text/css">
#content:-webkit-full-screen {
  background-color:rgb(255, 255, 12);
}
</style>
<script language="JavaScript">   
document.getElementById("btn").οnclick=function(){   
  var elem = document.getElementById("content");  
  console.log(elem);  
  requestFullScreen(elem);   
};   
function requestFullScreen(element) {  
  var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;  
  if (requestMethod) {   
    requestMethod.call(element);  
  } else if (typeof window.ActiveXObject !== "undefined") {   
    var wscript = new ActiveXObject("WScript.Shell");  
    if (wscript !== null) {  
      wscript.SendKeys("{F11}");  
    }  
  }
}  
</script>  
</html>

屏幕显示差异

这里值得注意的是Gecko和WebKit实现之间的关键区别：Gecko 会为元素自动添加 CSS 使其伸展以便铺满屏幕： “width: 100%; height: 100%”。 WebKit 则不会这么做；它会让全屏的元素以原始尺寸居中到屏幕中央，其余部分变为黑色。要在WebKit中获得相同的全屏行为，您需要添加自己的“width：100％; height：100％;” CSS规则到元素自己

#myvideo:-webkit-full-screen {
  width: 100%;
  height: 100%;
}

注意

如果div不设置background style则使用webkitRequestFullScreen全屏时，div会被黑色填充.

MDN参考-[-/a>