set the width of a div inside an inner iframe using jquery *without* having an id on the iframe

Question

I have the following code:

<iframe>
  <div id="inner_div">
    Here's some text!
  </div>
</iframe>

I know that if I had an id on the iframe, I could follow the steps here to get an accessor to "#inner_div" and I could just set the height/width from there.

I also know that I could use a tag selector as stated here if I don't have a parent id.

But the problem with the second method is that when I call

$('iframe')[0]

in my code, it returns an HTMLIFrameElement, which isn't a jQuery object (so I can't use .find or any other jQuery magic on it). I've also tried wrapping that in text and passing it to the jQuery object to re-parse it as a DOM element, but that doesn't work either.

So is there any way to still get jQuery goodness to run on the inside of the iFrame?

Answer 1

$($('iframe')[0])

will turn your first iframe into a jQuery object.

A more jQuery-ish solution would be

$('iframe').first()

You should note that (unless your iFrame loads content from the same domain) you are very likely to run into cross domain policy issues (which, in short, means that you won't be able to access the iFrame's content).

Answer 2

$($('iframe')[0]).contents().find('#inner_div').css("width", "some_value");