在我的 ExtJs 5 应用程序中,我使用 Ext.ux.IFrame 组件来显示来自 Intranet 的新闻 html 文档。 当我按退格键或 alt + 向左/向右时,会触发浏览器的历史导航并加载新的应用程序。
为了防止 iframe 之外的这些行为,我在文档中附加了一个 keydown 监听器
Ext.onReady(function () {
var documentObj = Ext.getDoc();
documentObj.on('keydown', globalKeyDown);
});
在回调中我停止这些事件
globalKeyDown: function (event, targetDomEle) {
var eventKey = event.getKey();
switch (eventKey) {
case event.BACKSPACE:
if ((!/^input$/i.test(targetDomEle.tagName) &&
!/^textarea$/i.test(targetDomEle.tagName)) ||
targetDomEle.disabled || targetDomEle.readOnly) {
event.stopEvent();
}
break;
case event.LEFT:
case event.RIGHT:
if (event.altKey) {
event.stopEvent();
}
break;
}
}
但是当我尝试对 iframe 执行相同操作时,ExtJs 框架的监听方法无法按预期工作。
Ext.application({
name: 'Test',
requires: ['Ext.ux.IFrame'],
launch : function() {
var info = new Ext.Component({
renderTo: document.body,
html: 'above the iframe',
width: 350,
padding: '0 0 20 0',
margin: '0 0 1 0',
style: { border: 'solid 1px blue' },
});
var iframe = Ext.create('Ext.ux.IFrame',{
style: { border: 'solid 1px red' },
width: 350,
height: 350,
renderTo: document.body
});
var iframeDoc = iframe.getDoc();
var iframeDocEl = Ext.get(iframeDoc);
iframeDocEl.on('keydown', function(){
console.log('iframeDoc.on callback'); // <-- never executed
});
iframeDoc.onkeyup = function(){
console.log('onkeyup callback') // <-- works just fine
};
}
});
为什么 iframeDocEl.on('keydown', ...
不适用于这种情况?
iframeDoc.onkeyup 方法只是一种解决方法,因为在回调中我想使用框架事件对象来跨浏览器兼容(IE8+)。
感谢您的每一个建议。
fiddle 可以在 Sencha Fiddle 找到.
最佳答案
Ext.ux.Iframe source 没有从 iframe 本身内部触发的事件。所以不支持这个功能。有一个ManagedIframe不久前的项目提供了更多功能,但仅在 ExtJS 3 中支持。
可能值得在 Sencha 论坛上搜索一下,看看是否有人尝试更新此扩展以与 ExtJS 5 兼容。
关于javascript - ExtJs 5 - 捕获 Ext.ux.IFrame 的 keydown 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27795879/