Search code examples
jqueryiframerte

jquery listen for events in an iframe


I'm making a very simple Rich Text Editor using jquery... I don't want to use a third-party one.

I need to listen for events within an iframe (same domain etc), starting with typing. Apparently I'll need to use bind() a lot.

This is what I've got at the moment which works fine in IE8 (amazingly enough) but not Chrome.

<script>
$(function() {
    $('#text').contents().bind("keyup keydown keypress", function(e) {
        var code = e.keyCode || e.which;
        alert(code);
        return false;
    });
});
</script>

<body>
    <iframe id="text" name="text" src="edit.html"></iframe>
</body>

On the key press event above, I will also want to get the current value of 'edit.html' and update a textarea with that value...

Any help would be MUCH appreciated :)

Many thanks

EDIT: to explain further, edit.html is an editable file using "document.body.contentEditable = true;"

-

EDIT 2:

edit.html =

<script language="javascript">
    function InitializeIFrame() {
        document.body.contentEditable = true;                         
    } 

</script>
<html>
<body onload="InitializeIFrame();">

</body>
</html>

Solution

  • I seem to recall running into a problem when I was trying to communicate with an iframe (same domain etc). The trick I found is to do the binding inside the frame and bind to functions in the main window. Something like this (in edit.html):

    <script>
    $('body').bind("keyup keydown keypress", function(e) {
      window.parent && window.parent.funcKey && window.parent.funcKey(e);
    });
    </script>
    

    and then in the main page something like:

    <script>
    function funcKey(e) {
      var code = e.keyCode || e.which;
      alert(code);
      return false;
    }
    </script>
    

    I realise this does not exactly fit into the way you were trying to do it, but the same effect is achieved. From what I understand of javascript and iframes, in practice it's easier to communicate with a parent than it is to communicate with an iframe. If you really need two-way communication you could (going on the example above) use the return value of the function funcKey() to pass data back into the iframe.