sencha touch ::如何在iFrame內部爲網站預覽創建面板

Question

我需要在sencha touch內部允許一些網站預覽。我看到兩種不同的可能性：

1. 開口safariMobile-應用顯示的鏈接
2. 生成與所述「由HTML屬性內的iFrame的面板。

，因爲我不知道該如何實現1.我開始與2，但遇到一些麻煩：

一）我不iFrameis滾動的內容。如果我嘗試滾動內容，則整個視口會滾動，包括我的底部TabPanel按鈕！

B）所顯示的網站似乎沒有任何CSS或圖片

這裏載入是我previewPanel代碼：

app.views.WebsitePreview = Ext.extend(Ext.Panel, { 
    layout: 'card', 
    scroll: 'vertical', 
    styleHtmlContent: true, 
    fullscreen: true, 

    initComponent: function(){  
     this.html = '<iframe width="100%" height="100%" src="'+ this.theLink + '"></iframe>', 
     var toolbarBase = { 
      xtype: 'toolbar', 
      title: 'Vorschau ' //+ this.childData.childUsername, 
     }; 


     if (this.prevCard !== undefined) { 
       toolbarBase.items = [ 
       { 
        xtype: 'button', 
         ui: 'back', 
        text: 'zurück', //this.prevCard.title, 
        scope: this, 
        handler: function(){ 
         this.baseScope.setActiveItem(this.prevCard, { type: 'slide', reverse: true }); 
        } 
       } 
      ] 
     }; 

     this.dockedItems = toolbarBase; 
     app.views.WebsitePreview.superclass.initComponent.call(this); 
    } 
}); 

Ext.reg('websitepreview', app.views.WebsitePreview); 

日Thnx您的幫助！

Answer 1

我花了兩天時間同樣的問題戰鬥。似乎最終我找到了一個解決方案。

你應該嘗試的第一件事是使用新的內置在iOS中推出的功能5.

-webkit-overflow-scrolling:touch; 

你需要用div來包裝你的iframe，是這樣的：

... 
this.html = '<div style="-webkit-overflow-scrolling:touch; height: 500px; overflow: auto;"><iframe .../></div>' 
... 

如果它不起作用（在我的情況下它只能第一次工作），那麼你可以嘗試自己處理觸摸事件。比方說，你在HTML的結構如下：

<div id="wrapper"> 
    <iframe id="my-iframe" .../> 
</div> 

，使iframe的滾動，你需要添加這個JS

var startY = 0; 
var startX = 0; 
var ifrDocument = document.getElementById("my-iframe").contentWindow.document; 
ifrDocument.addEventListener('touchstart', function (event) { 
    window.scrollTo(0, 1); 
    startY = event.targetTouches[0].pageY; 
    startX = event.targetTouches[0].pageX; 
}); 
ifrDocument.addEventListener('touchmove', function (event) { 
    event.preventDefault(); 
    var posy = event.targetTouches[0].pageY; 
    var h = document.getElementById("wrapper"); 
    var sty = h.scrollTop; 

    var posx = event.targetTouches[0].pageX; 
    var stx = h.scrollLeft; 
    h.scrollTop = sty - (posy - startY); 
    h.scrollLeft = stx - (posx - startX); 
    startY = posy; 
    startX = posx; 
}); 

來源第二個解決方案是here

Answer 2

我得到這個工作的唯一途徑是通過嵌套 2板，但如果你知道文檔的尺寸在這大概只有工作，我還放着一個透明<div>在所以觸摸事件仍然引發了「滾動事件」

root = new Ext.Panel({ 
    fullscreen: true, 
    layout: 'card', 
    version: '1.1.1', 
    scroll: false, 
    dockedItems: [{ xtype: 'toolbar', title: 'hello'}], 
    items: [{ 
     xtype: 'panel', 
     scroll: 'both', 
     items: [{ 
      id: 'iframe', 
      layout: 'vbox', 
      width: '1200px', 
      height: '1000px', 
      html: ['<div style="width:1200px;height:1000px;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="1200px" height="1000px" src="http://google.com/"></iframe>'] 
     }] 
    }] 
}); 

因此，使用代碼：

this.items = [{ 
       id: 'iframe', 
       layout: 'vbox', 
       width: '1200px', 
       height: '1000px', 
       html: ['<div style="width:1200px;height:1000px;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="1200px" height="1000px" src="' this.theLink + '"></iframe>'] 
      }]