Add event to iframe body

Question

I am setting up a own made wysiwyg plugin for jQuery. He is almost finished but know i want to add a keyup event to a iframe with designmode on. But i can't get it worked. I tryied almost everything a found on the internet. The class of the wysiwyg iframe with designmode is .dhwysiwyg. I though the next code will work:

$(function () {
$('.dhwysiwyg', container).keyup(function () {
// the script
});
});

But this won't work. The keyup event don't exists.

Can someone help me?

Tom

Answer 1

Does the page in your iframe load its own copy of jQuery? If so, try this in your outer page (the page with the iframe in it, not the page in the iframe):

$(function() {
  var frameWindow = $('.dhwysiwyg').get(0).contentWindow;
  frameWindow.$('body').keyup(function() {
    // handler
  });
});

Answer 2

I'm not sure about the particulars of your example, but I know that pushing events to an iFrame will sometimes violate the security policy of your browser.

Answer 3

I've never heard of this "design mode" thing (only contentEditable) but your problem might be a security limitation. What are the iframe contents, and are they on the same domain?

Answer 4

this method work for me

$(function() {
      var frameWindow = $('.dhwysiwyg').get(0).contentWindow;
      $(frameWindow.document).delegate("body",'keyup',function() {
      var bodycontent=$(frameWindow.document.body).text();
    });
});