Keyup Event Not Triggered When iFrame in Focus

Question

Let me start by saying I have no control over the iframe.

Like "stumbling" I let the user navigate to the next page by using the right arrow key.

The problem is that if the user has clicked anywhere inside of the iframe window, the keyup event on the containing document is ignored.

<script type="text/javascript">
$(document).ready(function() {
    $(document).on('keyup', null, function(event) {
        var stumblenext = $('#stumblenext');
        if (event.keyCode == 39) { top.location=stumblenext.attr('href'); }
        if (event.keyCode == 37) { history.back(); }
    });
});
</script>

Answer 1

When you detect that the focus is on the iframe change the focus to some other element on your page.

Script :

function changeFocus() {
    if (document.activeElement == document.getElementsByTagName("iframe")[0]) {
        document.getElementById("YOUR_ID").focus();
    }
}

window.setInterval(changeFocus, 1000); // Set time accordingly

Answer 2

Try binding keyup on the iframe as well.

$(document, $("#idOfiFrame").contents()).on('keyup', null, function(event) {
        var stumblenext = $('#stumblenext');
        if (event.keyCode == 39) { top.location=stumblenext.attr('href'); }
        if (event.keyCode == 37) { history.back(); }
    });