IE6 dynamically creates a bug where iframe cannot be displayed

The floating layer is displayed dynamically. An iframe page is loaded across domains and cannot be displayed normally under ie6. See the figure below:

Initially suspectedinnerHTMLMethod To create an iframe node:

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

In this way, the iframe page is displayed normally in IE6. Baidu found similar problems, but most of them are copying and copying, which is not reliable.

After a few simple tests, we found that if you create an iframe node using innerHTML, create a node using createElement, and then set the src attribute, there is no IE6 blank display:

There is only one possibility that the event-triggered dynamic creation of iframe nodes will result in this situation, so there are the following tests:

Case 1,Trigger source is a tag

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

Case 2,The trigger source is a tag, but there is no href attribute

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

Case 3,The trigger source is the button Tag:

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

In these three cases, iframe cannot be loaded successfully except for the first IE6, leading to white space in the iframe block. In other cases, the iframe block is normal. That is to say, the root cause of the problem is to click the tag to trigger the loading behavior. Not in useinnerHTMLMethod. The following example (tag a is triggered and createElement is used to create a node at the same time) can verify that this is correct:

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

Conclusion:Triggering the loading of the iframe page using the tag will lead to a blank iframe page in IE6.
Solution:After creating the DOM, reset the src of the iframe again:

iframeEl.src = iframeEl.src;

Or simply do not use the label.For details, see the demo:

<! DOCTYPE html> 





Tip: the code can be modified before running!

DEMO of the original mango site:Ie6_iframe_bug.html