场景
系统主页index.jsp中包含一个iframe,iframe连接的是待办处理页面towork.jsp,以前没有使用jquery时,index页面会很快展现出来,待办数据很多的情况下towork页面会展现的慢些;后来在index页面使用了jquery页面载入事件$(document).ready(function() {//自己的代码}),并且在ready事件中进行页面展现的动画控制,index页面会和towork页面同时展现,当然等待的时间有时很长些。
分析
jquery页面载入事件ready(fn) 的api中说的是在页面dom元素全部加载并可以调用时调用该事件;那么iframe是index页面的一个元素,它把towork页面的元素视为iframe的子元素。所以index页面的ready(fn) 事件要等待index中的元素和iframe中的元素全部加载后才能被调用。
测试结果
jquery页面载入事件ready(fn) 和页面非ready(fn)事件方法的调用顺序为:父页面(index)的非ready(fn)事件方法(js方法、页面渲染展示(未放在ready事件中控制的话)) à 子页面(towork)的非ready(fn)事件方法(js方法、页面渲染展示(未放在ready事件中控制的话)) à 子页面(towork)的ready(fn)事件方法 à 父页面(index)的ready(fn)事件方法(已经在jquery1.3.1、1.4、1.4.4、1.6.4版本中测试通过)。
Index.html源代码:
<html>
<head>
<title>111</title>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script language="javascript">
$(document).ready(function() {
alert('11');
})
function frameResize(iframe) {
alert('22');
}
</script>
</head>
<body>
<iframe src="a.html" οnlοad="frameResize()"></iframe>
</body>
</html>
<script language="javascript">
alert('33');
</script>
Towork.html源代码:
<html> <head> <title>111</title> <script type="text/javascript" src="jquery-1.6.4.js"></script> <script language="javascript"> $(document).ready(function() { alert('44'); }) </script> </head> <body> </body> </html> <script language="javascript"> alert('55'); </script>