全屏
来源:互联网 发布:php是什么货币单位 编辑:程序博客网 时间:2024/06/11 03:50
FullScreen API 演示
// 处理全屏(需要全屏显示DOM元素)
function launchFullScreen(element) {
// 先检测最标准的方法
if(element.requestFullScreen) {
element.requestFullScreen();
} else if(element.mozRequestFullScreen) {
// 其次,检测Mozilla的方法
element.mozRequestFullScreen();
} else if(element.webkitRequestFullScreen) {
// if 检测 webkit的API
element.webkitRequestFullScreen();
}
};
// 退出全屏,不用管具体是哪个元素,因为屏幕是唯一的。
function cancelFullscreen() {
if(document.cancelFullScreen) {
document.cancelFullScreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
};
// 显示全屏信息
function dumpFullscreen() {
var d = document;
var fullE = null;
var fullEnable = “fullScreen is disable!”;
if(d.fullScreenElement){
fullE = d.fullScreenElement;
} else if(d.mozFullScreenElement){
// 如果有问题,把mozFullscreenElement 改为 mozFullScreenElement,S大写
fullE = d.mozFullScreenElement;
} else if(d.webkitFullscreenElement){
// 本人的为chrome, Fullscreen 之中,s为小写。
fullE = d.webkitFullscreenElement;
}
// 如果有问题,请切换 fullScreen 中 s 的大小写。
if(d.fullScreenEnabled){
fullEnable = d.fullScreenEnabled;
} else if(d.mozFullScreenEnabled){
fullEnable = d.mozFullScreenEnabled;
} else if(d.webkitFullscreenEnabled){
// 注意 Fullscreen 的中间s大小写
fullEnable = d.webkitFullscreenEnabled;
}
//
if(window.console){
console.dir(fullE);
} else if(fullE){
alert(fullE.tagName);
} else {
alert(“全屏元素是:”+fullE);
}
//
if(window.console){
console.info(“允许全屏:”+fullEnable);
} else if(fullEnable){
alert(“允许全屏:”+fullEnable);
} else {
alert(“允许全屏:”+fullEnable);
}
};
// 设置事件监听,DOM内容加载完成,和jQuery的$.ready() 效果差不多。
window.addEventListener(“DOMContentLoaded”, function() {
// 获取DOM元素
var enterfull = document.getElementById(“enterfull”);
var quitfull = document.getElementById(“quitfull”);
var dumpfull = document.getElementById(“dumpfull”);
// 事件监听 enterfull.addEventListener("click", function() { // launchFullScreen(document.documentElement); }); quitfull.addEventListener("click", function() { // cancelFullscreen(); }); dumpfull.addEventListener("click", function() { // dumpFullscreen(); });}, false);// 全屏事件Eventsdocument.addEventListener("fullscreenchange", function(e) { console.dir(e);});document.addEventListener("mozfullscreenchange", function(e) { console.dir(e);});document.addEventListener("webkitfullscreenchange", function(e) { console.dir(e);});
<div> <button id="enterfull">进入全屏</button><br/> <button id="quitfull">退出全屏</button><br/> <button id="dumpfull"> 查看全屏的DOM元素</button><br/></div>
- 全屏
- 全屏
- 全屏
- 全屏
- 全屏
- 全屏
- 全屏
- 全屏
- 全屏
- 全屏
- 全屏
- 全屏
- 全屏
- 全屏和退出全屏
- 全屏/非全屏切换
- 全屏及退出全屏
- winforms全屏
- SDI全屏
- SparkSQL---Save(Java)
- 一网打尽所有常用的header头
- Java实现敏感词过滤
- 利用FileChannel完成文件的读、写、复制
- css强制换行和超出隐藏实现
- 全屏
- 2017 Multi-University Training Contest
- 谷歌开发者实验室 google developers codelabs
- 【编程练习】二叉树的反转,Java和Python实现
- 126个常用的正则表达式
- 认识新的二极管
- 初识nodejs15
- 设置TOMCAT启用GZIP压缩 包括导致没返回的问题
- Noip2012 Day1 T3 开车旅行无题解的70分代码(未完成)