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

在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传参数 传递多个参数的问题