滚动问题与ExtrS 5应用程序在IFrame内 [英] Scrolling issues with ExtJS 5 app inside IFrame
问题描述
Hy，
这是我的测试页面的样子：
this is what my test page looks like:
蓝色区域是父页面和绿色区域是运行ExtJS应用程序的IFrame（具有内部标签的简单视口）。
The blue area is the parent page and the green area is an IFrame which runs an ExtJS application (simple viewport with a label inside).
如果网站在触摸设备（IPad，Android平板电脑等）上执行，则不会可能通过IFrame（绿色区域）上的擦除滚动页面。
If the site is executed on a touch device (IPad, Android Tablet etc) it's not possible to scroll the page by "wiping" on the IFrame (the green area). One has to wipe on the blue area to scroll the page.
在ExtJS v4.2.1中已经正常工作（请参阅下面的链接）。
This had been working correctly in ExtJS v4.2.1 (see links below).
测试站点：
https://skaface.leo.uberspace.de/ScrollTest/Ext510/ （不按预期工作，使用ExtJS v5.1.1）
https://skaface.leo.uberspace.de/ScrollTest/Ext421/ （按预期工作，相同的代码，但使用ExtJS v4.2.1）
https://skaface.leo.uberspace.de/ScrollTest/Ext510/ (not working as expected, using ExtJS v5.1.1)
https://skaface.leo.uberspace.de/ScrollTest/Ext421/ (working as expected, same code but using ExtJS v4.2.1)
测试代码：
父站点（index.html） ：
Parent site (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）：
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中工作得很好。
I'd really appreciate a workaround for this since it practically makes my sites useless on mobile devices even though they had been working perfectly fine with ExtJS 4.2.1.
谢谢&最好的问候
Thanks & best regards
Ps .:我已经发布了一个错误报告中的Mobile-device-scrolling-issue-when-in-IFrame =nofollow noreferrer>，但是由于我没有得到任何帮助，直到知道，我也在尝试我的运气在stackoverflow ...
Ps.: I've already posted a bug report in the sencha forums, but since I didn't get any help there until know, I'm also trying my luck on stackoverflow...
推荐答案
在框架内大量挖掘之后，我终于找到了一个至少工作的解决方案对于我来说，包含两个步骤：
After a lot of digging around inside the framework, I finally found a solution which at least works for me and consists of 2 steps:
1）ExtJS设置视口的CSS属性 touch-action IFrame的基本html元素），其身体的值为 none 。
我刚刚用 auto 的值覆盖：
1) ExtJS sets the CSS property touch-action of the viewport (the base html element of the IFrame) and its body to the value none.
I've simply overwritten it with the value auto:
.x-viewport, .x-viewport > .x-body {
touch-action: auto;
}
2）类 Ext.container.Viewport 调用 Ext.plugin.Viewport.decorate（this）; 在它的创建回调中，它将一个监听器添加到 touchmove 视口本身的事件。
2) The class Ext.container.Viewport calls Ext.plugin.Viewport.decorate(this); in it's creation callback, which adds a listener to the touchmove event of the viewport itself.
监听器所做的一切都是调用事件的 preventDefault（）; ，这就是滚动不会在父页面或IFrame本身上工作。
我的修复只是删除 preventDefault（），而是从返回事件处理程序让事件引起浏览器链： false touchmove
Everything that listener does is calling preventDefault(); of the event, which is the reason why scrolling doesn't work anymore on the parent page or the IFrame itself.
My fix simply removes the preventDefault() and instead returns false from the touchmove event handler to let the event bubble up the browser chain:
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);
}
});
});
我不太确定这两个修补程序是否有负面影响，但到目前为止，他们似乎做了为我工作。
I'm not quite sure if those 2 fixes have any negative implications but so far they seem to do the job for me.
我曾经意识到的一件事是，使用配置 scrollable：true IFrame-App仍然存在问题，但是由于我可以避免这一切，所以到目前为止我并不关心...
One thing I did realize is that using components with the config scrollable: true inside the IFrame-App still makes problems but since I can avoid that pretty much everywhere it's no issue for me so far...
工作测试站点： https://skaface.leo.uberspace.de/ScrollTest/Ext510_fixed/
编辑：
调整后的解决方案有一点不会在触摸时不断地引发未处理的JavaScript错误，滚动（请参阅错误：无法在EventTarget上执行dispatchEvent）
这篇关于滚动问题与ExtrS 5应用程序在IFrame内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
