sencha touch:：如何在iFrame内创建网站预览面板

我需要允许一些网站预览内森查触摸。我看到两种不同的可能性：

打开safariMobile应用程序以显示链接

在“html”属性中生成带有iFrame的面板

因为我不知道如何达到1。我从2开始。但是遇到了一些麻烦：

a） iFrame的内容不可滚动。如果我尝试滚动内容，整个视口都会滚动，包括我的底部选项卡面板按钮

b） 显示的网站似乎没有任何css或图像加载

这是我的预览面板代码：

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);

app.views.WebsitePreview=Ext.extend（Ext.Panel{
布局：“卡片”，
滚动：‘垂直’，
styleHtmlContent:对，
全屏：对，
initComponent:函数（）{
this.html=“”，
var Toolbar Base={
xtype:'工具栏'，
标题：'Vorschau'/+this.childData.childUsername，
};
if（this.prevCard！==未定义）{
toolbarBase.items=[
{
xtype:'按钮'，
ui:'返回'，
text:'zurück'，//this.prevCard.title，
范围:本,，
处理程序：函数（）{
this.baseScope.setActiveItem（this.prevCard，{type:'slide'，reverse:true}）；
}
}
]
};
this.dockditems=toolbarBase；
app.views.WebsitePreview.superclass.initComponent.call（this）；
}
});
Ext.reg（'websitepreview'，app.views.websitepreview）；

---

谢谢你的帮助

我实现这一点的唯一方法是将

嵌套在两个面板中，但这可能只有在您知道

中文档的尺寸时才会起作用，我还在

上放置了一个透明的

，因此触摸事件仍然会触发“滚动事件”

root=新的外部面板({
全屏：对，
布局：“卡片”，
版本：“1.1.1”，
卷轴：错，
dockedItems:[{xtype:'toolbar'，title:'hello'}]，
项目：[{
xtype:'面板'，
滚动：“两个”，
项目：[{
id:'iframe'，
布局：“vbox”，
宽度：“1200px”，
高度：“1000px”，
html:[''，
'']
}]
}]
});

因此，使用您的代码：

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>']
           }]

this.items=[{
id:'iframe'，
布局：“vbox”，
宽度：“1200px”，
高度：“1000px”，
html:[''，
'']
}]

我花了两天时间解决同一个问题。看来我终于找到了解决办法

您应该尝试的第一件事是使用iOS5中引入的新内置功能

-webkit-overflow-scrolling:touch;

您需要用div包装iframe，类似于：

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

---

第二个解决方案的来源是

它确实会滚动，但当我向下滚动时，视口外的iframe内容无法渲染。使用sencha touch 2.0它可能已修复此问题

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

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

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;
});