how to select tags within an iframe using jquery?

Question

I'm trying to figure out how to select, and then modify, the HTML within an iframe I generate. The iframe displays various media (images, pdfs, etc.). To show different items, I initially create it using something like this:

$('#mydiv').html("<iframe id='myiframe' src='path/file.jpg'></iframe>");

and then, as needed, update its contents using something like this:

$('#myiframe').attr("src","path/newfile.jpg");

this produces HTML like this (as seen through Chrome's elements viewer):

<div id='mydiv'>
  <iframe id='myiframe' src='path/file.jpg'>
    #document
      <html>
        <body style="margin:0">
          <img style="-webkit-user-select:none" src="path/file.jpg">
        </body>
      </html>
  </iframe>
</div>

I want to select that dynamically generated <img> tag so that I can adjust its width. But I can't figure out the jquery selector to do it. Ideas?

is there a reason the jpg is being included in an iframe and not in an img/div with background-image? — circusdei
– circusdei, Commented May 21, 2012 at 19:53
blender has it. sometimes the iframe shows an onsite or offsite PDF, for example. — mix
– mix, Commented May 21, 2012 at 19:55
see like question--> stackoverflow.com/questions/1088544/… — circusdei
– circusdei, Commented May 21, 2012 at 19:56

Seth Flowers · Accepted Answer · 2012-05-21 20:01:19Z

13

Use jQuerys contents method. The docs even has an example titled "Change the background colour of links inside of an iframe."

Get the children of each element in the set of matched elements, including text and comment nodes.

Applied to your code:

var images = $('#myiframe').contents().find('img');

The real question is why do you need the iframe in the first place?

answered May 21, 2012 at 20:01

Seth Flowers

9,2302 gold badges34 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

adeneo Over a year ago

Correct answer, +1. And you where a few seconds faster then me!

adeneo · Accepted Answer · 2012-05-21 20:01:41Z

4

You need to get the contents of the iFrame first :

$("#myiframe").contents().find('img');

answered May 21, 2012 at 20:01

adeneo

319k29 gold badges410 silver badges392 bronze badges

Comments

justlost · Accepted Answer · 2012-05-21 19:59:11Z

0

If all you want to do is dynamically change an image in a container, you don't need the iframe.

You just need a an img tag on your own html that you can update it's src attribute.

$('#my-image')
    .attr('src', '/path/to/image')
    .attr('width', '100px')
    .attr('height', '100px');

unless you haven't told us a good reason to generate an iframe just for an image. Playing with iframes like that can be painful specially when calling URLs from other domains

answered May 21, 2012 at 19:59

justlost

1938 bronze badges

Collectives™ on Stack Overflow

how to select tags within an iframe using jquery?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related