基本属性HTML5规范允许用户自定义网页上任一元素全屏显示requestFullScreen(); //开启全屏显示cancleFullScreen(); //关闭全屏显示但是由于浏览器的实现与兼容
基本属性
HTML5规范允许用户自定义网页上任一元素全屏显示
requestFullScreen(); //开启全屏显示cancleFullScreen(); //关闭全屏显示但是由于浏览器的实现与兼容性的问题, 目前需要这样来使用它们
element.webkitRequestFullScreen()element.mozRequestFullScreen()上述代码会将 element 元素全屏, 即非element元素会被隐藏规范允许所有元素可以取消全屏，但实际测试结果 关闭全屏 只能添加到 document 元素上, 使用其他元素会报错
document.webkitCancelFullScreen() document.mozCancelFullScreen()全屏检查
可以通过下面代码检测当前是否处于全屏状态
document.fullScreen;不同浏览器仍然需要添加前缀
document.webkitIsFullScreen;document.mozFullScreen;全屏伪类
还有一个全屏伪类, 可以设置全屏状态下的样式
:full-screen :-webkit-full-screen:moz-full-screen 注
目前标准写法仍未被实现,使用标准方法会报错(至少在pc端是这样)
chrome下测试代码:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>全屏</title> <style> .box { width: 200px; height: 200px; background: blue; } :-webkit-full-screen .box { background-color: red; width: 300px; height: 300px; } .cl{ width: 100px; height: 100px; background-color: gold; } </style></head><body> <div class="box"></div> <div class="cl"></div> <input type="button" class='open' value="全屏"> <input type="button" class='cancle' value="关闭全屏"> <script> var open = document.querySelector('.open'); var cancle = document.querySelector('.cancle'); var box = document.querySelector('.box'); open.onclick = function () { document.documentElement.webkitRequestFullScreen(); // box.webkitRequestFullScreen(); alert(document.webkitIsFullScreen); } cancle.onclick = function () { alert(document.webkitIsFullScreen); document.webkitCancelFullScreen(); // document.documentElement.webkitCancelFullScreen(); } </script></body></html>个人博客
