jquery listen for events in an iframe

Question

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>

please o please, use the firebug, to debug ur code, alert was used by jesus :) by `current value` u mean the `src` value which is = "edit.html" if so `$('#text').attr('src');` returns edit.html — Val, Feb 24 '11 at 14:06
@Val - alert still alerts the data - I use it from time to time because I cannot be buggered to type `console.log(whatever);`. Besides, I'm sure that's only temporary? — Barrie Reader, Feb 24 '11 at 14:17
ok how about this `var log = function (str){ console.log(str) }` only put that once :) then use it as `log(watever)` — Val, Feb 24 '11 at 14:26
alert still works and is quick to type... I want to get the 'contents' of the edit.html file, not the attr(src) of the iframe. — Tim, Feb 24 '11 at 14:49
http://api.jquery.com/contents/ it explains and it works on my chrome, i think ur binding the keyup on the wrong place, try `$('#text').contents().find('body,html').bind....` and let me know if that does the trick, btw body,html is for cross browser :) — Val, Feb 24 '11 at 15:02
@Val: Still nothing, unfortunately..!!! Are you able to upload yours, perhaps? — Tim, Feb 24 '11 at 15:21
Here @tim check this link http://jsfiddle.net/823pJ/ click the iframe and then press any key, do u have a textarea or something like that on ur edit.html file? — Val, Feb 24 '11 at 15:25
No it's just a blank page which calls this onLoad for the body: function InitializeIFrame() { document.body.contentEditable = true; } — Tim, Feb 24 '11 at 15:27
so u tried the code i gave u, u clicked on the blank iframe, and then hit [anykey] right ? and it does not work ?, if u dont create a test page and then send me the link so i can check sourcecode — Val, Feb 24 '11 at 15:32
Ah ok, taking out edit.html works... I will update my question with what edit.html looks like. Thanks for the help — Tim, Feb 24 '11 at 15:36
the problem is that we can't see any errors u might get, the script looks and feels like it should work, but what happens when u try to type on the edit.html page? — Val, Feb 24 '11 at 15:49
The alert comes back fine in IE, just not Chrome. No errors are returned or anything... just radio silence! :\ — Tim, Feb 24 '11 at 15:57

score 13 · Accepted Answer · edited Apr 28 '16 at 19:18

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.

@Tim - Also make sure that the function declaration in the parent is read by the browser before the iframe is loaded, or else you will have JS error son the page and it won't work. — Swanidhi, Jul 14 '14 at 13:40

score -1 · Answer 2 · answered Feb 24 '11 at 15:43

One of the most annoying things about javascript is that document.frames["frameID"] returns a different object than document.getElementById("frameID"). (which is what you get when you use $("#frameID"))

This distinction is probably why you're running into cross-browser issues. You'll likely need to mess around with different ways of accessing the iframe contents until you find one that works correctly.

jquery listen for events in an iframe

2 Answers2