11.3 OnReady 触发问题
11.3.1 基本原理
在页面中, 硕正控件的创建过程是异步的, 所谓异步, 就是你无法预知、要求控件什么时候创建好, 但是当硕正控件被成功创建后,它是会触发 OnReady 事件的,用程序的角度看,相当于硕正控件反向调用了页面的 OnReady 函数。控件通过调用 OnReady 函数通知页面:我已经被创建了,您可以在该事件中书写初始语句了,比如打开报表模板、加载数据等等。insertReport('AF', 'rebar=none'); AF.func("build", "../test/myreport.xml"); ...insertReport( )执行完后,不等于控件已经创建好, 下面的 AF.func( ) 函数偶尔可能会执行成功, 但极有可能是执行失败的.
11.3.2 多个控件的触发机制
如果页面中包含了多个硕正插件, 那么每个插件都会触发一遍 OnReady, 例如下面的html片段,就表示包含了2个紧挨着的控件,其 id 分别为 AF1、AF2:<div style="position:relative;width:96%;height:400px"> <script>insertReport('AF1', '')</script> </div> <div style="position:relative;width:96%;height:400px"> <script>insertReport('AF2', '')</script> </div>AF1、AF2将先后被页面创建,并将分别触发 OnReady 事件, 也就是说页面中的 OnReady(id) 函数将一共被执行 2 遍。
注意: 控件未必是按照从上到下的次序创建的,也就是说你无法预测 OnReady( id ) 函数中 id 参数是先出现 AF1 还是 AF2!
function OnReady(id) { if(id == 'AF1') AF1.func("build", "../xml/report1.xml"); else if(id == 'AF2') AF2.func("build", "../xmlres/genrpt.aspx?n=133"); }如下写法是错误的,有严重的逻辑问题,初学者很容易犯这个错误:
function OnReady(id) { AF1.func("build", "../xml/report1.xml"); AF2.func("build", "../xmlres/genrpt.aspx?n=133"); }
11.3.3 IE 的触发机制
在不同的浏览器下,控件的创建时机是不一样的,在 IE 浏览器下,控件的创建时机是:控件首次出现在可视区域时。举个例子,假如您的页面很长,控件隐藏在页面的下方,需要拖拽右侧滚动条才能让控件显示:仅 IE 浏览器是这样的,Chrome、Firefox 浏览器不存在这个问题,不管控件是不是在可视区域,都将被快速创建.
11.3.4 Firefox的触发机制
考察一下这段典型的 OnReady( ) 事件代码:function OnReady(id) { AF.func("Build", "../test/myreport.xml"); }控件反向调用(即触发)这段代码时, 必须要具备一个前提:
var countFF = 0; //计数器 function cooper() { countFF++; if(countFF != 2) return; AF.func("Build", "../test/myreport.xml"); } function OnReady(id) { cooper(); } $(document).ready( ) { cooper(); }您看懂了吗? jquery 的 $(document).ready( ) 事件是发生在 DOM 对象全部注册成功时的, 这样就能保证前面提到的前提能满足.
function cooper() { countFF++; if(countFF != 3) return; //注: cooper( )一共会被调用 3 次 AF1.func("Build", "../test/myreport1.xml"); AF2.func("Build", "../test/myreport2.xml"); }这种写法能兼容其它浏览器。