知识汇总 05~ 针对 html 元素的全屏实现
- // 针对不同浏览器对全屏事件的监听,
- document.addEventListener("fullscreenchange", function(e) {
- // console.log("fullscreenchange", e);
- if(fullscreenEnabled){
- fullscreenEnabled=false;
- closeFulls=false;
- $('#fullclick span').removeClass("glyphicon-resize-full").addClass("glyphicon-resize-small");
- $('#contentFull').CSS('right', '0px');
- $('#contentFullts').css('right', '0px');
- $("#logInfos").css({"height":"88%","overflow":"auto"});
- $("#logInfo").css({"height":"88%","overflow":"auto"});
- //console.log('全屏了')
- }else{
- fullscreenEnabled=true;
- closeFulls=true;
- $("#logInfos").css("height", "400px");
- $("#logInfo").css("height", "400px");
- $("#sfooter").show();
- //console.log("退出全屏了")
- $('#fullclick span').removeClass("glyphicon-resize-small").addClass("glyphicon-resize-full");
- $('#contentFull').css('right', '200px');
- $('#contentFullts').css('right', '200px');
- }
- });
- document.addEventListener("mozfullscreenchange", function(e) {
- // console.log("mozfullscreenchange", e);
- if(fullscreenEnabled){
- fullscreenEnabled=false;
- closeFulls=false;
- $('#fullclick span').removeClass("glyphicon-resize-full").addClass("glyphicon-resize-small");
- $('#contentFull').css('right', '0px');
- $('#contentFullts').css('right', '0px');
- $("#logInfos").css({"height":"88%","overflow":"auto"});
- $("#logInfo").css({"height":"88%","overflow":"auto"});
- //console.log('全屏了')
- }else{
- fullscreenEnabled=true;
- closeFulls=true;
- $("#sfooter").show();
- $("#logInfos").css("height", "400px");
- $("#logInfo").css("height", "400px");
- //console.log("退出全屏了")
- $('#fullclick span').removeClass("glyphicon-resize-small").addClass("glyphicon-resize-full");
- $('#contentFull').css('right', '200px');
- $('#contentFullts').css('right', '200px');
- }
- });
- document.addEventListener("webkitfullscreenchange", function(e) {
- //console.log("webkitfullscreenchange", e.currentTarget.webkitlsFullScreen);
- if(fullscreenEnabled){
- fullscreenEnabled=false;
- closeFulls=false;
- $('#fullclick span').removeClass("glyphicon-resize-full").addClass("glyphicon-resize-small");
- $('#contentFull').css('right', '0px');
- $('#contentFullts').css('right', '0px');
- $("#logInfos").css({"height":"88%","overflow":"auto"});
- //console.log('全屏了')
- }else{
- fullscreenEnabled=true;
- closeFulls=true;
- $("#logInfos").css("height", "400px");
- $("#logInfo").css("height", "400px");
- $("#sfooter").show();
- //console.log("退出全屏了")
- $('#fullclick span').removeClass("glyphicon-resize-small").addClass("glyphicon-resize-full");
- $('#contentFull').css('right', '200px')
- $('#contentFullts').css('right', '200px');
- }
- });
- document.addEventListener("msfullscreenchange", function(e) {
- //console.log("msfullscreenchange", e);
- if(fullscreenEnabled){
- fullscreenEnabled=false;
- closeFulls=false;
- $('#fullclick span').removeClass("glyphicon-resize-full").addClass("glyphicon-resize-small");
- $('#contentFull').css('right', '0px');
- $('#contentFullts').css('right', '0px');
- $("#logInfos").css({"height":"88%","overflow":"auto"});
- //console.log('全屏了')
- }else{
- fullscreenEnabled=true;
- closeFulls=true;
- $("#logInfos").css("height", "400px");
- $("#sfooter").show();
- //console.log("退出全屏了")
- $('#fullclick span').removeClass("glyphicon-resize-small").addClass("glyphicon-resize-full");
- $('#contentFull').css('right', '200px');
- $('#contentFullts').css('right', '200px');
- }
- });