您當(dāng)前位置：首頁(yè) > web前端 > jscript > IE6 動(dòng)態(tài)創(chuàng)建 iframe 無(wú)法顯示的 bug

IE6 動(dòng)態(tài)創(chuàng)建 iframe 無(wú)法顯示的 bug

來(lái)源：程序員人生發(fā)布時(shí)間：2014-04-26 13:05:14 閱讀次數(shù)：3241次

動(dòng)態(tài)彈出浮層，跨域加載一個(gè) iframe 頁(yè)面，發(fā)現(xiàn) IE6 下無(wú)法正常顯示。見(jiàn)圖所示：

最初懷疑是 innerHTML 方式創(chuàng)建 iframe 節(jié)點(diǎn)導(dǎo)致的：

document.getElementById('a').innerHTML = '<iframe width="500" height="100" src="http://www.mangguo.org/"></iframe>';

但這樣操作實(shí)際測(cè)試 IE6 是可以正常顯示 iframe 頁(yè)面的。百度之，發(fā)現(xiàn)同類(lèi)問(wèn)題有，但大多都是拷貝復(fù)制，沒(méi)一個(gè)靠譜的。

做了幾個(gè)簡(jiǎn)單的測(cè)試發(fā)現(xiàn)，通過(guò) innerHTML 方式創(chuàng)建 iframe 節(jié)點(diǎn)，通過(guò) createElement 創(chuàng)建節(jié)點(diǎn)再設(shè)置 src 屬性這兩種情況均不存在 IE6 顯示空白的情況：

那么也就剩下一種可能，通過(guò)事件觸發(fā)動(dòng)態(tài)創(chuàng)建 iframe 節(jié)點(diǎn)才會(huì)導(dǎo)致這種狀況，于是又有以下幾個(gè)測(cè)試：

情況一，觸發(fā)源是 a 標(biāo)簽

document.getElementById('c_btn1').onclick = function () {	document.getElementById('c1').innerHTML = '<iframe src="http://www.mangguo.org/" width="500" height="100"></iframe>';}

情況二，觸發(fā)源是 a 標(biāo)簽，但沒(méi)有 href 屬性

document.getElementById('c_btn2').onclick = function () {	document.getElementById('c2').innerHTML = '<iframe src="http://www.mangguo.org/" width="500" height="100"></iframe>';}

情況三，觸發(fā)源是 button 標(biāo)簽：

document.getElementById('c_btn3').onclick = function () {	document.getElementById('c3').innerHTML = '<iframe src="http://www.mangguo.org/" width="500" height="100"></iframe>';}

這三種情況下除了第一種 IE6 無(wú)法成功加載 iframe，導(dǎo)致 iframe 區(qū)塊顯示空白外，其余情況均正常。也就是說(shuō)，問(wèn)題的根源在于點(diǎn)擊 a 標(biāo)簽觸發(fā)加載行為。并不在于使用 innerHTML 方法。通過(guò)以下例子（標(biāo)簽 a 觸發(fā)同時(shí)使用 createElement 創(chuàng)建節(jié)點(diǎn)）可以驗(yàn)證這一點(diǎn)的正確：

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);}

結(jié)論：通過(guò) a 標(biāo)簽觸發(fā)加載 iframe 頁(yè)面的行為會(huì)導(dǎo)致 IE6 下 iframe 頁(yè)面空白。
解決方案：創(chuàng)建 DOM 后，再對(duì)該 iframe 的 src 進(jìn)行一次重置：

iframeEl.src = iframeEl.src;

或者干脆就不要用 a 標(biāo)簽了。詳細(xì)請(qǐng)參考 demo：

<!DOCTYPE html><html><head><meta charset="utf-8"><title>IE6 動(dòng)態(tài)創(chuàng)建 iframe 無(wú)法顯示的 bug</title><meta http-equiv="X-UA-Compatible" content="IE=Edge"><body><h1>IE6 動(dòng)態(tài)創(chuàng)建 iframe 無(wú)法顯示的 bug</h1><h2>通過(guò) innerHTML 方式創(chuàng)建 iframe 節(jié)點(diǎn)</h2><div id="a"></div><h2>通過(guò) createElement 創(chuàng)建節(jié)點(diǎn)再設(shè)置 src 屬性</h2><div id="b"></div><h2>通過(guò)事件觸發(fā)動(dòng)態(tài)創(chuàng)建 iframe 節(jié)點(diǎn)</h2>情況一，觸發(fā)源是 a 標(biāo)簽（IE6 下 iframe 無(wú)法正常顯示）：<a href="javascript:;" id="c_btn1">點(diǎn)此創(chuàng)建 iframe</a><div id="c1"></div>情況二，觸發(fā)源是 a 標(biāo)簽，但沒(méi)有 href 屬性：<a id="c_btn2" style="background:#ccc;cursor:pointer;">點(diǎn)此創(chuàng)建 iframe</a><div id="c2"></div>情況三，觸發(fā)源是 button 標(biāo)簽：<button id="c_btn3">點(diǎn)此創(chuàng)建 iframe</button><div id="c3"></div><h2>標(biāo)簽 a 觸發(fā)同時(shí)使用 createElement 創(chuàng)建節(jié)點(diǎn)</h2><a href="javascript:;" id="d_btn">點(diǎn)此創(chuàng)建 iframe</a><div id="d"></div><script>//通過(guò) innerHTML 方式創(chuàng)建 iframe 節(jié)點(diǎn)document.getElementById('a').innerHTML = '<iframe width="500" height="100" src="http://www.mangguo.org/"></iframe>';//通過(guò) createElement 創(chuàng)建節(jié)點(diǎn)再設(shè)置 src 屬性var el = document.createElement('iframe');el.width = '500';el.height = '100';el.src = 'http://www.mangguo.org/';document.getElementById('b').appendChild(el);//過(guò)事件觸發(fā)動(dòng)態(tài)創(chuàng)建 iframe 節(jié)點(diǎn)document.getElementById('c_btn1').onclick = function () {document.getElementById('c1').innerHTML = '<iframe src="http://www.mangguo.org/" width="500" height="100"></iframe>';}document.getElementById('c_btn2').onclick = function () {document.getElementById('c2').innerHTML = '<iframe src="http://www.mangguo.org/" width="500" height="100"></iframe>';}document.getElementById('c_btn3').onclick = function () {document.getElementById('c3').innerHTML = '<iframe src="http://www.mangguo.org/" width="500" height="100"></iframe>';}//標(biāo)簽 a 觸發(fā)，并使用 createElement 創(chuàng)建節(jié)點(diǎn)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);}</script></body></html>
提示：可修改后代碼再運(yùn)行!

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

生活不易，碼農(nóng)辛苦
如果您覺(jué)得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)
程序員人生

------分隔線----------------------------

上一篇 Google Adsense教程：初步認(rèn)識(shí) AdSense 帳戶(hù)

下一篇 CSS 網(wǎng)頁(yè)布局實(shí)例：橫向分欄水平居中的實(shí)現(xiàn)

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關(guān)注

欄目熱點(diǎn)

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

IE6 動(dòng)態(tài)創(chuàng)建 iframe 無(wú)法顯示的 bug