Question

I have a parent page which has an iframe and also has javascript which will create a form, append it to the iframe, and submits it via POST to an external URL upon page load.

The content from the external URL then loads in the iframe. This works fine in all browsers EXCEPT IE9.
I tried the 'meta http-equiv="X-UA-Compatible" content="IE=8" ' trick and this didn’t help. Sometimes the iframe renders the content, sometimes it doesn’t upon refresh. Debug statements in the javascript show it is firing each time (each page load) and Fiddler shows the successful request/response to the external URL. It’s as if IE9 selectively decides whether to update the DOM.

Also I’ve noticed is that if there is any sort of delay with the external request (taking a few seconds), then the iframe content never renders. Has anyone experienced this with IE9 and have a solution?

<iframe frameborder="0" height="600px" id="ifPage" runat="server" width="700px" />

<script type="text/javascript" language="javascript">
var alreadyrunflag = 0 //flag to indicate whether target function has already been run

if (document.addEventListener) {//FireFox or Sarafi
    document.addEventListener("DOMContentLoaded", function () { alreadyrunflag = 1; GetExternalPageContent() }, false)
}
else if (document.all && !window.opera) 
{//IE
    addLoadEvent(GetExternalPageContent)
}

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    }
    else {
        window.onload = function () {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
}

function GetExternalPageContent() {

    var iframe = document.getElementsByTagName("iframe");
    if (iframe != null) {
        var uniqueString = "embFrame";
        iframe[0].contentWindow.name = uniqueString;
        var form = document.createElement("form");
        form.target = uniqueString;
        form.action = '<%=ExternalUrl %>';
        form.method = "POST";

        //parameter submitted to external URL to get appropriate content  
        var input = document.createElement("input");
        input.type = "hidden";
        input.name = "embParam";
        input.value = "paramValue1";
        form.appendChild(input);

        document.body.appendChild(form);
        form.submit();
    }
}
</script>

Answer 1

I just wanted to let people know that the issue here is that IE doesn’t like naming of the iframe content window like this:

iframe[0].contentWindow.name = uniqueString

Instead, the name attribute must be within the iframe tag itself. There were no javascript errors indicating this, it just didn’t consistently render. Then, when you need to dynamically reference the iframe content, use:

var iframe = window.frames['embFrame']

Doing it this way solved the issue and now the iframe content is rendered consistently.