Question

In my application, I have an iframe and I would like to give it access to some functionality which changes the state of the application outside the iframe. This functionality must be triggered by a keydown event either inside or outside the iframe.

In the iframe, I have the following code:

window.init = function (api) {
    api.bind(document);
};

And the outer application does something like:

iframe.contentWindow.init({
    bind: function (element) {
        $(element).bind('keydown', function () {
            debugger;
        });
    }
});

With this, init is called properly, but the keydown event handler is never called. What am I doing wrong?

Answer 1

The problem is that some part of the iframe has already attached a keydown handler which stops propagation of the event, preventing the event from reaching the document and preventing the handler from being called. Nothing was wrong with the actual binding.