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?
You need to get the contents of the iFrame first :
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.
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
Use jQuerys contents method. The docs even has an example titled "Change the background colour of links inside of an iframe."
Applied to your code:
The real question is why do you need the iframe in the first place?