js实现简单页面全屏


Posted in Javascript onSeptember 17, 2019

本文实例为大家分享了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会被黑色填充.

MDN参考

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
新浪中用来显示flash的函数
Apr 02 Javascript
JavaScript 设计模式学习 Factory
Jul 29 Javascript
jquery获取自定义属性(attr和prop)实例介绍
Apr 21 Javascript
jquery checkbox实现单选小例
Nov 27 Javascript
ie下$.getJSON出现问题的解决方法
Feb 12 Javascript
jquery实现对联广告的方法
Feb 05 Javascript
javascript实现列表滚动的方法
Jul 30 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
Nov 21 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
May 01 Javascript
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
Jan 08 Javascript
JS实现的RC4加密算法示例
Aug 16 Javascript
Nuxt.js nuxt-link与router-link的区别说明
Nov 06 Javascript
js模拟F11页面全屏显示
Sep 17 #Javascript
js全屏事件fullscreenchange 实现全屏、退出全屏操作
Sep 17 #Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
Sep 17 #Javascript
Cordova(ionic)项目实现双击返回键退出应用
Sep 17 #Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
Sep 17 #Javascript
ionic+html5+API实现双击返回键退出应用
Sep 17 #Javascript
Vue的属性、方法、生命周期实例代码详解
Sep 17 #Javascript
You might like
php反弹shell实现代码
2009/04/22 PHP
PHP开发工具ZendStudio下Xdebug工具使用说明详解
2013/11/11 PHP
PHP中数组的分组排序实例
2014/06/01 PHP
PHP url的pathinfo模式加载不同控制器的简单实现
2016/08/12 PHP
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
2013/01/23 Javascript
Jquery选中或取消radio示例
2013/09/29 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
2014/08/04 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
2014/08/30 Javascript
理解javascript中的回调函数(callback)
2014/09/02 Javascript
Jquery动态替换div内容及动态展示的方法
2015/01/23 Javascript
JS实现点击按钮后框架内载入不同网页的方法
2015/05/05 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
2016/03/05 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
2016/08/09 Javascript
javascript实现简单的ajax封装示例
2016/12/28 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
2017/01/05 Javascript
AngularJS实现路由实例
2017/02/12 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
2017/03/15 Javascript
vue实现全选和反选功能
2017/08/31 Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
2017/12/04 Javascript
vue2.0使用swiper组件实现轮播的示例代码
2018/03/03 Javascript
基于express中路由规则及获取请求参数的方法
2018/03/12 Javascript
深入剖析Node.js cluster模块
2018/05/23 Javascript
微信小程序实现卡片左右滑动效果的示例代码
2019/05/01 Javascript
详解Vue 换肤方案验证
2019/08/28 Javascript
python利用requests库进行接口测试的方法详解
2018/07/06 Python
python启动应用程序和终止应用程序的方法
2019/06/28 Python
python中matplotlib条件背景颜色的实现
2019/09/02 Python
Python更换pip源方法过程解析
2020/05/19 Python
Python调用C语言程序方法解析
2020/07/07 Python
如何用Anaconda搭建虚拟环境并创建Django项目
2020/08/02 Python
实习医生自我评价
2013/09/22 职场文书
资助贫困学生倡议书
2014/05/16 职场文书
经济管理专业求职信
2014/06/09 职场文书
党员群众路线自我剖析材料
2014/10/06 职场文书
2015年音乐教师个人工作总结
2015/05/20 职场文书
学校教师培训工作总结
2015/10/14 职场文书