Search code examples
javascriptgoogle-chromeeventsextjsextjs3

Ext JS : iframe load event for downloaded file from Chrome

I am having a problem with onLoad event of an iframe on Google Chrome.

I created an iframe and set value for its "src" attribute to get a file from server.

While server is processing, a loading box is displayed until client gets the returned file.

I tried to use the onLoad event of iframe to detect when client get the file to turn off that waiting box, but on Google Chrome that event handler does not work.

With Firefox, when client gets a file, a "Save to" popup will be displayed automatically and event "load" will be fired, but this is not happen on Chrome.

With IE, when client gets a file, event "readystatechange" will be fired, but this is not happen on Chrome.

main.loading.show();

var body = Ext.getBody(), frame;
var frameComp = {
    tag : 'iframe',
    cls : 'x-hidden',
    id : 'downloaderframe',
    name : 'downloaderframe',
    src : url,
    onload : 'main.loading.hide();'
};

frame = body.createChild(frameComp);

frame.on('readystatechange', function () {
alert(1);
    main.loading.hide();
});
frame.on('load', function () {
alert(2);
    main.loading.hide();
});

Any help is must appreciated. Thank you.

Solution

  • It's a Google Chrome bug. I've solved it by using this plugin http://johnculviner.com/jquery-file-download-plugin-for-ajax-like-feature-rich-file-downloads/ and a cookie.