sencha touch ::如何在iFrame中创建网站预览面板 [英] sencha touch :: how to create a panel for website-preview inside iFrame

问题描述

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

I need to allow some website previews inside sencha touch. I see two different possibilities:

1. 打开safariMobile-app以显示链接


2. 生成面板在'html'属性中有一个iFrame。

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

because I don't know how to achieve 1. I started with 2. but run into some trouble:

a）我的iFrame的内容不可滚动。如果我尝试滚动内容，整个视口会滚动，包括我的bottom-tabPanel-Buttons！

a) the content of my iFrameis not scrollable. if I try to scroll the content, the whole viewport scrolls, including my bottom-tabPanel-Buttons!

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

b) the displayed website seems to load without any css or images

这是我的previewPanel代码：

here is my previewPanel-code:

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为您提供帮助！

thnx for your help!

推荐答案

我花了两天时间来解决同样的问题。似乎最终我找到了一个解决方案。

I spent two days fighting with the same problem. It seems that finally I found a solution.

首先应该尝试使用iOS 5中引入的新内置功能。<​​/ p>

The first thing you should try is to use new built-in feature introduced in iOS 5.

-webkit-overflow-scrolling:touch;

您需要使用div包装iframe，例如：

You need to wrap your iframe with div, something like:

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

如果它不起作用（在我的情况下它只是第一次工作）那么你可以尝试自己处理触摸事件。假设你在html中有以下结构：

If it doesn't work (in my case it worked only first time) then you can try to handle touch events by yourself. Let's say you have the following structure in html:

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

使iframe可滚动你需要添加这个JS

to make iframe scrollable you need to add this 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;
});

第二个解决方案的来源是此处

Source of the second solution is here

这篇关于sencha touch ::如何在iFrame中创建网站预览面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！