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