Hybrid View

  1. #1
    Sencha User
    Join Date
    Oct 2011
    Location
    Groningen, Netherlands
    Posts
    55
    Answers
    1
    Vote Rating
    0
    hermanvandermaas is an unknown quantity at this point

      0  

    Default Answered: Listen for loaded event on iframe

    Answered: Listen for loaded event on iframe


    Anyone knows how I can make my app listen for an event on an iframe, indicating it is fully loaded?

    I have two kinds of iframes in my Sencha Touch 2 app:
    • Embedded Vimeo movies (youtube doesn't work well with html5)
    • Google Maps
    Both iframe embeds work fine, interaction on the iframes works also. At least on Android. However when the app has launched, some iframes are still loading. In the Android browser the app reacts slowly to touch events, bad scrolling and tapping etc. right after launch. Only after a few seconds it becomes responsive. I suspect the loading of the iframes in the background is causing this. So, i'm thinking of showing a loadmask until all iframes have loaded (or don't load at all). Hence my question.

    Help would be greatly appreciated.

  2. The iframe element will actually fire a load event.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,602
    Answers
    3448
    Vote Rating
    814
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      1  

    Default


    The iframe element will actually fire a load event.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Oct 2011
    Location
    Groningen, Netherlands
    Posts
    55
    Answers
    1
    Vote Rating
    0
    hermanvandermaas is an unknown quantity at this point

      0  

    Default


    Thank you for your help. I made a working example at senchafiddle here: http://www.senchafiddle.com/#AgV2f#9PqkW.

    On startup the app shows a loadmask. After the load event fired on an iframe, the loadmask is removed. I actually put the iframe 'load' listener inside a Sencha Touch 'initialize' listener. Is this right or should it be a 'painted' listener?

    The relevant code of the panel object:
    Code:
                html: '<iframe style="width:90%;height:100%;" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.nl/maps/ms?msa=0&amp;msid=203503883063435584829.0004c3dc968de020be3ed&amp;ie=UTF8&amp;ll=52.255503,5.269243&amp;spn=0,0&amp;t=h&amp;iwloc=0004c3dca4e3baa4e0808&amp;output=embed" id="fitmap782215" ></iframe>',
                listeners: {
                    'initialize': function(thisss, eOpts) {
                        var myiframe = document.getElementById('fitmap782215');
                        
                        if (myiframe.attachEvent) {
                            myiframe.attachEvent("onload", a);
                        } else if (myiframe.addEventListener) {
                            myiframe.addEventListener("load", a, false);
                        }
                        
                        function a() {                        
                            Ext.Viewport.unmask();
                        }
                        
                    }
                }
    Anyone knows why the title in the titlebar in the in the Senchafiddle example is Con... instead of Contact? Looks like an error in the standard css.

Thread Participants: 1