代码之家 › 专栏 › 技术社区 › Luka Milani

iFrame上的OnKeyDown CrossBrowser?

internet-explorer-8 iframe events javascript

1

Luka Milani · 技术社区 · 16 年前

在发帖之前,我试着在这个网站和谷歌上搜索一个解决方案,但现在运气好了。

我对IE8有意见 下面这段代码添加了一个iframe,可以在chrome、firefox和ie7中正常工作。

问题是keyhandler()函数 仅在IE8中未触发 .

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

(此外,Safari和Opera将很好地支持,IE9是否也支持此代码?)

P.S.I目前使用 冲突问题 ,嵌入 白炽灯 有 内容可编辑 以及正确的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);
}

}

1 回复 | 直到 16 年前

1

3

Tim Down 16 年前

嗯,你的代码有几个问题。

不要使用 document.all . 这几天完全是多余的。
使用时 addEventListener ,事件类型没有“on”前缀,因此您需要“keydown”而不是“on keydown”。
测试您将要使用的对象,而不是从不相关对象的存在中进行推断。试验 添加事件侦听器 直接。
Chrome和Firefox的分支是不必要的。你可以使用 contentWindow 在所有最近的浏览器中,尽管它是非标准的( contentDocument.defaultView 是标准的)。
这个 keydown 处理程序可以应用于所有浏览器中的iframe文档。

我想知道IE8的问题是不是 所有文件 可能已经被移走了,但我不知道。我还没用过 所有文件 1999年以来的任何法规。

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

更新

抱歉,我没有测试我的代码。经过测试,我意识到这比我记忆中的要难。你不能安全地连接 键盘按下 处理程序,直到加载了iframe文档,这使得事情变得有点棘手。使其在所有浏览器中工作的最简单方法是处理 load 事件在 blank.htm 并调用主页上的函数:

在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
        }
    };
}