Displaying iframe in sencha touch app with scrolling

extjsiframe

I'm trying to load an outside webpage in an iframe in my sencha touch app. The webpage is of dynamic height so I need the iframe to be scrollable within the sencha touch app. I have been able to get the page to scroll, but the underlying iframe does not render any of the web content below the initial viewport. Here is my code. Does anybody have any ideas?

App.views.Help = Ext.extend(App.views.Base, {
    title: 'Help',
    mainLevel: 10,
    subLevel: 1,
    backButton: 'dashboard',
    forceTab: App.OTHER_TAB,
    forceSideTab: App.HELP_TAB,
    layout: 'fit',
    bodyPadding: 0,
    items: [{
        xtype: 'panel',
        scroll: 'both',
        items: [{
            id: 'iframe',
            layout: 'vbox',
            width: '100%',
            height: '2000px',
            html: [
                '<div style="width:100%;height:2000px;position:fixed;top:0;left:0;background-color:Transparent;float:left;z-index:99;"></div>',
                '<iframe style="position:fixed;top:0;left:0;float:left;z-index:1;" width="100%" height="2000px" src="http://mvretail.assistly.com/customer/portal/topics/118700-mobile-basics"></iframe>'
            ]
        }]
    }]

/* OLD attempts
    html: '<iframe style="overflow-y: scroll; -webkit-overflow-scrolling: touch"     width="1000px" height="1200px"     src="http://mvretail.assistly.com/customer/portal/topics/118700-mobile-basics"></iframe>'

    html:    '<div  style="overflow-y: scroll; -webkit-overflow-scrolling: touch"><iframe     width="1000px" height="1000px"   src="http://mvretail.assistly.com/customer/portal/topics/118700-mobile-basics"></iframe>  </div>'
*/

});

Best Answer

Ah, a familiar problem. After trying and trying for ages, I've figured this one out. Here's a link to the blog post I made to help solve this for everyone else (and myself

Tech-Talk-Tone : Scrolling External Webpages in Sencha Touch with iFrames & More

Here's the fix ::

Ext.Ajax.request({
                url: ‘your/external/web/page/url.html’,
                success: function(response, opts) {
                    Ext.getCmp(‘YourPanelId’).update(response.responseText);
                }
});

To make this work for external links, you need to enable either Cross Domain or Cross Browser Ajax requests on the server that you host the app on (or Phonegap). Once you do that, it works fine :)

Related Solutions

Html – iframe prevents iScroll scrolling on mobile Safari

I found the perfect solution. Works great on iOS and Android.

The basic idea is to put a div layer on top of that iframe. This way scrolling works smoothly.

If the user wants to tap/click on an element on that iframe I simply catch that click on the layer, save the x and y coordinates and trigger a click event on the iframe's content at these coordinates:

HTML:

<div id="wrapper">
    <div id="layer"></div>
    <iframe id="theIframe"></iframe>
</div>
Other stuff

CSS:

#layer{
    position:absolute;
    opacity:0;
    width:100%;
    height:100%;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:2
}

JavaScript:

$('#layer').click(function(event){
    var iframe = $('#theIframe').get(0);
    var iframeDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;

    // Find click position (coordinates)
    var x = event.offsetX;
    var y = event.offsetY;

    // Trigger click inside iframe
    var link = iframeDoc.elementFromPoint(x, y);
    var newEvent = iframeDoc.createEvent('HTMLEvents');
    newEvent.initEvent('click', true, true);
    link.dispatchEvent(newEvent);
});

Html – How to get an IFrame to be responsive in iOS Safari

The solution for this problem is actually quite simple and there are two ways to go about it. If you have control over the Content.html then simply change the div#ScrolledArea width CSS to:

        width: 1px;
        min-width: 100%;
        *width: 100%;

Basically the idea here is simple, you set the width to something that is smaller than the viewport (iframe width in this case) and then overwrite it with min-width: 100% to allow for actual width: 100% which iOS Safari by default overwrites. The *width: 100%; is there so the code would remain IE6 compatible, but if you do not care for IE6 you can omit it. Demo

enter image description here

As you can see now, the div#ScrolledArea width is actually 100% and the overflow: scroll; can do it's thing and hide the overflowing content. If you have access to the iframe content, then this is preferable.

However if you do not have access to the iframe content (for what ever reason) then you can actually use the same technique on the iframe itself. Simply use the same CSS on the iframe:

    iframe {
        width: 1px;
        min-width: 100%;
        *width: 100%;
    }

However, there is one limitation with this, you need to turn off the scrollbars with scrolling="no" on the iframe for this to work:

<iframe height="950" width="100%" scrolling="no" src="Content.html"></iframe>

If the scrollbars are allowed, then this wont work on the iframe anymore. That said, if you modify the Content.html instead then you can retain the scrolling in the iframe. Demo

Best Answer

Related Solutions

Html – iframe prevents iScroll scrolling on mobile Safari

Html – How to get an IFrame to be responsive in iOS Safari

Related Topic