IE6 动态创建 iframe 无法显示的 bug
发布时间：2018-10-05 14:24:06 所属栏目：创业 来源：站长网
导读：动态弹出浮层，跨域加载一个 iframe 页面，发现 IE6 下无法正常显示。见图所示： 最初怀疑是 innerHTML 方式创建 iframe 节点导致的： document.getElementById('a').innerHTML = 'iframe width=500 height=100 src=http://www.mangguo.org//iframe'; 但这
|
动态弹出浮层，跨域加载一个 iframe 页面，发现 IE6 下无法正常显示。见图所示：
最初怀疑是 document.getElementById('a').innerHTML = '<iframe width="500" height="100" src="http://www.mangguo.org/"></iframe>';
但这样操作实际测试 IE6 是可以正常显示 iframe 页面的。百度之，发现同类问题有，但大多都是拷贝复制，没一个靠谱的。 做了几个简单的测试发现，通过 innerHTML 方式创建 iframe 节点，通过 createElement 创建节点再设置 src 属性这两种情况均不存在 IE6 显示空白的情况：
那么也就剩下一种可能，通过事件触发动态创建 iframe 节点才会导致这种状况，于是又有以下几个测试： 情况一，触发源是 a 标签 document.getElementById('c_btn1').onclick = function () {
document.getElementById('c1').innerHTML = '<iframe src="http://www.mangguo.org/" width="500" height="100"></iframe>';
}
情况二，触发源是 a 标签，但没有 href 属性 document.getElementById('c_btn2').onclick = function () {
document.getElementById('c2').innerHTML = '<iframe src="http://www.mangguo.org/" width="500" height="100"></iframe>';
}
情况三，触发源是 button 标签： document.getElementById('c_btn3').onclick = function () {
document.getElementById('c3').innerHTML = '<iframe src="http://www.mangguo.org/" width="500" height="100"></iframe>';
}
这三种情况下除了第一种 IE6 无法成功加载 iframe，导致 iframe 区块显示空白外，其余情况均正常。也就是说，问题的根源在于点击 a 标签触发加载行为。并不在于使用 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 页面空白。 iframeEl.src = iframeEl.src; 或者干脆就不要用 a 标签了。详细请参考 demo：
芒果小站的原文DEMO：ie6_iframe_bug.html （编辑：核心网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
