在IFrame中滚动ExtJS 5应用程序的问题
sua*_*kim 10 javascript iframe extjs extjs5
HY,
这是我的测试页面的样子:
蓝色区域是父页面,绿色区域是运行ExtJS应用程序的IFrame(内部带有标签的简单视口).
如果站点在触摸设备(IPad,Android平板电脑等)上执行,则无法通过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.:我已经在sencha论坛上发布了一个错误报告,但是因为我知道之前我没有得到任何帮助,所以我也试着在stackoverflow上运气...
经过对框架内部的大量挖掘，我终于找到了一个至少适合我的解决方案，包含两个步骤：
touch-action1) ExtJS 将视口（IFrame 的基本 html 元素）及其主体的CSS 属性设置为 value 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);
}
});
});
我不太确定这两个修复是否有任何负面影响，但到目前为止它们似乎对我有用。
我确实意识到的一件事是，在 IFrame-App 内使用带有配置的组件scrollable: true仍然会出现问题，但由于我几乎可以在任何地方避免这种情况，到目前为止对我来说没有问题......
工作测试站点：https://skaface.leo.uberspace.de/ScrollTest/Ext510_fixed/
编辑：
稍微调整解决方案，以便在触摸滚动期间不会不断抛出未处理的 JavaScript 错误（请参阅错误：无法在 'EventTarget' 上执行 'dispatchEvent'）
| 归档时间： |
|
| 查看次数： |
1328 次 |
| 最近记录： |