IE6 动态创建 iframe 无法显示的 bug--- 芒果
2011-12-07 00:20
218 查看
动态弹出浮层,跨域加载一个 iframe 页面,发现 IE6 下无法正常显示。见图所示:
最初怀疑是
但这样操作实际测试 IE6 是可以正常显示 iframe 页面的。百度之,发现同类问题有,但大多都是拷贝复制,没一个靠谱的。
做了几个简单的测试发现,通过 innerHTML 方式创建 iframe 节点,通过 createElement 创建节点再设置 src 属性这两种情况均不存在 IE6 显示空白的情况:
那么也就剩下一种可能,通过事件触发动态创建 iframe 节点才会导致这种状况,于是又有以下几个测试:
情况一,触发源是 a 标签
情况二,触发源是 a 标签,但没有 href 属性
情况三,触发源是 button 标签:
这三种情况下除了第一种 IE6 无法成功加载 iframe,导致 iframe 区块显示空白外,其余情况均正常。也就是说,问题的根源在于点击 a 标签触发加载行为。并不在于使用
结论:通过 a 标签触发加载 iframe 页面的行为会导致 IE6 下 iframe 页面空白。
解决方案:创建 DOM 后,再对该 iframe 的 src 进行一次重置:
或者干脆就不要用 a 标签了。详细请参考我的 demo:ie6_iframe_bug.html
http://www.mangguo.org/
最初怀疑是
innerHTML方式创建 iframe 节点导致的:
document.getElementById('a').innerHTML = '<iframe width="500" height="100" src="http://www.mangguo.org/"></iframe>';
但这样操作实际测试 IE6 是可以正常显示 iframe 页面的。百度之,发现同类问题有,但大多都是拷贝复制,没一个靠谱的。
做了几个简单的测试发现,通过 innerHTML 方式创建 iframe 节点,通过 createElement 创建节点再设置 src 属性这两种情况均不存在 IE6 显示空白的情况:
那么也就剩下一种可能,通过事件触发动态创建 iframe 节点才会导致这种状况,于是又有以下几个测试:
情况一,触发源是 a 标签
情况二,触发源是 a 标签,但没有 href 属性
情况三,触发源是 button 标签:
document.getElementById('c_btn').onclick = function () { document.getElementById('c').innerHTML = '<iframe src="http://www.mangguo.org/" width="500" height="100"></iframe>'; }
这三种情况下除了第一种 IE6 无法成功加载 iframe,导致 iframe 区块显示空白外,其余情况均正常。也就是说,问题的根源在于点击 a 标签触发加载行为。并不在于使用
innerHTML方法。通过以下例子(标签 a 触发同时使用 createElement 创建节点)可以验证这一点的正确:
document.getElementById('d_btn').onclick = function () { var el = document.createElement('iframe'); el.width = '500'; el.height = '100'; el.src = 'http://www.mangguo.org/'; document.getElementById('d').appendChild(el); }
结论:通过 a 标签触发加载 iframe 页面的行为会导致 IE6 下 iframe 页面空白。
解决方案:创建 DOM 后,再对该 iframe 的 src 进行一次重置:
iframeEl.src = iframeEl.src;
或者干脆就不要用 a 标签了。详细请参考我的 demo:ie6_iframe_bug.html
http://www.mangguo.org/
相关文章推荐
- ie6动态创建iframe无法显示内容的bug
- IE6 动态创建 iframe 无法显示的 bug,万恶的IE6
- IE6 bug之 无法显示动态创建的iframe
- IE6 bug之 无法显示动态创建的iframe
- IE6 动态创建 iframe 无法显示的 bug,万恶的IE6
- 转摘 IE6 动态创建 iframe 无法显示的 bug
- IE6 动态创建 iframe 无法显示的 bug
- IE6 动态创建 iframe 无法显示的 bug,万恶的IE6
- IE6通过点击 <a href="javascript:void(0);"></a>方式动态创建iframe无法显示
- IE6通过点击 <a href="javascript:void(0);"></a>方式动态创建iframe无法显示
- IE6 bug:iframe空白,无法显示内容
- 关于Iframe在IE6下不显示的bug
- IE6下iframe调用的页面中含有DD_belatedPNG js的引用,iframe显示为空白的BUG
- IE6下iframe内容不显示bug
- ie6下js动态更改图片地址,图片不显示的bug
- 转-IE6 & IE7 动态创建 iframe 读取不到 contentWindow.name 属性解决方案
- jquery动态创建div,调用dialog方法显示远程iframe文件,封装jquery方法
- 解决IE6下JS动态插入iframe不显示的方法
- IE6 innerHTML写入的iframe src不显示BUG的解决方法
- Android开发之TableLayout动态创建无法显示的问题