sencha touch ::如何在iFrame中创建用于网站预览的面板

问题描述

|| 我需要在sencha touch中允许一些网站预览。我看到两种不同的可能性： 打开safariMobile-app以显示链接 生成一个在\'html \'属性中包含iFrame的面板。 因为我不知道如何实现1.我从2.开始，但是遇到了一些麻烦： a）我的iFrame的内容不可滚动。如果我尝试滚动内容，则整个视口都会滚动，包括我的bottom-tabPanel-Buttons！ 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为您提供帮助！     

解决方法

我花了两天的时间解决同样的问题。看来终于找到了解决办法。 您应该尝试的第一件事是使用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;
});

第二个解决方案的来源在这里     ,使它起作用的唯一方法是将ѭ5嵌套在两个面板中，但这只有在您知道ѭ5中的文档尺寸的情况下才可能起作用，我还在

<iframe>

上放置了透明的

<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\',\'<iframe style=\"position:fixed;top:0;left:0;float:left;z-index:1;\" width=\"1200px\" height=\"1000px\" src=\"\' this.theLink + \'\"></iframe>\']
           }]