js实现简单页面全屏
更新时间：2019年09月17日 15:36:49 作者：欢_欢
这篇文章主要为大家详细介绍了js实现简单页面全屏的功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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").ο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会被黑色填充.
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
今天小编就为大家分享一篇layer弹出层取消遮罩的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要为大家详细介绍了JS+HTML5实现图片在线预览功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
这篇文章主要介绍了微信小程序按钮去除边框线分享页面功能，文中通过一段简单的代码给大家介绍了微信小程序的button去边框的方法，感兴趣的朋友跟随脚本之家小编一起看看吧2018-08-08
JS获取并操作iframe中元素的方法，需要的朋友可以参考一下2013-03-03
这篇文章主要介绍了JavaScript库urlcat之URL构建器库，urlcat 是一个小型的JavaScript库，使构建URL非常方便并防止常见错误。下文来看对其详细介绍吧，需要的小伙伴可以参考一下2022-02-02
这篇文章主要为大家详细介绍了js点击出漫天的小星星，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
这篇文章主要介绍了Bootstarp在pycharm中的安装及简单的使用方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-04-04
这篇文章介绍了javascript间隔刷新的简单实例，有需要的朋友可以参考一下2013-11-11
如何用JS播放wav文件，理论上用js在网页里嵌入一个window播放器的插件,可以播放的。,不过通用性不是很好,IE下可以用，感兴趣的朋友可以参考下哈本文2013-04-04
本篇文章主要介绍了详解webpack4升级指南以及从webpack3.x迁移，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
最新评论