Question

我是JavaScript的新手，但我正在努力学习。出于这个原因，我想尝试在不使用jQuery的情况下完成此任务。

我正在尝试加载一个页面，其中内容根据浏览器的高度和宽度动态调整大小。我目前有两个代码迭代，一个在内容div中有一个图像，另一个更简单，没有。

首先，解决没有图像的问题。从body标签中的winSize事件或HTML底部的脚本标签内部调用onload似乎能够在设置样式之前确定scrollHeight / Width，但填充整个窗口使用内容div的黑色而不是将其宽度设置为704px，因为脚本已经确定它应该是。使用脚本标题中的document.body.onload来调用winSize会导致null scrollWidth / Height，并且只显示灰色背景。

该代码如下：

<style>
    body {
       padding:0px;
       background-color: #808080;
    }
    div { 
       position:absolute;
    }
</style>
<script type="text/javascript">
    bArat=3/2;
    bH1=0;
    bW1=0;
    bX1=0;
    bY1=0;

    function winSize(){
       winW=document.body.scrollWidth;
       winH=document.body.scrollHeight;
       _style();
    }

    function _style(){
       bH1=winH;
       bW1=bH1/bArat;
       bX1=(winW/2)-(bW1/2);
       document.getElementById("gutters").style.left=bX1;
       document.getElementById("gutters").style.top=bY1;
       document.getElementById("gutters").style.height=bH1;
       document.getElementById("gutters").style.width=bW1;
       document.getElementById("gutters").style.backgroundColor="black";
       document.body.style.backgroundColor="black";
    }

    //document.body.onload=winSize();
</script>
</head>
<body>
    <div id="gutters">
    </div>
    <script>
    //winSize();
    </script>
</body>
</html>

其次，在这个脚本的更复杂的版本中，包含一个“gutters”中的div，它包含img（很快就会有多个，只要这个问题得到解决），几乎所有东西都可以正常工作，除了加载时，它不会加载样式（在Chrome中）。但是，它会在刷新时加载样式，或者如果我在onload触发器上设置50ms延迟。我认为这是因为Chrome（和Safari？）在加载html之后但在图像本身被渲染之前触发了onload事件，因此该函数无法确定尚未真正完成的正文的高度和宽度负荷。

在第二个脚本中，上面的函数是：

function winSize(){
   winW=document.body.scrollWidth;
   winH=document.body.scrollHeight;
   _style();
}

根本不起作用。 winH或winW未定义。

但该功能已从http://www.javascripter.net/faq/browserw.htm

中扣掉

function winSize(){
    if (document.body && document.body.offsetWidth) {
        winW = document.body.offsetWidth;
        winH = document.body.offsetHeight;
    }
    if (document.compatMode=='CSS1Compat' &&
    document.documentElement &&
    document.documentElement.offsetWidth ) {
        winW = document.documentElement.offsetWidth;
        winH = document.documentElement.offsetHeight;
    }
    if (window.innerWidth && window.innerHeight) {
        winW = window.innerWidth;
        winH = window.innerHeight;
    }
}

按上述方式工作：“...加载时不会加载样式（在Chrome中）。但是，它会在刷新时加载样式。”如果我在第一个脚本中运行第二个winSize函数，则返回错误“无法读取属性'样式'的null”。

我更喜欢第一个功能，因为它的简洁性（根据W3schools.com）与object.scrollWidth相比window.innerWidth更好地跨浏览器兼容性，但很明显，在某些情况下，其中一个或两个都被打破了。

我的问题按重要性顺序排列：

在第二个脚本中，如何在图像完全加载后运行'winSize'函数？（如果那是问题）
当以相同的方式实现时，为什么两个脚本对这两个函数的反应如此截然不同。
什么能解决我提出的第一个脚本 - 第一个内容div，“gutters”，填充整个屏幕而不是制作矩形。
为什么在body标签中放置onload事件有效，但是将document.body.onload放在head脚本中则不行。

很抱歉这么长的问题 - 在一个问题上有这么多问题，但是我想不出办法解开它们。我会感激任何帮助，并永远赞扬那些可以帮助我解决这个问题的人。

Answer 1

为什么不在％中指定维度并让浏览器执行此操作。可能你有一些非常具体的要求吗？请写下场景，（简而言之）

动态调整页面大小

1 个答案: