How to access the in document from iframe?

Question

enter image description here 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%;}

Tushar Gupta - curioustushar · Accepted Answer

Try

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

.css()

.find()

.contents()

Amit Joki · Answer

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.

roshiro · Answer

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%';

jackfrankland · Answer

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.

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

Tags:

javascript

html

jquery

css

iframe

Joseph

4 Answers

Tushar Gupta - curioustushar

Amit Joki

roshiro

jackfrankland

Recent Activity

Donate For Us