浏览器全屏模式的启动函数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对象调用,而不是启动全屏时传入的对象。
全屏属性和事件
不幸的是,全屏属性和事件的相关方法也需要添加浏览器前缀,但我相信很快就不需要这样做了。
1.document.fullScreenElement: 全屏显示的网页元素。
2.document.fullScreenEnabled: 判断当前是否处于全屏状态。
fullscreenchange事件会在启动全屏或退出全屏时触发:
var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled;
你仍然可以使用上面判断浏览器种类的方法给这个事件加上前缀。
全屏样式CSS
各种浏览器都提供了一个非常有用的全屏模式时的css样式规则:
/* 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,需要的时候可以顺手拈来。
相关推荐
通过4种方法、模拟进入页面后自动将页面全屏展示、模拟浏览器的F11效果、很不错
浏览网页,时常会发现自己的浏览器窗口不见了,但网页内容还在。这种效果是不是很神奇呢?看看实现方法!
点击一个按钮要实现按F11全屏的效果。 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果
javascript 模拟打开全屏,兼容IE8,IE11 有坑已掠过.
JS代码 function fullScreen(el) { var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen, wscript; if(typeof rfs != "undefined" &
主要为大家详细介绍了js模拟实现F11使页面全屏显示,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Js浏览器全屏代码(模仿按F11),需要的朋友可以参考下。
浏览器标签、HTML页面能播放视频、下载记录、JS交互(能调用原生相机、调用VLC集成能力:流视频播放)、软件更新、自定义右键菜单、F11全屏模式、F12调试模式、F5刷新、ALT+F5强制刷新、系统配置等功能、网络请求...
主要介绍了JavaScript全屏和退出全屏事件,先通过window.ieIsfSceen = false或true进行判断是否为全屏,在进行进入全屏和退出全屏的操作,需要的朋友可以参考下
您可能在需通过IE,F11最大化来实现您的网页全屏化,您可以采用JS或者手动f11,或者其它方法,那么您可以试一下本程序的效果。 使用这个程序的好处是: 1.JS难以实现的全屏效果…… 2.隐藏地址栏,为您的网站...
ie浏览器全屏代码测试,通过对ie浏览器的设置,实现打开网页,自动全屏功能。该代码模拟 发送F11按键,判断当前页面是否为全屏,否则发送F11将浏览器设为全屏。
使用热键切换全屏(voxel.js 插件) 使用fullscreen键绑定,默认 F11。 点击此键将通过进入或退出全屏模式()。 已知问题:离开全屏可能会释放指针锁定(点击重新获取)。 选项 element : 全屏的 HTML 元素,默认...
年会抽奖,一人一个号码,从一... 使用方法:浏览器打开,prizedraw.html,F11全屏效果更好。 更新优化,抽奖支持作废当前抽奖号码,显示已中奖号码。 初始资源包来自网上,个人作了修改。如有侵权,请联系本人删除。
kwin最大化到新桌面 KWin脚本可将全屏窗口移至新的虚拟桌面,模拟macOS,例如最大化到新桌面。 。 截屏 配置面板 特征 全屏/最大化时,将窗口移至新创建的虚拟桌面。... 在Firefox或Chrome浏览器中,按F11也会触发此
全屏容器会初始化容器默认高宽以及缩放比,当容器尺寸或者浏览器窗口大小发生改变的时候会自动计算缩放比,从而保证容器中的内容不会变形 公司业务中有大量的可视化大屏的需求,一般都是要求内容全屏展示,所以将这...
我们建议将浏览器切换到全屏模式(在大多数浏览器中:按F11键)以增加可用的建模空间。 调色板 显示您可以选择用来记录您的领域故事(演员和工作对象)的图标,一个将图标分组为逻辑单元的矩形形状,以及两个有用的...
年会抽奖,一人一个号码,从一系列号码中抽取中奖号码, 。适合公司年会聚会使用。...使用方法:浏览器打开,prizedraw.html,F11全屏效果更好。 初始资源包来自网上,个人作了修改。如有侵权,请联系本人删除。
- 项目需要全屏展示(按 F11)。 - 项目部分区域使用了全局注册方式,增加了打包体积,在实际运用中请使用 **按需引入**。 - 拉取项目之后,建议按照自己的功能区域重命名文件,现以简单的位置进行区分。 - 项目环境...