使用兄弟项目组的一个项目www.dbank.com  准备存点资料的时候,发现一个怪异的问题, 项目中用flash做文件上传

其中有个flash按钮,

发现在firefox下,

当这个flash按钮移动到ajax动态加载数据并通过domObj.innerHTML = ´xxx´的方法更新了的html结构上时,

flash按钮无法获得焦点,

表现为:能看到flash按钮在最上方,设置z-index为9999也不能点击到此flash按钮;

经过试验,

猜测是由于该页面的dom结构虽然更新了,

但其实浏览器并未重新渲染,

导致通过ajax加载的html内容会挡住在此flash按钮上方,

虽然看起来并未挡住。

所以就需要想办法让浏览器重新渲染,

以便flash按钮重新回到最上方,能获得焦点。

有了思路,

经过测试,

可以通过如下两种方式解决

1、在ajax加载完html之后,设置flash按钮或它所在的div层的css属性:display:none;

然后再设置回来:display:block;,让它重新显示,

但这两个操作不能连续操作,

要让flash按钮真正的隐藏了之后,

再设置display:block显示出来,

这样才会生效。

这样操作完之后,flash按钮就能正常地点击了。

2、解决办法二

与上述同理,

先设置css属性:position:static;

然后再设置css属性:position:absolute;

同样,这两者之间需要一个时间间隔,连续设置不能达到应有的效果。

 

当然,考虑在ie下如果设置了flash的css属性为:display:none,或者position:static都会让flash里的程序会中断执行

所以上述两种方法需酌情使用

 

总结

在动态加载html的场景中,

可能会遇到很多由于浏览器未重新渲染导致的问题,

如果遇到类似的问题,

可以试试上述的方法。

 

 posted on 2009-07-14 16:52 落叶满长沙 阅读(...) 评论(...) 编辑 收藏