Geek Answers Handbook

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

enter image description here I have iframe

<iframe src="../Images/landingpage.jpg" id="Iframe1" name="ifrmContent" class="ifrmClass"> </iframe>

In the inspector element, I found that the img tag is in "#document", which has a 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") to change (the image is small .. need to be resized) its width is up to 100% and height: 90%

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

+6
source share
9 answers

You can do it:

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

.contents() will provide you with iframe content and .find() will find the image and .css() used to apply style to the found image.

+8
source

Try

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

.css ()

.find ()

.contents ()

+7
source

Non jQuery parameter

This question is very similar to this one.

Based on the answer to the link above, you can try the following:

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

You use an iframe to load the image. The reason is that there is a document-> html-> body-> img, because your browser formats the image request in the correct HTML.

This may be obvious (and not what you need), but for this specific request you should use the img tag:

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

Then you can easily change the width and height, like any other element of your site.

+2
source

Make sure your $ ("# Iframe1") selector is executed 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%'}); });
+1
source 
 $('#Iframe1').contents().find('img').css({'width':'100% !important','height':'90% !important'});

just in case the height will be overwritten by the purpose of the class.

+1
source

#document is just a virtual document created by your browser because you are pointing directly at the image, so you cannot access it with this shortcut.

Can i resize an iFrame?

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

And you may need some CSS, so an image in an iFrame will always be the size of an iFrame:

 iframe img { height: 100%; width: 100%; }
+1
source

if the resource loaded in the iframe is in your domain you can change it using jquery

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

but if it is downloaded from another domain, you cannot access it using scripts on the client side

0
source

No need to access iframes, just use CSS3.

Add these properties to the body or html (which is in 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 prefer 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%'});

fooobar.com/questions/967354 / ...

Just to be sure of that: http://en.wikipedia.org/wiki/Same_origin_policy

Hope this help is in some way.

0
source

More articles:


All Articles