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 相关文章推荐
JQuery扩展插件Validate—4设置错误提示的样式
Sep 05 Javascript
jQuery 图片切换插件(代码比较少)
May 07 Javascript
详解Javascript继承的实现
Mar 25 Javascript
jQuery限制图片大小的方法
May 25 Javascript
JS实现数组按升序及降序排列的方法
Apr 26 Javascript
详解前后端分离之VueJS前端
May 24 Javascript
微信小程序多张图片上传功能
Jun 07 Javascript
微信小程序联网请求的轮播图
Jul 07 Javascript
微信小程序实现城市列表选择
Jun 05 Javascript
JS数组实现分类统计实例代码
Sep 30 Javascript
如何在微信小程序中实现Mixins方案
Jun 20 Javascript
jQuery实现简单评论区功能
Oct 26 jQuery
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 json格式和js json格式 js跨域调用实现代码
2012/09/08 PHP
PHP反射API示例分享
2016/10/08 PHP
PHP学习记录之数组函数
2018/06/01 PHP
window.location和document.location的区别分析
2008/12/23 Javascript
ExtJS PropertyGrid中使用Combobox选择值问题
2010/06/13 Javascript
javascript面向对象编程代码
2011/12/19 Javascript
js闭包所用的场合以及优缺点分析
2015/06/22 Javascript
jquery通过name属性取值的简单实现方法
2016/06/20 Javascript
BootStrop前端框架入门教程详解
2016/12/25 Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
2017/10/26 Javascript
vue 添加vux的代码讲解
2017/11/30 Javascript
JS实现横向轮播图(中级版)
2020/01/18 Javascript
v-slot和slot、slot-scope之间相互替换实例
2020/09/04 Javascript
如何在 ant 的table中实现图片的渲染操作
2020/10/28 Javascript
Python 正则表达式操作指南
2009/05/04 Python
python生成词云的实现方法(推荐)
2017/06/13 Python
python WindowsError的错误代码详解
2017/07/23 Python
python opencv实现任意角度的透视变换实例代码
2018/01/12 Python
python range实例用法分享
2020/02/06 Python
Python计算指定日期是今年的第几天(三种方法)
2020/03/26 Python
python实现mean-shift聚类算法
2020/06/10 Python
python 如何区分return和yield
2020/09/22 Python
CSS3 特效范例整理
2011/08/22 HTML / CSS
Html5监听手机摇一摇事件的实现
2019/11/07 HTML / CSS
Sunglasses Shop瑞典:欧洲领先的太阳镜网上商店
2018/04/22 全球购物
车库门开启器、遥控器和零件:Chamberlain
2019/04/09 全球购物
高中生学习生活的自我评价
2013/11/27 职场文书
初中考试作弊检讨书
2014/02/01 职场文书
公司董事长岗位职责
2014/06/08 职场文书
国际商贸专业自荐信
2014/06/09 职场文书
班主任高考寄语
2015/02/26 职场文书
写给女朋友的检讨书
2015/05/06 职场文书
先进基层党组织事迹材料2016
2016/02/29 职场文书
导游词之天津盘山
2019/11/01 职场文书
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
2021/05/18 Vue.js
MySQL之MyISAM存储引擎的非聚簇索引详解
2022/03/03 MySQL