Open external webpages inside a panel using iframe

[La Muerte Peluda]

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:

{
    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);
        }
          }
        }

[mitchellsimoens]

It is important to know that some interactions are not going to work within an iframe, like scrolling.

[La Muerte Peluda]

Actually this line allows you to scroll the webpage inside iframe:

style="overflow:scroll;-webkit-overflow-scrolling:touch;

(tested on iPad 2/3, iOS 6, Sencha Touch 2.0.1)

[mitchellsimoens]

Just tried this on my iPhone 5, iPad 3 with iOS 6.0.1 using ST 2.0.3 and 2.1.0 and it will scroll horizontally but not vertically:

Ext.Viewport.add({
    html : '<div style="overflow:scroll;-webkit-overflow-scrolling:touch;"><iframe style="width:100%;height:100%;" src="http://www.sencha.com/"></iframe></div>'
});

[La Muerte Peluda]

Yes, you're right! If I scroll vertically then the whole page seem to scroll (including the other widgets...). I didn't notice that because the page I opened was quite small!!

I'll investigate and try to improve the code to overcome this.