Threaded View

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

      0  

    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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar