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>
Answer
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.