IE6 动态创建 iframe 无法显示的 bug
动态弹出浮层,跨域加载一个 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 (编辑:河北网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |