h5的api dom全屏展示
下面是完整的例子，暂不做分析
<!DOCTYPE html>
<html>
<head>
<title> FullScreen API 演示</title>
<meta name="Generator" content="EditPlus">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Author" content="renfufei@qq.com">
<meta name="Description" content="http://davidwalsh.name/more-html5-apis">
<script>
// 处理全屏(需要全屏显示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);
// 全屏事件Events
document.addEventListener("fullscreenchange", function(e) {
console.dir(e);
});
document.addEventListener("mozfullscreenchange", function(e) {
console.dir(e);
});
document.addEventListener("webkitfullscreenchange", function(e) {
console.dir(e);
});
</script>
</head> <body> <div>
<button id="enterfull">进入全屏</button><br/>
<button id="quitfull">退出全屏</button><br/>
<button id="dumpfull"> 查看全屏的DOM元素</button><br/>
</div>
</body>
</html>
h5的api dom全屏展示的更多相关文章
- JavaScript 全屏展示
浏览器都有页面全屏的功能 F11 ,那么如何用JavaScript控制页面全屏呢?MDN上提供的的API , 一个小demo验证一下! <!DOCTYPE html> <html l ...
- echarts图表自适应盒子的大小（盒子的大小是动态改变的），大到需要全屏展示
项目中用到了echarts,并且页面是自适应的,且页面中有一个[放大.缩小]功能,因此图表还需要根据盒子的大小来变化. 即:两个需求,如下: ① 图表根据窗口的大小自适应 ② 图表根据所在盒子的大小自 ...
- js控制页面的全屏展示和退出全屏显示
<!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/h ...
- 给echarts加个“全屏展示”
echarts的工具箱并没有提供放大/全屏的功能, 查找文档发现可自定义工具https://www.echartsjs.com/option.html#toolbox.feature show代码 t ...
- requestFullscreen实现全屏展示
requestFullscreen实现全屏展示. var fullContainer = document.getElementById('fullScreenContainer'); //先把元素展 ...
- HTML5在手机端实现视频全屏展示
最近做项目,遇到一个问题,在手机上要实现视频的全屏播放功能.测试了很久,终于找到解决办法. 第一种:将视频放大来控制. 视频在播放的时候,全屏是根据高度来的,如果设置视频 video 标签的宽度是 1 ...
- Fullscreen API：全屏操作
function launchFullscreen(element) { if(element.requestFullscreen) { element.requestFullscreen(); } ...
- 开机自动调用.bat文件且浏览器全屏展示
1,将 .bat文件放入到以下路径中 C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Startup 或 C:\Users\Administr ...
- vmware中Ubuntu不能全屏展示的问题
依次打开system settings---------------->Displays----------------->resoluiton调整分辨率,然后右下角点击apply,然后k ...
随机推荐
- 得到文件的MD5值
/// <summary> /// 得到文件的MD5值 /// </summary> /// <param name="Path">文件路径&l ...
- poj3090--欧拉函数
#include<iostream> using namespace std; //欧拉函数 int eular(int n){ ,i; ;i*i<=n;i++){ ){ n/=i; ...
- [MUD]MUDLIB详解/MUDOS运行流程/最小MUDLIB/mud文件结构
现在大部分中文MUD都是在东方故事(esII)基础上发展起来的,其目录结构基本一样, 也有个别MUD为了标新立异对个别目录换了个名字以示不同,但其实质没有什么变化. 这个做的最可恶的是xkx,把一个好 ...
- codeforces 659F . Polycarp and Hay 搜索
题目链接 遍历每个点, 如果这个点的值能被k整除并且k/a[i][j]后小于等于n*m, 那么就对这个点进行搜索. 将这个点加入队列, 将周围的所有大于等于这个点的值的点也加入队列. 不断重复, 直到 ...
- android process bar 几种style
process bar 圆形style记录 1. style="?android:attr/progressBarStyleSmall" //根据主题变颜色 2. holo 主题下 ...
- 这才是正确删除 office 的方式
https://support.office.com/zh-cn/article/%E9%80%9A%E8%BF%87%E5%9C%A8%E9%87%8D%E6%96%B0%E5%AE%89%E8%A ...
- 信号和槽有一个非常精炼的C++实现，作者是Sarah Thompson，该实现只有一个头文件sigslot.h，跨平台且线程安全
关于信号和槽有一个非常精炼的C++实现,作者是Sarah Thompson,该实现只有一个头文件sigslot.h,跨平台且线程安全. 源码在:http://sigslot.cvs.sourcefor ...
- VS中C++代码折叠
用VS编写C#时,可以用#region name和#endregion,将代码分段,这样可以将代码折叠起来,当类过大,方法过长时,这种方法可以提高阅读效率,是人看着更舒服. 对于C/C++语言,#re ...
- hdu--1800--字典树&&其他
题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=1800 根据题意可知:意思是有若干个飞行员,需要在扫帚上练习飞行,每个飞行员具有不同的等级,且等级高的飞 ...
- 视频日志之android的总结与思考
四月份开始学android,并着手做这个项目,腾讯面试实习忙了半个月没有再做最终铩羽而归.做到5月30日,做了一个交差版,停下了差不多一个月,这两天再捡起完善一点. 项目是做一个视频保存和分享的网站, ...