CODEWITHSUNDEEP
javascriptjqueryhtmlcssiframe
Joseph
Joseph

Reputation: 849

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

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

Upvotes: 9

Views: 16986

Answers (10)

Nitin Pawar
Nitin Pawar

Reputation: 11

<iframe id='portfoliosrc' src='' onload="frameloaded();"></iframe>

function frameloaded(){ 
  var iframe = document.getElementById("portfoliosrc");
  var elmnt = iframe.contentWindow.document.getElementsByTagName("img")[0];
  elmnt.style.width = "100%";
  elmnt.style.height = "100%";
}

This worked for me

Upvotes: 1

roshiro
roshiro

Reputation: 780

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

Upvotes: 5

Marcos Eusebi
Marcos Eusebi

Reputation: 637

Isn't necessary to access the iframe, just use CSS3.

Add those properties to the body or html (wich is into the iframe).

background: url("../Images/landingpage.jpg") no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

http://css-tricks.com/perfect-full-page-background-image/

Anyway, if you preffer pure Javascript you can do this:

//Remember than the element should support percentage height.
var tmp = window.frames['IframeID'].document.getElementById('ImgID').styles;
tmp.width="100%";
tmp.height="90%";

Also, in jquery:

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

https://stackoverflow.com/a/22953160/1107020

Just to be sure read this: http://en.wikipedia.org/wiki/Same_origin_policy

Hope than this help in some way.

Upvotes: -1

k961
k961

Reputation: 587

if the resource loaded in the iframe is in your domain you can modify it with jquery's 

.contents().find('img').css()

but if its loaded from another domain you can't access it with client side scripting

Upvotes: 0

jackfrankland
jackfrankland

Reputation: 2062

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.

Upvotes: 2

Sebastian G. Marinescu
Sebastian G. Marinescu

Reputation: 2394

#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%;
}

Upvotes: 1

ProllyGeek
ProllyGeek

Reputation: 15836

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

just in case the height is overwritten by class assignment.

Upvotes: 1

logikal
logikal

Reputation: 1141

Make sure that your $("#Iframe1") selector is being done after the iframe has finished loading.

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

or for readability

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

Upvotes: 1

Amit Joki
Amit Joki

Reputation: 59232

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.

Upvotes: 8

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57105

Try

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

.css()

.find()

.contents()

Upvotes: 9

Related Questions