8.布局

8.1 容器

建议用 <div> 作为 <Object> 元素的容器, 这样我们只要处理好 <div> 的布局就行, 例如下面就是常见的写法:

    <div style="position:relative;width:96%;height:400px">
        <script>insertReport('AF', '')</script>
    </div>

如果 div 容器的位置和大小变化了，Object也会跟着变化; 容器隐藏了，Object也会跟着隐藏。
此外, 也可以用 <table> 的 <TD>作为容器:

    ...
    <tr height="400px">
     <td height="400px">
      <script>insertReport('AF', '')</script>
     </td>
    </tr>
    ...

8.2 容器注意事项

div 容器的初始高度是不能采用百分比的，必须采用像素, 如下的写法是有问题的：

    <div style="position:relative;width:96%;height:70%">
        <script>insertReport('AF', '')</script>
    </div>

上例中 div 的初始高度为百分比(70%) 将导致较为严重的结果，具体症状表现为控件无法显示、或者每10次中有1、2次显示不出来，需要手工刷新页面.
正确的做法是设定一个固定的像素高度，然后在页面的 resize 事件中计算出分配给它的高度，动态更改高度, 下面是简单的自适应高度的例子：

    <html>
    <head>
    <script src="binary/dynaload.js"></script>
    <script>
     function autoResize()
     {
       var dv = document.getElementById('main');
       var height = (document.documentElement.clientHeight - 30) + 'px';
       dv.style.height  = height;
     }
     window.onload = function() {
       autoResize();
     }
     window.onresize = function() {
       autoResize();
     }
    </script>
    </head>
    <body>
    <div id="main" style="position:relative;width:100%;height:380px">
     <script>insertReport('AF','')</script>
    </div>
    </body>
    </html>

宽度 (width) 允许采用百分比.

8.3 更复杂的场景

由于<Object>是一种特殊的元素，它的高度相对于容器是100%的，在某些情况下，比如页面布局较为复杂、页面中有多个控件，此时 <Object> 的初始高度有时未必会跟着变化，所以，我们也可以采用固定的像素数，将上述的脚本改成如下的形式：

    <div style="position:relative;width:96%">
        <script>insertReport('AF', '', '400px')</script>
    </div>

或

    ...
    <tr height="400px">
     <td>
      <script>insertReport('AF', '', '400px')</script>
     </td>
    </tr>
    ...

insertReport( ) 的第三个参数是隐含参数，其含义是<Object>的初始高度，您分析一下 dynaload.js 就能知道这个原理.
当您需要动态修改 <Object> 的高度时，可以直接修改它的 height 属性，比如:

    AF.height = '230px';
    //或者
    AF.height = 230;

如果您把 插件/加载项 安置在<Form>中，在IE下可能会遇到问题，请参见底下的 “10.不同浏览器之间的一些差别”.

8.4 其它注意事项

容器的书写，尽可能保持单一、简洁，不要将其它元素混杂在一起，如下写法就非常不妥：

    <div style="position:relative;width:96%;height:400px">
     <script>
      insertReport('AF', '');
      alert('...');
     </script>
     <input type='button' value='Text'>
    </div>