onkeydown crossbrowser on IFRAME?

Question

Hello, before to post i try to search a solution in this site and by google but with now luck.

I have a issue with IE8, this code below add on the fly an IFRAME and work fine in Chrome, Firefox and IE7.

The problem is the keyHandler() function that is not triggered only in IE8.

What is the best solution to attach an event crossbrowser as onkeydown?

(also Safari and Opera will be nice to support, will be IE9 also supported with this code?)

p.s. i currently use prototype.js, the embeded blank.htm have the contenteditable on and the properly DOCTYPE -> (also in the main page where the function is called)

I post the code below and thanks in advance for suggestion and tips

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

Hmm. Several issues with your code.

1. Don't use document.all. It's completely redundant these days.
2. When using addEventListener, the event type does not have the "on" prefix, so you want 'keydown' instead of 'onkeydown'.
3. Test the objects you're about to use rather make inferences from the existence of unrelated objects. Test addEventListener directly.
4. The branching for Chrome and Firefox is unnecessary. You can use contentWindow in all recent browsers, although it's non-standard (contentDocument.defaultView is the standard).
5. The keydown handler can be applied to the iframe's document in all browsers.

I wonder if the IE 8 problem might be that document.all may have been removed, but I don't really know. I haven't used document.all in any code since 1999.

The other possibility that occurs to me is that window.frames uses the name of the frame rather than its ID.

UPDATE

Apologies, I didn't test my code. Having now tested it, I realised that it's harder than I remembered. You can't safely attach the keydown handler until the iframe document has loaded, which makes things a little tricky. The easiest thing to make it work in all browsers is to handle the load event in blank.htm and call a function on the main page:

In blank.htm, add the following:

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

In the main document:

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