直接回答：让某个元素全屏用 el.requestFullscreen()，它和按 F11 的区别是只把指定元素铺满屏幕而不是整个页面；退出用 document.exitFullscreen()，状态变化监听 fullscreenchange。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| function fullScreen(el) {
var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen,
wscript;
if(typeof rfs != "undefined" && rfs) {
rfs.call(el);
return;
}
if(typeof window.ActiveXObject != "undefined") {
wscript = new ActiveXObject("WScript.Shell");
if(wscript) {
wscript.SendKeys("{F11}");
}
}
}
function exitFullScreen(el) {
var el= document,
cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen,
wscript;
if (typeof cfs != "undefined" && cfs) {
cfs.call(el);
return;
}
if (typeof window.ActiveXObject != "undefined") {
wscript = new ActiveXObject("WScript.Shell");
if (wscript != null) {
wscript.SendKeys("{F11}");
}
}
}
|
html 代码
1
2
3
4
| <button id='btn'>全屏按钮</button>
<div id="content" style="background:yellow;width:500px;height:500px;">sljfsdlfj
<div id="quite" class="btn">退出全屏</div>
</div>
|
调用
1
2
3
4
5
6
7
8
9
| var btn = document.getElementById('btn');
var content = document.getElementById('content');
btn.onclick = function(){
fullScreen(content);
}
var quite = document.getElementById('quite');
quite.onclick = function(){
exitFullScreen();
}
|
不仅可以实现整个document 全屏预览 还能实现特定的div来进行全屏预览
这篇笔记整理自我自己的实践记录，如果做法有出入，或者你踩过别的坑，欢迎到留言板一起聊聊。
