芒果小站

  1. 全球最具业界良心的主机 - Linode

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - Linode

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - Linode

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
9

IE6 动态创建 iframe 无法显示的 bug

作者 芒果/分类 代码/发布于 2011-11-26 20:18

动态弹出浮层,跨域加载一个 iframe 页面,发现 IE6 下无法正常显示。见图所示:

最初怀疑是 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

版权所有,转载请注明出处。
转载自 <a href="http://mangguo.org/ie6-can-not-display-a-dynamically-created-iframe-bug/" title="IE6 动态创建 iframe 无法显示的 bug" rel="bookmark">IE6 动态创建 iframe 无法显示的 bug | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 9 条群众意见

  1. 前端开发 /2011-11-26 22:15

    这个碰见过,src放在前面就不会有类似情况了 回应

    #1
  2. Firm /2011-11-27 10:42

    跳过,我会选择忽略a 标签。 回应

    #2
  3. 优实惠 /2011-11-28 06:07

    学习了,感谢芒果哥 回应

    #3
  4. 怪物世界 /2011-11-28 10:26

    主题蛮好看的。用帝国,织梦之类的CMS多了,也想试试wp 回应

    #4
  5. 今年流行什么鞋 /2011-11-28 15:51

    我没试过耶,,不知道难不难! 回应

    #5
  6. 很太吧 /2011-11-29 13:35

    刚刚在妞妞的博客上也看到了类似的,心有灵犀一点通啊 回应

    #6
  7. 芒果很太吧/2011-11-29 18:24

    谁是妞妞? 回应

    #7
  8. 赵弟栋 /2012-02-29 18:04

    a标记的href属性是javascript:void(0);引起的,ie6的bug 据说是这个值会使ie6认为动作已经结束所以iframe不加载地址了, 改成### 或者 正常链接组织浏览器默认动作 回应

    #8
  9. Soulbound赵弟栋/2012-04-13 11:14

    此为正解! 回应

    #9

下面我简单说几句