ExtJs 5 - 捕获 Ext.ux.IFrame 的 keydown 事件

Posted 2023-02-22

【中文标题】ExtJs 5 - 捕获 Ext.ux.IFrame 的 keydown 事件

【英文标题】：ExtJs 5 - catch keydown event of Ext.ux.IFrame

【发布时间】：2015-03-03 22:56:31

【问题描述】：

在我的 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+）。

感谢您的每一个建议。

小提琴可以在Sencha Fiddle找到。

【参考方案1】：

Ext.ux.Iframe 源没有从 iframe 本身触发的事件。所以不支持这个功能。前段时间有一个ManagedIframe 项目，它提供了更多功能，但仅在 ExtJS 3 中受支持。

可能值得在 Sencha 论坛上搜索一下，看看是否有人尝试更新此扩展以与 ExtJS 5 兼容。