iframe innerHTML is null

Question

this same code was working yesterday, iframe[0].contentWindow.document.body.innerHTML has value "success". But, today iframe[0].contentWindow.document.body is "". I cannot find innerHTML. Same is result of iframe[0].contentDocument.body.

html

<form id="formid" method="post" action="file/upload" enctype="multipart/form-data" target="frame">
   <input id="" type="file" name="file" />
</form>
<iframe id="frame" name="frame" width="0px" height="0px" frameborder="0"></iframe>

js

 var iframe = $('#frame');
   document.getElementById("formid").submit();
    $("#frame").ready(function(){
        $("#frame").load(function () {
        data = iframe[0].contentWindow.document.body.innerHTML;
        if(data == "success"){
          successFunction(); // calling function if success
        }
        });
    });

Are you trying to load an external resource in your iframe? In that case it might be that the browser prevents access because of security reasons. — Qqwy, Nov 26 '13 at 09:07
You're not loading any document in the ``. You need to specify an URL in `src` attribute. If it will be in the same domain, you can then access its `body` and `innerHTML`. — matewka, Nov 26 '13 at 09:13
I am not loading anything in iframe. iframe is getting file upload status as success or fail. — Ihsahs, Nov 26 '13 at 09:14
`iframe[0]` ? you have more than one iframe with the id #frame? — ManZzup, Nov 26 '13 at 09:28
I cannot reproduce what you're trying to do. What is the connection between the form submit and the iframe? As written, the file upload does not interact with the iframe, the iframe does not have a source, so $("#frame").load is never called. I stripped out the form in this gist: https://gist.github.com/brainwipe/7656712 — Dr Rob Lang, Nov 26 '13 at 11:13
I used ajax call for file upload in FF, Chrome and safari. IE9 does not support formData, so I used iframe for uploading file. The target of form is iframe name. — Ihsahs, Nov 26 '13 at 11:43

score 0 · Accepted Answer · answered Jan 08 '19 at 12:24

Using different path to iframe innerHtml worked:

JS:

function fileUpload(form, action_url) {
    var iframe = document.createElement("iframe");
    iframe.setAttribute("id", "frame");
    iframe.setAttribute("name", "frame");
    iframe.setAttribute("width", "0");
    iframe.setAttribute("height", "0");
    iframe.setAttribute("frameborder", "0");

    form.parentNode.appendChild(iframe);

    iframeId = document.getElementById("frame");

    var eventHandler = function () {

        if (iframeId.detachEvent) iframeId.detachEvent("onload", eventHandler);
        else iframeId.removeEventListener("load", eventHandler, false);

        if (iframeId.contentDocument) {
            content = iframeId.contentDocument.body.innerHTML;
        } else if (iframeId.contentWindow) {
            content = iframeId.contentWindow.document.body.innerHTML;
        } else if (iframeId.document) {
            content = iframeId.document.body.innerHTML;
        }

        setTimeout('iframeId.parentNode.removeChild(iframeId)', 200);
    }

    if (iframeId.addEventListener) iframeId.addEventListener("load", eventHandler, true);
    if (iframeId.attachEvent) iframeId.attachEvent("onload", eventHandler);

    form.setAttribute("target", "frame");
    form.setAttribute("action", action_url);
    form.setAttribute("method", "post");

    form.submit();
}

Html:

<form>
    <input type="file" name="file" /></br>
    <input type="button" value="upload" onClick="fileUpload(this.form,'url'); return false;" >
</form>

iframe innerHTML is null

1 Answers1

Linked