Question

在我的 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找到。

Answer 1

Ext.ux.Iframe来源没有从iframe内部触发的事件。所以它不支持这个功能。不久之前有一个ManagedIframe项目，它提供了更多功能，但仅在ExtJS 3中得到支持。

在Sencha论坛上搜索可能值得查看是否有人试图更新此扩展程序以与ExtJS 5兼容。

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

1 个答案: