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

Posted 2023-02-26

【中文标题】sencha touch :: 如何在 iFrame 中创建用于网站预览的面板

【英文标题】：sencha touch :: how to create a panel for website-preview inside iFrame

【发布时间】：2011-05-26 13:41:54

【问题描述】：

我需要在 sencha touch 中允许一些网站预览。我看到了两种不同的可能性：

打开 safariMobile-app 以显示链接 在“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   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);

谢谢你的帮助！

【参考方案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

【参考方案2】：

我让它工作的唯一方法是将<iframe>嵌套在2个面板中，但这可能只有在您知道<iframe>中文档的尺寸时才有效，我还放置了一个透明的<div>在<iframe> 上，所以触摸事件仍然会触发“滚动事件”

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;"   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;"   src="' this.theLink + '"></iframe>']
           ]

【讨论】：

它确实滚动，但是当我向下滚动时，视口外的 iframe 内容无法呈现。

使用 sencha touch 2.0 可能已经解决了这个问题