软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > Web前端 > Ajax/JavaScript > IE6 动态创建 iframe 无法显示的 bug

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

动态弹出浮层,跨域加载一个 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 标签

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 标签触发加载行为。并不在于使用 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:


提示:可修改后代码再运行!

芒果小站的原文DEMO:ie6_iframe_bug.html

    相关阅读
    栏目导航
    推荐软件