8.布局
8.1 容器
<Object>元素的布局, 就是其位置和大小。其位置和页面上下文有关,而高度和宽度则有 height、width属性,其原始语法是这样的:<Object height='100%' width='100%' ... > 或即可以用百分比或像素数来决定其大小.
<Object height='300px' width='200px' ... >
<div style="position:relative;width:96%;height:400px"> <script>insertReport('AF', '')</script> </div>或
... <tr height="400px"> <td> <script>insertReport('AF', '')</script> </td> </tr> ...上述的 <div> ... </div>、<td> ... </td> 就相当于是Object对象的容器,从理论上说,如果容器位置和大小变化了,Object也会跟着变化、容器隐藏了,Object也会跟着隐藏。
8.2 容器注意事项
div 容器的初始高度是不能采用百分比的,必须采用像素, 如下的写法是有问题的:<div style="position:relative;width:96%;height:70%"> <script>insertReport('AF', '')</script> </div>上例中 div 的初始高度为百分比(70%) 将导致较为严重的结果,具体症状表现为控件无法显示、或者每10次中有1、2次显示不出来,需要手工刷新页面.
宽度 (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 就能知道这个原理.
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>