2012-01-12 57 views
2

我试图在我的sencha触摸应用中的iframe中加载外部网页。该网页的动态高度,所以我需要在sencha触摸应用程序内滚动iframe。我已经能够让页面滚动,但底层iframe不会呈现任何网页内容低于最初的viewport。这是我的代码。有人有任何想法吗?在滚动的sencha触摸应用中显示iframe

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

}); 
+1

我碰到同样的问题,任何更新? @Josh – virsir 2012-03-06 12:34:13

回答

0

啊,一个熟悉的问题。经过多年的努力和尝试之后,我发现了这一点。下面是对博客文章的链接我,以帮助解决这个其他人(和我

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

这里的修复::

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

为了使这项工作对外部链接,你需要在你主持应用程序的服务器(或Phonegap)上启用跨域或跨浏览器Ajax请求。一旦你这样做,它工作正常:)

+0

只有在访问相同来源的内容或启用了CORS的情况下才会这样。 – 2013-12-16 16:45:32