Results 1 to 3 of 3

Thread: Listen for loaded event on iframe

  1. #1
    Sencha User
    Join Date
    Oct 2011
    Location
    Groningen, Netherlands
    Posts
    55
    Answers
    1
    Vote Rating
    2
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,336
    Answers
    3885
    Vote Rating
    1296
      1  

    Default

    The iframe element will actually fire a load event.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it!

    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
    2
      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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •