浏览器全屏模式的启动函数requestFullscreen
仍然需要附带各浏览器的js方言前缀,相信下面这段代码需要你花大量的搜索才能凑齐:
// 判断各种浏览器,找到正确的方法 function launchFullscreen(element) { if(element.requestFullscreen) { element.requestFullscreen(); } else if(element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if(element.webkitRequestFullscreen) { element.webkitRequestFullscreen(); } else if(element.msRequestFullscreen) { element.msRequestFullscreen(); } } // 启动全屏! launchFullScreen(document.documentElement); // 整个网页 launchFullScreen(document.getElementById("videoElement")); // 某个页面元素
对你想要全屏显示的页面元素调用全屏方法,浏览器窗口就会变成全屏,但会先请求用户允许全屏模式。要注意,用户很有可能会拒绝全屏模式。如果用户运行全屏模式,则浏览器的工具条等按钮菜单都会隐藏,你的页面会覆盖整个屏幕。
退出全屏模式
这个exitFullscreen
方法(也需要加浏览器前缀)会让浏览器退出全屏模式,变成正常模式。
// 判断浏览器种类 function exitFullscreen() { if(document.exitFullscreen) { document.exitFullscreen(); } else if(document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if(document.webkitExitFullscreen) { document.webkitExitFullscreen(); } } // 退出全屏模式! exitFullscreen();
需要注意的是,exitFullscreen
只能由document对象调用,而不是启动全屏时传入的对象。
全屏属性和事件
不幸的是,全屏属性和事件的相关方法也需要添加浏览器前缀,但我相信很快就不需要这样做了。
-
document.fullScreenElement
: 全屏显示的网页元素。 -
document.fullScreenEnabled
: 判断当前是否处于全屏状态。
fullscreenchange
事件会在启动全屏或退出全屏时触发:
var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement; var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled;
你仍然可以使用上面判断浏览器种类的方法给这个事件加上前缀。
全屏样式CSS
各种浏览器都提供了一个非常有用的全屏模式时的css样式规则:
:-webkit-full-screen { /* properties */ } :-moz-full-screen { /* properties */ } :-ms-fullscreen { /* properties */ } :full-screen { /*pre-spec */ /* properties */ } :fullscreen { /* spec */ /* properties */ } /* deeper elements */ :-webkit-full-screen video { width: 100%; height: 100%; } /* styling the backdrop*/ ::backdrop { /* properties */ } ::-ms-backdrop { /* properties */ }
有些情况下,WebKit样式会出现一些问题,你最好把这些样式保持简洁。
这些全屏API都超级的简单,而且超级的有用。我第一次是在MDN’s BananaBread demo中看到这个API的,那是一个枪击游戏,正好需要全屏化,它使用了事件监听来检测全屏状态。记住这些好用的API,需要的时候可以顺手拈来。
相关推荐
主要介绍了JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件的相关资料,需要的朋友可以参考下
浏览器全屏模式的启动函数requestFullscreen仍然需要附带各浏览器的js方言前缀,相信下面这段代码需要你花大量的搜索才能凑齐:
在越来越真实的web应用程序中,JavaScript也变得越来越给力. FullScreen API 是一个新...启动全屏模式 全屏API requestFullscreen方法在一些老的浏览器里面依然使用带前缀形式的方法名,因此可能需要进行检测判断:(带前缀
在关键字域中输入空格,然后选中“只对最近载入的文件”选项使用Ctrl A Ctrl N可以立即选中和取消选中 项目属性|文件过滤中的全部扩展名F11可以切换内置浏览器的全屏模式要保存内置浏览器中的Web页,请按 Ctrl ...
Imagine 中文版是一款免费图像浏览器应用程序,可让您查看各种格式的图片和动画,包括 JPG,BMP,PNG 和 GIF。该程序的界面带有简单的元素。借助基于资源管理器的布局,可以轻松浏览它。因此,您可以查看文件属性和 ...
余烬全屏 打包为。 ember-fullscreen使用进行所有全屏API调用。... 全屏服务具有以下属性和方法: .isAvailable一个布尔值,表示是否允许您进入全屏模式。 .isEnabled一个布尔值,表示您是否处于全屏模式。 .
点击此键将通过进入或退出全屏模式()。 已知问题:离开全屏可能会释放指针锁定(点击重新获取)。 选项 element : 全屏的 HTML 元素,默认为document.body requestFlags : 传递给requestFullscreen标志,默认为...
2.选择浏览器的“工具”-“安全”-“本地Intranet”-“自定义级别”-“活动脚本”中选用“禁用”单选框 3.在浏览器中输入下述地址:http://localhost/1.2.htm • 1.1.htm 多段代码相互调用 • 1.2....
• 7.11.htm toExponential()方法和toFixed()方法 • 7.13.htm toPrecision()方法使用示例 • 7.14.htm toString()方法使用示例 第8章(\第8章) • 8.1.htm 创建正则表达式 • ...
在全屏模式下播放视频 流式传输视频文件 了解提示点 编写元数据和提示点的回调方法 使用提示点和元数据 监控NetStream活动 视频文件的高级主题 视频示例:视频自动唱片点唱机 使用StageVideo类来实现硬件加速呈现 第...
包括的功能-URL状态-添加新标签-标签标题-全屏-转发功能-返回功能-加载页面-状态进度栏-另存为-复制和粘贴-历史记录-书签-Google,Bing和Normal ULR(如何浏览)选项)-自动更新URL状态-全屏模式-查看页面源-...
KindEditor是在国内比较受欢迎的HTML在线编辑器,本次更新新增单元格编辑功能,各种按钮(确定、取消、上传等按钮)在不同浏览器上保持相同外观。 ver 4.1.7 (2013-04-21) Bugfix: 取消全屏后没有恢复到原来大小...
10、支持画面旋转,镜像等、支持画面保持比例和全屏缩放、支持播放结束动作可选择、循环播放-返回待机-第一帧-最后一帧等模式。 12、支持横幅遮罩,滚动欢迎文字,设置,字体大小、颜色等属性。同时支持遮罩,可选择...
全新的 Greenhorn Webrowser V.2 有重大更新,旧版本的故障也已为您修复。 Greenhorn Webbrowser 是一个基于开源的浏览器,专为开发人员/编码人员...URL 状态 - 全屏模式 - 查看页面来源 - Internet 选项 - 打印 - 属性
* BUG: 修改了在IE上代码模式下全屏本地URL自动变成绝对URL的问题。 * BUG: 修改了在代码模式下KE.util.setFullHtml函数不显示HTML内容的问题。 * 改善: 弹出框未指定任何按钮(yesButton, noButton, previewButton)...
方法1:利用class属性来初始化和传递各种初始化参数,例: class="xheditor {skin:'default'}" 方法2:利用xhEditor提供的jQuery插件接口来实现对特定textarea的初始化和传递参数,例: $('#elm1').xheditor(); ...
您可以管理代码行,例如移动光标,更改大小写或复制行,同时在多个文件中查找和替换文本,或切换到全屏模式以消除干扰并专注于工作。 额外工具可帮助您更快地编写代码 就额外的工具而言,可以使用代码验证器检查...
469 11.4.2 利用媒体特征查询技术设置ios5系统的应用程序图标及启动画面 470 11.4.3 以不带浏览器饰件的全屏模式运行应用程序 471 11.4.4 应用程序的状态栏 471 11.5 虚拟键盘 472 11.6 总结 485