JavaScript: Getting notification when empty iframe is loaded

Question

I'm trying to dynamically create an iframe with a <form> and form child <input> element in it using jQuery. For some reason, the load event of the iframe is never firing, so I can't add the <input>. What am I missing?

Very short: http://jsfiddle.net/LLKej/10/

EDIT: I'm trying to detect when the iframe loads

You want to place the INPUT element onto the document that has loaded into the IFRAME? — Šime Vidas, Apr 11 '11 at 22:59

score 0 · Answer 1 · answered Apr 11 '11 at 21:03

0

read the console. there is no load event for forms.

answered Apr 11 '11 at 21:03

Naftali

144,921
39
244
303

score 0 · Answer 2 · answered Apr 11 '11 at 21:19

0

Unfortunately there is no onload or load event for an HTML form. The only available actions besides the typical events like click, focus, and change, are submit and reset.

References: https://developer.mozilla.org/en/DOM/HTMLFormElement#Methods

answered Apr 11 '11 at 21:19

alvincrespo

9,224
13
46
60

score 0 · Answer 3 · edited May 23 '17 at 12:04

The load event is firing (confirm by placing an alert inside of your load event). However, you are not appending content to the iframe properly:

$iframe.load(function() {

    var $uploadForm =  $("<form target='" + iframeName + "' action='" + options.postUrl + "' method='post' enctype='multipart/form-data' />");

    $iframe.contents().find("body").append($uploadForm);
    $uploadForm.append($("<input type='file' value='" + options.file + "' />"));

    if (options.selectFile === true) {
         $uploadForm.find("input").click();   
    } 
});

Note the call to .contents() before the append call.

Additionally, I don't believe it's possible to programmatically launch a file input's browse functionality (confirmed by this question).

JavaScript: Getting notification when empty iframe is loaded

3 Answers3