The following example shows some code somewhere within an iframe with the id
<h1>An example title</h1> Some text that isn't particularly interesting... <ul> <li id="back">previous posts</li> <li id="forward" class="green">next posts</li> </ul>
Apparently the list entry for next posts has the styles for a green button. That’s the way it should look most of the time, but in some cases it has to be red instead. We have to remove the class for the green color and add one for red. Using jQuery that’s done in only one statement:
$("#content") .contents() .find("#forward") .removeClass("green") .addClas("red");
It’s that easy because of jQuery’s
contents() function. Normally the function returns all child nodes from the matched elements, but in case of an iframe you get the whole document that’s loaded into the iframe. Now you can use
find() to locate the elements you need to work with and that’s it.