jQuery load() callback failure in IE

Question

Hi guys before posting this, I've already gone and looked around many places trying to solve the problem but couldn't. This was the closest thing that I came across.

I am trying to dynamically create an iframe and load the content in to its src then use the callback to do something to it. As always, everything works in FF/Chrome except in IE.

I have something like this:

var iframe = $('#helloworld');
if (!iframe.exists()) {
    iframe = $('<iframe/>', { 
        id : 'helloworld',
        src : "about:blank"
    }).css({
        width : "100%",
        height : "100%"
    });
}

...

iframe.load(options.src, function() {
    div.append(this);
    $(this).find('body').append(box);
    box.dialog({
        close: function( event, ui ) {
            iframe.load("about:blank");
            div.hide();
        }
    });
});

Similar to many other people's problem, it failed at the callback. From what I've read in other posts, it was due to invalid html coming back to the iframe, however, I've already checked that, and my html is valid.

This is what I am returning for my iframe, as you can see is already stripped to the bare minimum for testing purposes.

<!DOCTYPE html>
<html dir="ltr">

    <head>
        <title>Testing</title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
        <style type="text/css">
        </style>
    </head>

    <body></body>

</html>

In IE, the jQuery is dying @ line 5951:

append: function() {
    return this.domManip(arguments, true, function( elem ) {
        if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
            this.appendChild( elem );
        }
    });
},

SCRIPT65535: Unexpected call to method or property access. jquery-1.9.1.js, line 5951 character 5

Where this is supposedly to be my iframe, and it doesn't have appendChild method.

Any hint for me to further troubleshoot this problem?

You should remove this extra comma : `src : "about:blank",`. — , Nov 22 '13 at 16:53
I have something else after it before, i removed those other attributes as it doesn't apply to this question. I had `allowtransparency : true` after it originally. — codenamezero, Nov 22 '13 at 16:58
I told you so because it already happened to me very often, IE doesn't like extra commas :/ — , Nov 22 '13 at 17:15
Yea I know, I've seen enough of those error messages to know I have extra comma somewhere lol — codenamezero, Nov 22 '13 at 18:20

score 1 · Answer 1 · answered Nov 22 '13 at 17:06

You can not use load() like that with an iframe. If you want to know when the content is done loading in an iframe, use the onload event and set the src attribute.

iframe.on("load", function() {
    //code here
});

iframe.attr("src", options.src);

You will get your callback when the content is loaded.

Now to use the content in the iframe, you need to use contents()

iframe.contents().find("body")...

score 0 · Answer 2 · answered Nov 22 '13 at 16:49

0

To my knowledge .load loads HTML into the specified node.

So iframe.load(options.src, /* */);

Will load the value of options.src as the HTML body for the iframe. I doubt you want that.

I think you want:

iframe.attr("src", options.src);
// or
iframe.attr("src", "about:blank");

answered Nov 22 '13 at 16:49

Halcyon

57,230
10
89
128

I can't use `attr()` because the source isn't completely loaded and my subsequent code would fail. I needed to wait for the content is loaded then do something to it. – codenamezero Nov 22 '13 at 16:59

jQuery load() callback failure in IE

2 Answers2