Dynamic Iframe IE Name Issue

Question

This seems to be a common issue, and the solutions which I have seen do not seem to be working for me.

We've got a dynamically generated and inserted iframe, with a form which submits to it. Works fine in FF and IE8, but in 7 we are getting the iframe name issue (IE does not want to set iframe name using element.name or element.setAttribute("name",) ).

So I've converted our code over to this:

function insertTrafRepiFrame(){
    var contDiv = document.getElementById('trafficReportDiv');
    if(contDiv != null){
        var iFrame;
        try{
            iFrame = document.createElement('IFRAME');
        }catch(ex){
            iFrame = document.createElement('<iframe name="trafficreport">');                                        
        }
        iFrame.name = "trafficreport";
        iFrame.id = "trafficreport";
        iFrame.style.border = 0;
        iFrame.src = "http://www.frixo.com/widget/widget-report-area.aspx?road=all%38map=small%38latitude=51.1421%38longitude=-0.07545%38radius=50%38roadsearch=no%38roadlink=yes%38reporttype=full";
        while(contDiv.hasChildNodes()){
            contDiv.removeChild(contDiv.firstChild);
        }
        contDiv.appendChild(iFrame);
    }
}

With this form:

<form name="traffic_report" id="traffic_report" target="trafficreport" action="http://www.frixo.com/widget/widget-report.aspx" onsubmit="javascript:return CheckResponse(this);" method="get">
    <div id="trafficRepFormInps">
        <input type="hidden" name="map" value="small" />
        <input type="hidden" name="roadsearch" value="no" />
        <input type="hidden" name="roadlink" value="yes" />
        <input type="hidden" name="reporttype" value="full" /><br />
        <label for="road">Type a road below, i.e. M23:</label><br />                           
        <input name="road" value="M23" id="road" class="citysearchbox" type="text" /> 
    </div>
</form>

What I have noticed is that in developer tools, IE in 7 mode shows the iframe an attribute of submitName, where as 8 mode shows an attribute of propdescName. Could this discrepancy be causing this form misfiring? Or have I missed out on something else?

Thanks, Psy

(PS. No moans about iFrame over iframe variable name please :p )

Answer 1

I think you do it right with the document.createElement('<iframe name="trafficreport">');

But I'm not sure it is called as the document.createElement('IFRAME') will be ok, even in IE.

We are using a dynamic iframe to sandbox cross domain JSONP calls, and it works fine in IE. The code I use is:

var ifr = (/MSIE (6|7|8)/).test(navigator.userAgent) ? 
    document.createElement('<iframe name="'+id+'">'):
    document.createElement('iframe');
    ifr.name = id;

You can check a working example here click on the Demo link. If the demo works it means something is wrong in your code, if it doesn't work, something is wrong with your IE configuration.

Answer 2

The only solution that worked for me was changing the name after the element has been injected into DOM by doing this:

window.frames[name].name=name;