Tạo chức năng toàn màn hình động và giảm thiểu chức năng Div

Question

Màn hình hiển thị 3 div được tạo động và được tải. Vấn đề tôi gặp phải là việc thay đổi kích thước để hoạt động khi tôi cố gắng làm cho các div chuyển sang chế độ toàn màn hình. (Nhấp vào nút phía trước và nút thứ 2 ở mặt sau). Khi sử dụng tùy chọn chọn ở trên cùng, thay đổi kích thước hoạt động hoàn hảo, nhưng toàn màn hình không có tác dụng tương tự.

Đây là plunkr tôi: http://plnkr.co/edit/qYxIRjs6KyNm2bsNtt1P

Đây là chức năng thay đổi kích thước hiện tại của tôi:

for(i = 0; i<numOfDivs.length; i++){ 
    var flipTarget = document.getElementById(flipDiv[i]); 
    addResizeListener(flipTarget, function() { 
     for(j = 0; j<numOfDivs.length; j++){ 
      var style = window.getComputedStyle(flipTarget); 
      divWidth = parseInt(style.getPropertyValue('width'), 10); 
      divHeight = parseInt(style.getPropertyValue('height'), 10); 

      width = divWidth - margin.left - margin.right; 
      height = divHeight - margin.top - margin.bottom; 

      document.getElementById(frontDivNames[j]).innerHTML = '<span style="font-size: 40px; font-family:icons; cursor:pointer" id="flip" onclick="flipper(\''+flipperDivNames[j]+'\')">&#xf013;</span>'; 

      makeTestGraph(); 
      makeSliderGraph(); 
     }; 
    }); 
} 

Bất kỳ giúp đỡ về cất giấu tất cả các divs khác và làm cho chúng xuất hiện trở lại sau này cũng sẽ được đánh giá rất nhiều. Điều này đã mất một vài ngày làm việc và tôi đã nhận được gần như hư không mặc dù viết lại mã nhiều lần.

Cảm ơn sự giúp đỡ.

Answer 1

Có điều gì sai với api toàn màn hình javascript ???

<script> 
var fullscreen; 

SetFullscreen = function DetectFullscreen(el){ 


    DesktopFullScreen = function ToggleFullScreen(el){ 

     function cancelFullScreen(el) { 
       if (window.document.exitFullscreen) { 
        window.document.exitFullscreen(); 
       } else if (window.document.webkitExitFullscreen) { 
        window.document.webkitExitFullscreen(); 
       } else if (window.document.mozCancelFullScreen) { 
        window.document.mozCancelFullScreen(); 
       } else if (window.document.msExitFullscreen) { 
        window.document.msExitFullscreen(); 
       } 
       return undefined; 
      } 

     function requestFullScreen(el) { 

       // Supports most browsers and their versions. 
       var requestMethod = document.getElementById(el).requestFullScreen || document.getElementById(el).webkitRequestFullScreen || document.getElementById(el).mozRequestFullScreen || document.getElementById(el).msRequestFullscreen; 

       if (requestMethod) { // Native full screen. 
        requestMethod.call(document.getElementById(el)); 
       } else if (typeof window.ActiveXObject !== "undefined") { // Older IE. 
        var wscript = new ActiveXObject("WScript.Shell"); 
        if (wscript !== null) { 
         wscript.SendKeys("{F11}"); 
        } 
       } 
       return true; 
      } 

     if (fullscreen){ 
      fullscreen = cancelFullScreen(el); 
     } 
     else{ 
      fullscreen = requestFullScreen(el); 
     } 
    } 

    MobileFullScreen = function ToggleFullScreen(el){ 

     function cancelFullScreen(el) { 
       document.getElementById("fullscreenstyle").innerHTML=""; 
       return undefined; 
      } 

     function requestFullScreen(el) { 

       document.getElementById("fullscreenstyle").innerHTML="#"+el+" {position:fixed;top:0px;left:0px;width:100%;height:100%;}"; 
       return true; 
      } 

     if (fullscreen){ 
      fullscreen = cancelFullScreen(el); 
     } 
     else{ 
      fullscreen = requestFullScreen(el); 
     } 
    } 

    if(navigator.userAgent.match(/mobile/i)){ 
     MobileFullScreen(el); 
    } 
    else{ 
     DesktopFullScreen(el); 
    } 
} 
</script> 
<style> 
div{background:white;} 
</style> 
<style id="fullscreenstyle"> 

</style> 

<div id="fullscreen" onclick="SetFullscreen(this.id)">hello</div> 

Theo dõi từ nhận xét của bạn, bạn đang tìm kiếm nội dung như thế này?

<script> 


     function cancelFullScreen(el) { 
       document.getElementById("fullscreenstyle").innerHTML=""; 
       selectedElement = document.getElementById(el); 
       selectedElement.setAttribute("onclick","requestFullScreen(this.id)"); 
       document.body.innerHTML=bodysave; 
       return undefined; 
      } 

     function requestFullScreen(el) { 

       document.getElementById("fullscreenstyle").innerHTML="#"+el+" {background:pink;position:fixed;top:0px;left:0px;width:97%;height:97%;}"; 
       selectedElement = document.getElementById(el); 
           bodysave = document.body.innerHTML; 
       while (document.body.firstChild) { 
        document.body.removeChild(document.body.firstChild); 
       } 
       document.body.appendChild(selectedElement); 
       selectedElement.setAttribute("onclick","cancelFullScreen(this.id)"); 

       return true; 
     } 



</script> 
<style> 
div{background:white;} 
</style> 
<style id="fullscreenstyle"> 

</style> 

<div id="fullscreen" onclick="requestFullScreen(this.id)">hello</div> 
<div id="fullscreen2" onclick="requestFullScreen(this.id)">hello</div> 
<div id="fullscreen3" onclick="requestFullScreen(this.id)">hello</div>