html5 全屏_超级网页设计器
使用 Fullscreen api 处理页面全屏
HTML 页面的全屏显示
使用 Element.requestFullscreen() 可以使元素进入全屏，该方法是异步方法，返回一个 Promise 对象
整个页面全屏显示
比如我们需要让整个网页全屏显示，只需要用 html 元素调用 requestFullscreen 方法即可。
示例代码：
<html>
<body>
<div>
全屏显示案例
<button id="full-screen-btn">进入全屏</button>
</div>
</body>
<script>
const html = document.querySelector('html');
const fullScreenBtn = document.getElementById('full-screen-btn');
fullScreenBtn.onclick = () => {
html.requestFullscreen()
.then(() => {
console.log('进入全屏成功')；
})
.catch(() => {
console.log('进入全屏失败')；
})
}
</script>
<html>
参数
requestFullScreen 接收一个参数 options(可选), options 是一个对象, 但是只有一个字段 navigationUI, 用于控制是否在元素处于全屏模式时显示导航条.
可选值为 auto, hide, show, 默认值为 auto.
当元素不在文档内时, 调用requestFullScreen回失败
<html>
<body>
<div>
全屏显示案例
<button id="full-screen-btn">进入全屏</button>
</div>
</body>
<script>
const html = document.querySelector('html');
const fullScreenBtn = document.getElementById('full-screen-btn');
fullScreenBtn.onclick = () => {
html.requestFullscreen()
.then(() => {
console.log('进入全屏成功')；
})
.catch(() => {
console.log('进入全屏失败')；
})
}
// 不在文档内的内容全屏
const el = document.createElement('div');
el.requestFullscreen()
.then(() => {
console.log('全屏成功');
})
.catch(() => {
console.log('全屏失败');
});
</script>
<html>
部分内容进入全屏状态
是部分内容进入全屏和页面全屏是一样的, 只是调用 requestFullScreen 方法的 dom 节点改为相应元素即可.
示例代码：
<html>
<header>
<style>
div {
padding: 20px;
}
#section-full-container {
background-color: #409EFF;
color: #fff;
height: 200px;
}
</style>
</header>
<body>
<div>
全屏显示案例
<button id="full-screen-btn">进入全屏</button>
</div>
<div id="section-full-container">
部分全屏
<button id="section-full-screen-btn">进入全屏</button>
</div>
</body>
<script>
const html = document.querySelector('html');
const fullScreenBtn = document.getElementById('full-screen-btn');
fullScreenBtn.onclick = () => {
html.requestFullscreen()
.then(() => {
console.log('进入全屏成功');
})
.catch(() => {
console.log('进入全屏失败');
})
}
// 部分内容全屏
const sectionFullContainer = document.getElementById('section-full-container');
const sectionFullBtn = document.getElementById('section-full-screen-btn');
sectionFullBtn.onclick = () => {
sectionFullContainer.requestFullscreen()
.then(() => {
console.log('全屏成功');
})
.catch(() => {
console.log('全屏失败');
});
}
</script>
</html>
退出全屏
退出全屏只需要调用 document 对象的 exitFullscreen. 调用这个方法会让文档回退到上一个调用Element.requestFullscreen()方法进入全屏模式之前的状态.
例如, 上面示例中, 先使整个页面进入全屏, 再点击部分全屏的按钮使 section-full-container 进入全屏. 那么整个时候调用 document.exitFullScreen() 时, 会返回整个页面全屏的状态, 需要再次调用 document.exitFullScreen() 才能完全退出全屏状态
示例代码
<html>
<header>
<style>
div {
padding: 20px;
}
#section-full-container {
background-color: #409EFF;
color: #fff;
height: 200px;
}
</style>
</header>
<body>
<div>
全屏显示案例
<button id="full-screen-btn">进入全屏</button>
<button id="exit-full-screen-btn">退出全屏</button>
</div>
<div id="section-full-container">
部分全屏
<button id="section-full-screen-btn">进入全屏</button>
<button id="section-exit-full-screen-btn">退出全屏</button>
</div>
</body>
<script>
const html = document.querySelector('html');
const fullScreenBtn = document.getElementById('full-screen-btn');
fullScreenBtn.onclick = () => {
html.requestFullscreen()
.then(() => {
console.log('进入全屏成功');
})
.catch(() => {
console.log('进入全屏失败');
})
}
const sectionFullContainer = document.getElementById('section-full-container');
const sectionFullBtn = document.getElementById('section-full-screen-btn');
sectionFullBtn.onclick = () => {
sectionFullContainer.requestFullscreen()
.then(() => {
console.log('全屏成功');
})
.catch(() => {
console.log('全屏失败');
});
}
// 退出全屏
const exitFullScreenBtn = document.getElementById('exit-full-screen-btn');
const sectionExitFullScreenBtn = document.getElementById('section-exit-full-screen-btn');
exitFullScreenBtn.onclick = () => {
exitFullScreen();
}
sectionExitFullScreenBtn.onclick = () => {
exitFullScreen();
}
</script>
</html>
注意该方法是 document 对象的而不是对应元素的
事件与属性
当全屏状态改变时, 对应元素会触发 fullscreenchange 事件, 该事件会冒泡, 实际使用可以统一监听 document 对象的 fullscreenchange 事件.
document.fullScreenElement 属性可以访问当前正在全屏的元素节点. 没有页面全屏是返回 null.
示例代码
<html>
<header>
<style>
div {
padding: 20px;
}
#section-full-container {
background-color: #409EFF;
color: #fff;
height: 200px;
}
</style>
</header>
<body>
<div>
全屏显示案例
<button id="full-screen-btn">进入全屏</button>
<button id="exit-full-screen-btn">退出全屏</button>
</div>
<div id="section-full-container">
部分全屏
<button id="section-full-screen-btn">进入全屏</button>
<button id="section-exit-full-screen-btn">退出全屏</button>
</div>
</body>
<script>
const html = document.querySelector('html');
const fullScreenBtn = document.getElementById('full-screen-btn');
fullScreenBtn.onclick = () => {
html.requestFullscreen()
.then(() => {
console.log('进入全屏成功');
})
.catch(() => {
console.log('进入全屏失败');
})
}
const sectionFullContainer = document.getElementById('section-full-container');
const sectionFullBtn = document.getElementById('section-full-screen-btn');
sectionFullBtn.onclick = () => {
sectionFullContainer.requestFullscreen()
.then(() => {
console.log('全屏成功');
})
.catch(() => {
console.log('全屏失败');
});
}
const exitFullScreenBtn = document.getElementById('exit-full-screen-btn');
const sectionExitFullScreenBtn = document.getElementById('section-exit-full-screen-btn');
exitFullScreenBtn.onclick = () => {
exitFullScreen();
}
sectionExitFullScreenBtn.onclick = () => {
exitFullScreen();
}
// 监听事件
document.onfullscreenchange = () => {
console.log('全屏状态变更');
// 访问当前全屏的节点
console.log('当前全屏节点为: ', document.fullscreenElement);
}
</script>
</html>
元素的全屏样式
使用伪类 :fullscreen, 可以给元素设置全屏时的属性, 当页面没有进入全屏是不生效, 全屏后才生效.
是当前元素属于全屏元素的时候才生效, 既当前元素为 document.fullScreenElement.
如果是父级或父级以上元素全屏, 该元素的 :fullscreen 样式并不会生效
注意: 该方法属于实验性方法, 有兼容性问题, 不建议实际项目中使用
示例代码
<html>
<head>
<style>
#container {
background-color: #409EFF;
color: #fff;
height: 200;
}
/* 进入全屏是使元素变为绿色 */
#container:fullscreen {
background-color: #67C23A;
}
</style>
</head>
<body>
<div id="container">
fullscreen 伪类案例
<button id="full-screen-btn">进入全屏</button>
</div>
</body>
<script>
const container = document.getElementById('container');
const fullScreenBtn = document.getElementById('full-screen-btn');
fullScreenBtn.onclick = () => {
container.requestFullscreen();
}
</script>
<html>
解决兼容性问题
兼容性问题可以参考 MDN 相关说明, 实际使用中可以使用 fullscreen 包进行全屏显示处理.
THE END
