javascript - 创建动态全屏和最小化 Div 函数

Question

屏幕显示 3 个动态创建和加载的 div。我遇到的问题是当我尝试让 div 全屏显示时让调整大小起作用。 (单击前面的按钮和背面的第 2 个)。使用顶部的选择选项时，调整大小效果很好，但全屏效果不一样。

这是我的 plunkr:http://plnkr.co/edit/qYxIRjs6KyNm2bsNtt1P

这是我当前的调整大小函数:

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();
        };
    });
}

对于隐藏所有其他 div 并使它们稍后重新出现的任何帮助，我们也将不胜感激。这花了几天的时间，尽管多次重写代码，但我几乎一无所获。

感谢您的帮助。

Answer 1

javascript fullscreen api有问题吗？？？

<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>   

根据您的评论，您是否正在寻找这样的东西？

<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>