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

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,015
    Vote Rating
    847
    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

      0  

    Default


    It is important to know that some interactions are not going to work within an iframe, like scrolling.
    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.

  3. #3
    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

      0  

    Default


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

    Code:
    style="overflow:scroll;-webkit-overflow-scrolling:touch;
    (tested on iPad 2/3, iOS 6, Sencha Touch 2.0.1)

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,015
    Vote Rating
    847
    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

      0  

    Default


    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:

    Code:
    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>'
    });
    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.

  5. #5
    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

      0  

    Default


    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.

  6. #6
    Sencha User
    Join Date
    Oct 2012
    Location
    INDIA
    Posts
    13
    Vote Rating
    0
    damandeep.singh is on a distinguished road

      0  

    Default Finally Have a solution for Vertical Scroll in IFRAME using sencha.

    Finally Have a solution for Vertical Scroll in IFRAME using sencha.


    For scrolling to work :

    Use below snippet to achieve this on iOS devices

    PHP Code:
    <div style="-webkit-overflow-scrolling: touch;overflow-x:hidden;overflow-y: scroll;height:500px;"><iframe src="'+d+'" width="100%" height="100%"></div
    and for Android:
    PHP Code:
    <div style="height:auto;"><iframe src="'+urlMain+'" width="100%" height="100%" scrolling="yes"></iframe></div