Question

我有一个位于内容管理系统内的仪表板。它有4个iframe排列在一个表中，因此3帧占据第一列和3个单独的行。第4帧占据第二列并跨越所有三行。 Javascript获取窗口尺寸并调整框架onload（）和onresize（）的大小。在一个小尺寸的窗户上，左栏上的3个框架的尺寸都是半英寸高，即使有可见的空间。

什么是垂直尺寸的抛出，我该如何改进呢？

请将答案集中在javascript上。

    <script type="text/javascript">
    var winW = 1024, winH = 768; //This sets a minimum height and width
    function calcHeight(ifid) {
        getWinH();
        document.getElementById(ifid).height = winH;
    }
    //Cross-browser function to get window height

       var compW = 35;
       var compH = 290;

        function getWinH() {

        if (document.body &amp;&amp; document.body.offsetWidth) {
            winW = document.body.offsetWidth;
            winH = document.body.offsetHeight;
        }
        if (document.compatMode == 'CSS1Compat' &amp;&amp; document.documentElement &amp;&amp; document.documentElement.offsetWidth) {
            winW = document.documentElement.offsetWidth;
            winH = document.documentElement.offsetHeight;
        }
        if (window.innerWidth &amp;&amp; window.innerHeight) {
            winW = window.innerWidth;
            winH = window.innerHeight;
        }
          winW = winW - compW;
          winH = winH - compH;  

    document.getElementById("box1").setAttribute("width", Math.floor(winW * 0.4));
    document.getElementById("box1").setAttribute("height", Math.floor(winH * 0.4));

    document.getElementById("box4").setAttribute("width", Math.floor(winW * 0.6));
    document.getElementById("box4").setAttribute("height", winH + 175); //comps for the titles of other boxes

    document.getElementById("box2").setAttribute("width", Math.floor(winW * 0.4));
    document.getElementById("box2").setAttribute("height", Math.floor(winH * 0.4));

    document.getElementById("box3").setAttribute("width", Math.floor(winW * 0.4));
    document.getElementById("box3").setAttribute("height", Math.floor(winH * 0.4));

    }
    </script>

Answer 1

尝试使用样式设置大小：

 var boxes = [document.getElementById("box1"), document.getElementById("box2"), document.getElementById("box3"), document.getElementById("box4")];
boxes[0].style.width = Math.floor(winW * 0.4) + "px";
boxes[0].style.height =  Math.floor(winH * 0.4) + "px"

boxes[3].style.width = Math.floor(winW * 0.6) + "px";
boxes[3].style.height =  (winH + 175) + "px"; //comps for the titles of other boxes

boxes[1].style.width = Math.floor(winW * 0.4) + "px";
boxes[1].style.height = Math.floor(winH * 0.4) + "px";

boxes[2].style.width = Math.floor(winW * 0.4) + "px";
boxes[2].style.height = Matth.floor(winH * 0.4) + "px";

将多个iframe调整为当前窗口大小

1 个答案: