I’ve been experimenting with some iframe-manipulation with jQuery, but this was not as easy as I have hoped for. There is not much help on jquery.com and a Google search just found others with the same kind of problem.

My setup is very basic. An iframe loading a page like this

<iframe name="framename" id="myframe" src="mypage.html"></iframe>

In the page where this iframe is being loaded, I have included the jquery.min.js and an extra .js-file for my code.

First attempt was to try the examples found on Google. For testing purposes I wanted to set a red background color on every <div> inside the iframe.

var frame = $("#myframe")[0].contentDocument;
$("div", frame).css("background-color", "red");

Nothing happens.

When testing new things I often use alert-boxes for test-output, so I tried inserting an alert-box:

alert("trying a red color");
var frame = $("#myframe")[0].contentDocument;
$("div", frame).css("background-color", "red");

And hey! When pushing the alert-box, the divs inside the iframe gets a red background-color. Or at least they do in Firefox 3.0.11 (still a no-go in IE8). Strange.

Test 2:

$("#myframe").contents().find("div").css("background-color", "red");

Nothing! Blank!

Oh well. Why not try the alert-box again:

alert("trying a red color");
$("#myframe").contents().find("div").css("background-color", "red");

Hmm.. this seems to work in both Firefox 3.0.11 and Internet Explorer 8 IF you don’t push the alert-box until the iframe is finished loading.

So perhaps it’s all about not accessing the iframe before the contents has been loaded. So I tried wrapping the whole thing in a ready-function like this:

$("#myframe").ready(function () {
...
}

That did not help at all.

Well. Google google google. And bingo. There’s a plugin for jQuery called frameReady and this does the trick.

Third and final test:
Include the jQuery.frameReady.js in the main page and enter this code:

$.frameReady( function() {
    $("div").css("background", "red");
  },
  "framename"
);

This loads the iframe and sets a red background color on every div inside the iframe. Tested in IE8 and Firefox 3.0.11.

Conclusion:
Use the frameReady plugin for jQuery when manipulating with iframes.

Update: If you’re having trouble getting this to work, please check the source code for frameReady and verify that the hardcoded path for /js/jQuery.js matches your site configuration!

Tags: iframe, jQuery