Sencha Touch :: как создать панель для предварительного просмотра веб-сайта внутри iFrame - PullRequest
3 голосов
/ 26 мая 2011

Мне нужно разрешить некоторые предварительные просмотры веб-сайта в приложении sencha touch.Я вижу две разные возможности:

  1. открытие приложения safariMobile для отображения ссылки
  2. , создающей панель с iFrame внутри свойства html.

, потому что я не знаю, как достичь 1. Я начал с 2., но столкнулся с некоторыми проблемами:

a) содержимое моего iFrame не прокручивается.если я пытаюсь прокрутить содержимое, прокручивается весь видовой экран, включая мои кнопки tab-panPanel!

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

Спасибо за помощь!

Ответы [ 2 ]

3 голосов
/ 25 мая 2012

Я провел два дня, борясь с той же проблемой. Кажется, наконец-то я нашел решение.

Первое, что вы должны попробовать - это использовать новую встроенную функцию, представленную в iOS 5.

-webkit-overflow-scrolling:touch;

Вам нужно обернуть свой iframe с помощью div, что-то вроде:

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

Источник второго решения здесь

2 голосов
/ 20 сентября 2011

Единственный способ заставить это работать - это вставить <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;" 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>']
           }]
...