| 摘要 |
|---|
| 介绍如何解决在firefox下flash按钮或链接无法获得焦点的问题 |
| 详细内容 |
|---|
今天在项目中遇到一个firefox下的bug问题, 之前还从未遇到过firefox的bug, 特此记录下来。 项目中用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的场景中, 可能会遇到很多由于浏览器未重新渲染导致的问题, 如果遇到类似的问题, 可以试试上述的方法。 |
| 我要留言 | 我要留言 |