浏览器全屏模式的启动函数requestFullscreen(),而且需要附带各浏览器的js方言前缀.
Js代码:
// 启动全屏!判断浏览器的种类
function launchFullscreen(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
调用全屏方法:
Html代码:
<img src="/SouthernAirlines/Content/Images/icons /7777.png" id="fullscreen" onclick="launchFullscreen(document.documentElement)"></img><p>全屏模式</p>
<img src="/SouthernAirlines/Content/Image/icons/7777.png" id="fullscreens" onclick="launchFullscreen(document.getElementById('navbar'))"></img><p>指定元素全屏</p>
调用全屏的两种方法:
launchFullScreen(document.documentElement); 【整个网页全屏】
launchFullScreen(document.getElementById("navbar ")); 【指定的元素全屏】
对你想要全屏显示的页面元素调用全屏方法,浏览器窗口就会变成全屏,但会先请求用户允许全屏模式。要注意,用户很有可能会拒绝全屏模式。如果用户运行全屏模式,则浏览器的工具条等按钮菜单都会隐藏,你的页面会覆盖整个屏幕。
下面的exitFullscreen()方法(也需要加浏览器前缀)会让浏览器退出全屏模式,变成正常模式。
// 判断浏览器种类 退出全屏
function exitFullscreen() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
Html代码:
<img src="/SouthernAirlines/Content/Images/icons/2222.png" id="fullscreen" onclick="exitFullscreen()"></img><p>退出全屏</p>
调用exitFullscreen()方法退出全屏;
注意事项:
document.fullScreenElement: 全屏显示的网页元素。
document.fullScreenEnabled: 判断当前是否处于全屏状态。
fullscreenchange事件会在启动全屏或退出全屏时触发: