您的位置：首页 > Web前端 > JavaScript

js实现简单页面全屏

2017-03-30 12:46 579 查看

js实现简单页面全屏

全屏效果为传入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").onclick=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参考
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript html5
相关文章推荐
新的分享
章节导航