在Firefox,IE上使用document.ready时的相关问题

在工作中遇到了一下问题

需求

需要在界面初始化之后，根据A div的高度设定B div的高度。其中A div是固定表示的。

实现

$(function(){
    //省略...
    var c = $("#A").height(); //在Firefox和IE上运行时，c的值有可能会为0
    $("#B").css("height", c + "px");
    //省略...
})

 以上代码在chrome上运行正常，在Firefox和IE上，有几率运行失败，c的值有可能会为0

 

调查

1，经查，【c=0】时，【$(document).height() == 0】，界面显示空白。所以怀疑，在执行以上代码时，画面描绘尚未完成。

2，以上代码改为$(window).load时执行，问题依然存在

$(window).load(function(){
    //省略...
    var c = $("#A").height(); //在Firefox和IE上运行时，c的值有可能会为0
    $("#B").css("height", c + "px");
    //省略...
})

对应方法

在进行界面初始化时，检查document的状态，如果document尚未初始化完成，则使用timeout进行等待，并设置回调，当document初始化完成后，实行回调函数。该部分做为共通处理。

//document状态判断
function isDocumentReady(){
	var h = $(document).height();
	//测试发现，在IE上时，document虽然初始化完了，但目标对象的初始化可能尚未完成
    //添加以下代码，等待目标对象的初始化完成
    if($("#A").length != 0){
		h = $("#A").height();
	}
	return h > 0;
}
//设置Timeout，等待界面初始化完成
function waitForReady(callback){
	if(isDocumentReady() > 0){
		window[callback]();
	}else{
		setTimeout("waitForReady('"+ callback +"')", 100);
	}
}

 

每个界面需要，编写并注册回调函数，调用状态检查函数

$(window).load(function(){
	if(isDocumentReady()){
		initPage();
	}else{
		waitForReady('initPage');
	}
})

function initPage(){
    //省略...
    var c = $("#A").height();
    $("#B").css("height", c + "px");
    //省略...
})

 

课题

对$(document).ready，$(window).load的执行时机，网上说是在【页面载入后执行】【文档都准备就绪】之后执行。不是很明白，所谓的【页面载入】和【文档准备就绪】是什么概念，如果说页面载入了或文档准备就绪了，那此时界面的布局，描画，渲染是什麽是不是也应该完成了？那上面的问题是什么原因，为什么$(document).height() 会等于0。是Firfox和IE的BUG？

 

参考

js 把字符串当函数执行的方法

JS中setTimeout()的用法详解

setTimeout传参数 传递多个参数的问题