IFRAME 上的 onkeydown 跨浏览器？

Question

在发布之前，我尝试在本网站和谷歌上搜索解决方案，但现在很幸运。

我在使用 IE8 时遇到问题，下面的代码会即时添加 IFRAME，并且在 Chrome、Firefox 和 IE7 中运行良好。

问题是 不只在 IE8 中触发的 keyHandler() 函数。

将事件跨浏览器附加为 onkeydown 的最佳解决方案是什么？

（Safari 和 Opera 也会很好地支持，IE9 是否也支持此代码？）

附言我目前使用 prototype.js，嵌入的 blank.htm 具有 contenteditable on 和正确的 DOCTYPE ->（也在主页中函数被调用）

我在下面发布代码，并提前感谢您的建议和提示

function addFrame() {
var editorFrame = 'myEditor', iFrame;

var newFrame = new Element('iframe', {width: '320px', height: '70px',id: editorFrame, name: editorFrame, src:'/blank.htm'});

$('container').appendChild(newFrame);

if(document.all) {
    iFrame = window.frames[editorFrame];

    if (window.document.addEventListener)
        iFrame.document.addEventListener('keydown', keyHandler, false);
    else 
        iFrame.document.attachEvent('onkeydown', keyHandler);  // OK IE7
}
else {
    // OK Firefox, Chrome
    iFrame = $(editorFrame).contentWindow;
    iFrame.addEventListener('keydown', keyHandler, false);
}

}

Answer 1

嗯。您的代码有几个问题。

1. 不要使用document.all。现在完全是多余的。
2. 使用addEventListener 时，事件类型没有“on”前缀，因此您需要“keydown”而不是“onkeydown”。
3. 测试您将要使用的对象，而不是根据不相关对象的存在进行推断。直接测试addEventListener。
4. Chrome 和 Firefox 的分支是不必要的。您可以在所有最新的浏览器中使用contentWindow，尽管它不是标准的（contentDocument.defaultView 是标准的）。
5. keydown 处理程序可应用于所有浏览器中的 iframe 文档。

我想知道 IE 8 的问题是否可能是 document.all 可能已被删除，但我真的不知道。自 1999 年以来，我没有在任何代码中使用过 document.all。

我想到的另一种可能性是 window.frames 使用框架的 name 而不是它的 ID。

更新

抱歉，我没有测试我的代码。现在测试了它，我意识到它比我记忆中的要难。在 iframe 文档加载之前，您不能安全地附加 keydown 处理程序，这使事情变得有些棘手。让它在所有浏览器中工作的最简单的方法是处理blank.htm 中的load 事件并在主页上调用一个函数：

在blank.htm中，添加以下内容：

<script type="text/javascript">
    window.onload = function() {
        parent.iframeLoaded();
    };
</script>

在主文档中：

function addFrame() {
    var editorFrame = 'myEditor', iFrame;

    var newFrame = new Element('iframe', {
        width: '520', // width and height properties do not have units
        height: '200',
        id: editorFrame,
        name: editorFrame,
        src: 'blank.htm'
    });

    $('container').appendChild(newFrame);

    window.iframeLoaded = function() {
        var iframeDoc, UNDEF = "undefined";
        if (typeof newFrame.contentDocument != UNDEF) {
            iframeDoc = newFrame.contentDocument;
        } else if (typeof newFrame.contentWindow != UNDEF) {
            iframeDoc = newFrame.contentWindow.document;
        } else {
            throw new Error("Unable to access iframe document");
        }

        if (typeof iframeDoc.addEventListener != UNDEF) {
            iframeDoc.addEventListener('keydown', keyHandler, false);
        } else if (typeof iframeDoc.attachEvent != UNDEF) {
            iframeDoc.attachEvent('onkeydown', keyHandler);  // OK IE7
        }
    };
}