0

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

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

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

代码如下：

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

其次，在该脚本的更复杂版本中，该脚本在“排水沟”中包含一个 div，该 div 包含一个img（很快就会是多个，一旦这个问题得到解决），几乎一切正常，除了加载时，它不加载样式（在 Chrome 中）。但是，它确实会在刷新时加载样式，或者如果我在 onload 触发器上设置了 50 毫秒的延迟。我认为这是因为 Chrome（和 Safari？）onload在 html 加载之后但在图像本身渲染之前触发了该事件，因此该函数无法确定尚未真正完成加载的主体的高度和宽度。

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

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 的属性 'style'”。

我更喜欢第一个函数，因为它简洁并且（根据 W3schools.com）更好的跨浏览器兼容性object.scrollWidthover window.innerWidth，但很明显，在某些情况下，一个或两个都被破坏了。

我的问题是，按重要性排序：

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

抱歉这么长的问题——一个问题有这么多，但我想不出办法来解开它们。我将不胜感激，并永远赞美那些可以帮助我解决这个问题的人。

4

1 回答 1

0

为什么不直接以 % 指定尺寸并让浏览器执行此操作。可能是你有一些非常具体的要求？请写出情景，（简而言之）

于 2012-05-21T06:02:14.330 回答