您的位置:首页 > 其它

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

2016-12-29 00:00 387 查看
情况一,触发源是 a 标签,带href 属性 (不正常)
情况二,触发源是 a 标签,但没有 href 属性,利用onclick事件(正常显示)
情况三,触发源是 button 标签,利用onclick事件(正常显示)

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 标签了,改用span等标签,问题解决
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: