当前位置:   article > 正文

进入全屏和退出全屏_已进入全屏,执行返回操作可退,全屏

已进入全屏,执行返回操作可退,全屏

第一种:

  1. //全屏
  2. $("#fsc").on("click","#fullsc",function(){
  3. $(".judgementArea").addClass("fullscreenclass");
  4. $(".fullScreen,.page-header.navbar-fixed-top,.fullScreen").hide();
  5. var html = '<span id="exitfull">&nbsp;<span class="glyphicon glyphicon-fullscreen"></span><span id="close-fullsc">&nbsp;退出全屏</span></span>';
  6. $("#fsc").html(html);
  7. $("#fsc").data("data-fullscreen","1");
  8. var el = $("body")[0];
  9. var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen || el.oRequestFullscreen;
  10. if(typeof rfs != "undefined" && rfs) {rfs.call(el)}
  11. return;
  12. })
  13. $("#fsc").on("click","#exitfull",function(){
  14. exitFullScreen();
  15. })
  16. function exitFullScreen(){
  17. var html = '<span id="fullsc">&nbsp;<span class="glyphicon glyphicon-fullscreen"></span><span id="close-fullsc">&nbsp;全屏</span></span>';
  18. $("#fsc").html(html);
  19. $(".fullScreen,.page-header.navbar-fixed-top").show();
  20. if($("#operateEdit").val()=='view'){
  21. $(".work_folw_cost").css("display","inline");
  22. }else{
  23. $(".work_folw_cost").css("display","none");
  24. }
  25. $(".judgementArea").removeClass("fullscreenclass");
  26. $("#fsc").data("data-fullscreen","0");
  27. if (document.exitFullscreen) {document.exitFullscreen();}
  28. else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); }
  29. else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); }
  30. else if (document.msExitFullscreen) { document.msExitFullscreen(); }
  31. if(typeof cfs != "undefined" && cfs) {cfs.call(el)};
  32. }
  33. window.onresize = function(){
  34. if(!checkFull()){
  35. exitFullScreen();
  36. }
  37. }
  38. function checkFull(){
  39. var explorer = window.navigator.userAgent.toLowerCase();
  40. if(explorer.indexOf('chrome')>0){//webkit
  41. if (document.body.scrollHeight === window.screen.height && document.body.scrollWidth === window.screen.width) {
  42. return true;
  43. } else {
  44. return false;
  45. }
  46. }else{//IE 9+ fireFox
  47. if (window.outerHeight === window.screen.height && window.outerWidth === window.screen.width) {
  48. return true;
  49. } else {
  50. return false;
  51. }
  52. }
  53. }

.fullscreenclass{
    position: fixed;
    left:0;
    top:0;
    right:0;
    bottom:0;
    background-color: #fff;
    overflow:auto;
}

参考页面:

/pages/BudgetManagement/implemented/costSubjectTemplate.jsp  

  • 概预算管理-----预算执行情况填报

第二种:


$("#fsc").on("click","#fullsc",function(){
    $(".mini-toolbar").css({
        "width":"100%",
        "height":"100%"
    })
    $(".mini-menubutton,#dataExport,#multiEditButton,#release").hide();
    var html = '<span id="exitfull"> <span class="glyphicon glyphicon-fullscreen"></span><span id="close-fullsc"> 退出全屏</span></span>';
    $("#fsc").html(html);
    var el = $("body")[0];
    var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen || el.oRequestFullscreen;      
    if(typeof rfs != "undefined" && rfs) {rfs.call(el)}
    return;
})

$("#fsc").on("click","#exitfull",function(){
    $(".mini-toolbar").css({
        "width":"95%",
        "height":"99%"
    })
    $(".mini-menubutton,#dataExport,#multiEditButton,#release").show();
    var html = '<span id="fullsc"> <span class="glyphicon glyphicon-fullscreen"></span><span id="close-fullsc"> 全屏</span></span>';
    $("#fsc").html(html);
    if (document.exitFullscreen) {document.exitFullscreen();}  
    else if (document.mozCancelFullScreen) {  document.mozCancelFullScreen();  }  
    else if (document.webkitCancelFullScreen) {  document.webkitCancelFullScreen();  }  
    else if (document.msExitFullscreen) {  document.msExitFullscreen();  } 
    if(typeof cfs != "undefined" && cfs) {cfs.call(el)};
})
window.onresize = function(){
    if(!checkFull()){
        var html = '<span id="fullsc"> <span class="glyphicon glyphicon-fullscreen"></span><span id="close-fullsc"> 全屏</span></span>';
        $("#fsc").html(html);
    }
}
function checkFull(){
    var isFull =  document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled;
    if(isFull === undefined) isFull = false;
    return isFull;

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/花生_TL007/article/detail/245572
推荐阅读
相关标签
  

闽ICP备14008679号