event to check if the contents of iframe are completely loaded in Ext JS

Question

I want to perform few operations after the loading of iframe is completed.

I have tried by adding the afterrender event listener, but after render event fires when the window is opened not when the content is fully loaded.

new window.Ext.create('Ext.window.Window', {
            title: 'Popup',
            height: 630,
            width: 1050,
            modal: true,
            layout: 'fit',
            closeAction: 'close',
            items: [
                {
                    xtype: "component",
                    autoEl: {
                        tag: "iframe",
                        frameborder: 0,
                        src: "http://www.yahoo.com"

                    },
                    id: "frametoShow"
                }
            ]
        });

Is there any event which fires when the content of the frame is fully loaded ?

I'd also go with jQuery solution as well.

Any help would be appreciated.

Do not use ExtJs and jquery in parallel. It just will increase the page load time. You won't get a real benefit, because their functionality overlapping. — Lorenz Meyer, Mar 21 '15 at 08:03
You could just use plain JavaScript like it is explained in this question : http://stackoverflow.com/questions/3142837/capture-iframe-load-complete-event — Lorenz Meyer, Mar 21 '15 at 08:07

score 0 · Answer 1 · answered Feb 21 '22 at 17:14

Yes, you will need to add afterrender listener but also get the element on load like this:

items: [
    {
        xtype: "component",
        autoEl: {
            tag: "iframe",
            frameborder: 0,
            src: "http://www.yahoo.com"

        },
        listeners: {
            afterrender: function () {
                console.log('rendered');
    
                this.getEl().on('load', function () {
                    console.log('loaded');
                });
            }
        },
        id: "frametoShow"
    }
]

event to check if the contents of iframe are completely loaded in Ext JS

1 Answers1