Javascript全屏和退出全屏事件摘要(附加代码)
window.isflsgrn = false;是否低于 / / IE11进入全屏标志,真正的全屏幕状态,假如非全屏状态
window.ieisfsceen = false;无论 / / IE11进入全屏幕的国旗,真的是满屏的状态,假是非全屏状态
跨浏览器返回当前文档是否进入状态可以请求全屏模式
功能fullscreenenable(){
无功isfullscreen = document.fullscreenenabled | |
window.fullscreen | |
document.mozfullscreenenabled | |
document.webkitisfullscreen;
返回isfullscreen;
}
全屏
无功fscreen =函数(){()
无功docelm = document.documentelement;
如果(docelm。requestfullscreen){
DocElm.requestFullscreen();
}
如果(docelm。msrequestfullscreen){
DocElm.msRequestFullscreen();
ieisfsceen =真;
}
如果(docelm。mozrequestfullscreen){
DocElm.mozRequestFullScreen();
}
如果(docelm。webkitrequestfullscreen){
DocElm.webkitRequestFullScreen();
}其他API浏览器不支持全屏,不需要显示隐藏元素。
Window.parent.hideTopBottom();
isflsgrn =真;
$(# fsbutton)。文本(退出全屏);
}
}
退出全屏
无功cfscreen =函数(){()
如果(文件。exitfullscreen){
document.exitfullscreen();
}
如果(文件。msexitfullscreen){
document.msexitfullscreen();
}
如果(文件。mozcancelfullscreen){
document.mozcancelfullscreen();
}
如果(文件。webkitcancelfullscreen){
document.webkitcancelfullscreen();
{ }人
Window.parent.showTopBottom();
isflsgrn = false;
$(# fsbutton)。文本(全屏幕);
}
}
全屏按钮点击事件
$(# fsbutton)。Click(function(){)
无功isfscreen = fullscreenenable();
如果(!isfscreen isflsgrn = = false){
如果(ieisfsceen = = true){
document.msexitfullscreen();
ieisfsceen = false;
返回;
}
FScreen();
其他{ }
CfScreen();
}
})
键盘
$(document)。Keydown(函数(事件){
如果(= = 27的情况下ieisfsceen = = true){
ieisfsceen = false;
}
});
监视状态更改
如果(窗口。addEventListener){
Document.addEventListener('fullscreenchange,函数(){(){
如果($(# fsbutton )(文本)= =全屏){
$(# fsbutton)。文本(退出全屏);
其他{ }
$(# fsbutton)。文本(全屏幕);
}
});
Document.addEventListener('webkitfullscreenchange,函数(){(){
如果($(# fsbutton )(文本)= =全屏){
$(# fsbutton)。文本(退出全屏);
其他{ }
$(# fsbutton)。文本(全屏幕);
}
});
Document.addEventListener('mozfullscreenchange,函数(){(){
如果($(# fsbutton )(文本)= =全屏){
$(# fsbutton)。文本(退出全屏);
其他{ }
$(# fsbutton)。文本(全屏幕);
}
});
Document.addEventListener('msfullscreenchange,函数(){(){
如果($(# fsbutton )(文本)= =全屏){
$(# fsbutton)。文本(退出全屏);
其他{ }
$(# fsbutton)。文本(全屏幕);
}
});
}
值得注意的是,在线的fullscreenenabled参数的说法,有的说是监控浏览器是否可以请求进入全屏模式,有的说是一个判断浏览器是否支持全屏标志,实际使用中确实是一个问题,IE11不承认这个属性,需要建立一个单独的标记IE11是完全控制的现状。
以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一定的帮助。如果你有任何疑问,你可以留言交流。谢谢您一直鼓励我。