How do I dynamically apply scripts and css rules to an iframe?

I have an iframe that I dynamically set the source of. Upon retrieving the content to be displayed in this iframe, I need to be able to do a few modifications to its DOM, apply a few CSS rules, and then display it.

I tried two things (Assume the id of the iframe is content)

1. $("#conten开发者_C百科t").attr("src", urlToFetch); $("#content").load(function() { doSomething(); });

2. $("#content").attr("src", urlToFetch); $("#content").ready(function() { doSomething(); });

The first one displays the page, then applies the changes and re-renders it. The second one applies the changes, displays the changed page, but re-renders to the original page.

Any idea how I can make it to behave the way I want?

You could try using the jQuery frameReady plugin.

http://code.google.com/p/chamilo/source/browse/main/inc/lib/javascript/jquery.frameready.js?spec=svn.classic.39a2ef8dd8332b3680a10b24c922d8676c991aeb&repo=classic&r=39a2ef8dd8332b3680a10b24c922d8676c991aeb

http://huuah.com/jquery-and-iframe-manipulation/