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

There are 6 errors being reported in your console. What are they? — jackfrankland, Apr 19 '14 at 19:55

score 9 · Answer 1 · answered Apr 09 '14 at 05:03

9

Try

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

.css()

.find()

.contents()

answered Apr 09 '14 at 05:03

Tushar Gupta - curioustushar

58,085
24
103
107

i tried this and debugged.But no change is visible !! – Joseph Apr 09 '14 at 05:17
1

@Joseph you should see console for error . Image shows you have 6 errors . – Tushar Gupta - curioustushar Apr 21 '14 at 03:06

Amit Joki · Answer 2 · 2014-04-09T05:11:57.953

8

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.

edited Apr 09 '14 at 05:11

answered Apr 09 '14 at 05:02

Amit Joki

58,320
7
77
95

1

@Joseph this will only work in same domain , cross domain policy will stop you to change anything outside your server. – ProllyGeek Apr 17 '14 at 03:14
@pollyGeek i think i messed up somewhere with the js libraries ! im still trying to find if its any other mistake.. the given answers look correct(but m not sure) – Joseph Apr 17 '14 at 04:25

score 5 · Answer 3 · edited May 23 '17 at 12:10

5

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

edited May 23 '17 at 12:10

Community

1
1

answered Apr 20 '14 at 10:29

roshiro

770
1
5
9

score 2 · Answer 4 · answered Apr 19 '14 at 20:11

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.

score 1 · Answer 5 · answered Apr 17 '14 at 03:09

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

score 1 · Answer 6 · answered Apr 17 '14 at 03:17

1

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

just in case the height is overwritten by class assignment.

answered Apr 17 '14 at 03:17

ProllyGeek

15,517
9
53
72

score 1 · Answer 7 · answered Apr 19 '14 at 19:41

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

score 1 · Answer 8 · answered Dec 18 '21 at 09:56

<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

score 0 · Answer 9 · answered Apr 21 '14 at 06:13

0

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

answered Apr 21 '14 at 06:13

k961

577
1
5
19

score -1 · Answer 10 · edited May 23 '17 at 10:34

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.

How to access the in document from iframe?

10 Answers10

Linked