вопросы Scrolling с ExtJS 5 приложения внутри IFrame

Hy,вопросы Scrolling с ExtJS 5 приложения внутри IFrame

это то, что моя тестовая страница выглядит следующим образом:

enter image description here

Синяя область является родительской страницы и зеленая зона является IFrame, который запускает приложение ExtJS (простой видовой экран с меткой внутри).

Если сайт выполнен на сенсорном устройстве (IPad, Android Tablet и т. Д.), Прокручивание страницы «протиранием» на IFrame (зеленой зоне) невозможно. Чтобы прокрутить страницу, нужно протирать синюю область.

Это правильно работало в ExtJS v4.2.1 (см. Ссылки ниже).

Тест-сайты:

https://skaface.leo.uberspace.de/ScrollTest/Ext510/ (не работает, как ожидалось, с использованием ExtJS V5.1.1)
https://skaface.leo.uberspace.de/ScrollTest/Ext421/ (работает как и ожидалось, тот же код, но с использованием ExtJS v4.2.1)

Тест-код:

сайт родитель (index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%;"> 
<head> 
    <title>Test</title> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
</head> 
<body style="margin: 50px; background-color: blue;"> 
    <iframe src="frame.html" width="100%" height="1400" style="border: none;"></iframe> 
</body> 
</html>

IFrame (frame.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%;"> 
<head> 
    <title>Test</title> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 

    <link rel="stylesheet" type="text/css" href="https://extjs.cachefly.net/ext/gpl/5.1.0/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all-debug.css" /> 
    <script type="text/javascript" src="https://extjs.cachefly.net/ext/gpl/5.1.0/build/ext-all-debug.js"></script> 

    <script type="text/javascript"> 
     Ext.onReady(function() { 
      Ext.create('Ext.container.Viewport', { 
       style: { 'background-color': 'yellowgreen' }, 
       layout: 'fit', 
       items: [{ 
        xtype: 'label', 
        text: 'Ext version: ' + Ext.versions.extjs.version, 
        margin: 16 
       }] 
      }); 
     }); 
    </script> 
</head> 
<body> 
</body> 
</html>

Я действительно ценю обходной путь для этого, так как он практически делает мои сайты бесполезен на мобильных устройствах, даже если бы они работали прекрасно с ExtJS 4.2.1.

Благодаря & наилучшими пожеланиями

Ps .: Я уже отправил сообщение об ошибке in the sencha forums, но так как я не получил никакой помощи там, пока знаю, я также пытаюсь мое счастье на StackOverflow ...

источник

2015-07-03 suamikim

[Делегированные события и жесты в Ext JS 5] (https://www.sencha.com/blog/delegated-events-and-gestures-in-ext-js-5/) – davidcondrey

Почему вы не можете просто полностью удалите внешний контейнер и просто покажите внутренний контент напрямую, используя накладку 50px на корпусе или тому подобное? – BoffinbraiN

@davidcondrey Спасибо за ссылку, я посмотрю на нее на следующей неделе. – suamikim

После много копался в рамках, я, наконец, нашел решение, которое, по крайней мере работает для меня, и состоит из 2-х этапов:

1) ExtJS устанавливает свойство CSS touch-action видового экрана (базового элемента html IFrame) и его тела до значения none. Я просто переписан его со значением auto:

.x-viewport, .x-viewport > .x-body { 
    touch-action: auto; 
}

2) Класс Ext.container.Viewport вызовов Ext.plugin.Viewport.decorate(this); в его создании обратного вызова, который добавляет слушатель к touchmove события самого просмотра.

Все, что прослушиватель делает, вызывает preventDefault(); события, из-за которого прокрутка больше не работает на родительской странице или самой IFrame. Мой фикс просто удаляет preventDefault() и вместо этого возвращает false из обработчика событий touchmove, чтобы пузырек события вверх по цепочке браузера:

Ext.define('Cbn.overrides.container.Viewport', { 
    override: 'Ext.container.Viewport' 
}, function() { 
    Ext.override(this, { 
     onRender: function() { 
      this.mon(Ext.getDoc(), { 
       touchmove: function(e) { 
        // e.preventDefault(); // Original ExtJS code 
        return false; 
       }, 
       translate: false, 
       delegated: false 
      }); 
      this.callParent(arguments); 
     } 
    }); 
});

Я не совсем уверен, что если бы эти 2 исправления какие-либо негативные последствия, но до сих пор они, похоже, выполняют эту работу для меня.

Одна вещь, которую я понимаю, что использование компонентов с конфигурации scrollable: true внутри IFrame-приложения по-прежнему создает проблемы, но так как я могу избежать этого почти везде это не проблема для меня до сих пор ...

Дрессировка -site: https://skaface.leo.uberspace.de/ScrollTest/Ext510_fixed/

Edit:
Скорректированный раствор немного не постоянно бросать необработанное ошибки JavaScript при контакте прокрутки (см Error: Failed to execute 'dispatchEvent' on 'EventTarget')

источник

2015-07-14 12:31:14 suamikim

поведении материала странно, я видел его перед использованием niceScroll плагин, и многие другие плагины были также и тот же вопрос с iframe, во всяком случае проверить this workaround

Я использовал Hammer.js Плагин jQuery для обнаружения жестов касания на вашем iframe, если вы найдете какие-либо вопросы, касающиеся чувствительности (поскольку я не знаю, какие ограничения вы ищете), вы можете настроить параметры hammer.js на их репо (например, порог панорамирования, указатели ..etc)

и код очень прост:

<body id="mainbody" style="margin: 50px; background-color: blue;"> 
    <iframe id="myframe" src="frame.html" width="100%" height="1400" style="border: none;"></iframe> 
</body> 
<script> 
var myBody 
$('iframe').load(function(){ 
    myBody=$(this).contents().find("body"); 
    myBody.css({"height":"100%","overflow":"hidden"}).hammer({threshold:1}).bind("pan", myPanHandler); 
}); 
function myPanHandler(ev) 
{ 
    $("#mainbody").scrollTop($("#mainbody").scrollTop()-ev.gesture.deltaY) 
console.log(($("#mainbody").scrollTop()-ev.gesture.deltaY*0.5)+".."+$("#mainbody").scrollTop()) 
} 
</script>

источник

2015-07-11 12:55:39 ProllyGeek

Я не отмечал этот ответ как принятый, так как он чувствует себя довольно хриплым решением, и я все еще ищу что-то более элегантное, как исправление непосредственно в структуре ExtJS. Тем не менее, это по крайней мере обеспечивает способ, который, вероятно, будет работать, и поэтому я дал награду. – suamikim

вопросы Scrolling с ExtJS 5 приложения внутри IFrame

ответ

Смежные вопросы