Question

我正在尝试在我的sencha触摸应用中加载iframe中的外部网页。该网页具有动态高度，因此我需要在sencha touch应用程序中滚动iframe。我已经能够让页面滚动，但底层的iframe不会在初始viewport之下呈现任何网页内容。这是我的代码。有没有人有任何想法？

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>'
*/

});

Answer 1

啊，一个熟悉的问题。经过多年的尝试和尝试，我已经想到了这个。这是我为帮助其他人（以及我自己

）解决这个问题的博客文章的链接

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

这是fix ::

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

要使其适用于外部链接，您需要在托管应用程序的服务器（或Phonegap）上启用跨域或跨浏览器Ajax请求。一旦你这样做，它工作正常:)

通过滚动在sencha touch app中显示iframe

1 个答案: