Threaded View

  1. #1
    Sencha User La Muerte Peluda's Avatar
    Join Date
    Jun 2012
    Location
    Turin
    Posts
    25
    Vote Rating
    1
    La Muerte Peluda is on a distinguished road

      1  

    Default Open external webpages inside a panel using iframe

    Open external webpages inside a panel using iframe


    Hi, I've found this solution (putting together many different advices on that I've found around the web) to open an external webpage in a panel, e.g. by pushing a new panel with the external page.

    The default behavior for mobile browser is to open the link in a new tab, which is quite annoying if you are in a full screen web app!

    This solution does not require any ajax trick, as it exploits an iframe and intercepts the default event for all <a> tags in a component (use with caution). Works well on iOS as well on Android.

    I post here the config for a container that pushes to a navigation view a new container wrapping a panel containing an iframe that shows the external webpage. The navview has id 'thenavview' and i mask it in order to avoid the double tap/double push annoying bug (@sencha guys: when will you solve it?).

    Here is the code, hope someone finds it useful:

    Code:
    {
        xtype:'container',
        title: 'MY TITLE',
        items: [<MY COMPONENTS>],
        scrollable:{
          direction: 'vertical',
          directionLock: true
        },
        listeners:{ //intercept clink on link to open it in an iframe
            painted:function(mycomponent){
            var externalPages=mycomponent.element.dom.getElementsByTagName('a');
            for (var i=0;i<externalPages.length;i++)
            {
              externalPages[i].onclick =
              (function(theHref){
                return function() {
                  var navView=Ext.getCmp('thenavview');
                  navView.setMasked({
                  xtype:'loadmask',
                  message:'Loading external link...'
                  });
                  navView.push({
                xtype:'container',
                scrollable:true,
                items:[
                {
                  xtype:'panel',
                  html: '<div style="overflow:scroll;-webkit-overflow-scrolling:touch;"><iframe style="width:100%;height:100%;" src="'+theHref+'" onload="(function(){Ext.getCmp(\'thenavview\').setMasked(false);})()">Your device does not support iframes.</iframe></div>'
                }
                ]
                  });
                  return false;
                };
              })(externalPages[i].href);
            }
              }
            }
    Last edited by La Muerte Peluda; 16 Nov 2012 at 5:28 AM. Reason: found small bug (forgot closure in loop), improved loadmask