jquery listen for events in an iframe

Asked 24/2, 2011 at 14:2 Answered 24/2, 2011 at 16:16

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>

Goatskin answered 24/2, 2011 at 14:2 Comment(12)

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 – Breather 24/2, 2011 at 14:6

@Breather - 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? – Stoush 24/2, 2011 at 14:17

ok how about this var log = function (str){ console.log(str) } only put that once :) then use it as log(watever) – Breather 24/2, 2011 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. – Goatskin 24/2, 2011 at 14:49

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 :) – Breather 24/2, 2011 at 15:2

@Val: Still nothing, unfortunately..!!! Are you able to upload yours, perhaps? – Goatskin 24/2, 2011 at 15:21

Here @tim check this link 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? – Breather 24/2, 2011 at 15:25

No it's just a blank page which calls this onLoad for the body: function InitializeIFrame() { document.body.contentEditable = true; } – Goatskin 24/2, 2011 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 – Breather 24/2, 2011 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 – Goatskin 24/2, 2011 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? – Breather 24/2, 2011 at 15:49

The alert comes back fine in IE, just not Chrome. No errors are returned or anything... just radio silence! :\ – Goatskin 24/2, 2011 at 15:57

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.

Gamache answered 24/2, 2011 at 16:16 Comment(1)

@Goatskin - 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. – Poinciana 14/7, 2014 at 13:40

-1

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.

Pvc answered 24/2, 2011 at 15:43 Comment(0)

Recommended topics

Hot tags