使用兄弟项目组的一个项目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
