2012-01-12 58 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