How to access the <img /> in document from iframe?

javascript jquery html css iframe

13,386

Solution 1

Try

$("#Iframe1").contents().find("img").css({
    'width': '100%',
    'height': '90%'
});

.css()

.find()

.contents()

Solution 2

You can do this:

$('#Iframe1').contents().find('img').css({'width':'100%','height':'90%'});

.contents() will provide you the contents of the iframe and .find() finds you the image and the .css() is used to apply the style to the found image.

Solution 3

Non-jQuery option

This question is very similar to this one

Based on the answered question on the link above, you can try that:

var image = window.frames['Iframe1'].document.getElementByTagName('img')[0];
image.styles.width = '100%';
image.styles.height = '90%';

Solution 4

You are using an iframe to load an image. The reason there is a document->html->body->img is because your browser is formatting the request for an image into proper HTML.

This may be obvious (and not what you're after), but for this particular request, you should use the img tag:

<img src="../Images/landingpage.jpg" id="img1" alt="Image 1">

You can then easily change the width and height, as you would any other element in your site.

Solution 5

#document is just a virtual document generated by your browser, because you point directly to the image - so you can't access it by this id-looking tag.

Can't you just resize the iFrame?

$('#Iframe1').css({
  'width'  : '100%', 
  'height' : '90%'
});

And you might need some CSS so the image in the iFrame is always as big as the iFrame:

iframe img {
  height: 100%;
  width: 100%;
}

View more solutions

13,386

Author by

Joseph

#SOreadytohelp ASP.net mvc C# , SQL Server,Flex 3

Updated on June 24, 2022

Comments

Joseph almost 2 years
I have an iframe
```
<iframe src="../Images/landingpage.jpg" id="Iframe1" name="ifrmContent" class="ifrmClass">
</iframe>
```
I found in inspector element that img tag lies in "#document" which has body tag
```
<html>
    <body style="margin: 0px;">
        <img style="-webkit-user-select: none;" src="../Images/landingpage.jpg">
    </body>
</html>
```
I need to access this img("landingpage.jpg") in order to change(image is small.. need to resize) its width to 100% and height:90%

I have tried using #Iframe1>#document>html>body>img{width:100%;}