Tag Catch Size Other TAG

Question

Tag Catch Size Other TAG

Asked 9 years, 3 months ago

Viewed 345 times

3

I wonder if there is in CSS, or JS something that makes a TAG that takes up space, make the TAG 'father' adapt to the size of the TAG 'daughter'. Ex:

<iframe>
   <body>o Body possuí um tamanho que varia de acordo com o conteúdo ex 1000px</body>
</iframe>

Iframe if I don’t add a height (this height can’t be %), specifying the size, it gets 100px; there’s something in CSS that requires iframe to adapt to the body tag size, remembering that I don’t have access to iframe, it belongs to another domain... that with css or JS...

I’ve tried with JS,

Which domain you’re loading into Iframe?

– Miguel Angelo

2015/04/03 at 18:43
http://www.google.com/cse?cx=partner-pub-8463297176934444%3Alw4pr6i52rx&cof=FORID%3A10&ie=UTF-8&q=google#gsc.tab=0&gsc. q=google&gsc. page=1

– abcd

2015/04/03 at 18:54
Doubt is interesting, but the question is based on wrong concepts. What is loaded in IFRAME is not inside the IFRAME tag, it is a completely separate document. Unless I have misunderstood, what you want is to adjust an IFRAME to your content, confirms?

– Bacco

2015/04/03 at 23:42
That’s right, because by default google adds 1820pxheight in the iframe, with this leaves room in the post until you do not want more. It would be ideal if I used a screen 240px (X); but on PC does not roll, it gets too much white space. I can modify the iframe attributes, but I can’t adapt it to what has """inside that""" tag... for example, add a height: 100%, This doesn’t work, I tried a lot of things and none of them worked.

– abcd

2015/04/04 at 13:48
@abcd, can you tell what kind of service you are consuming from google? maybe I can suggest something.

– Tobias Mesquita

2015/08/27 at 14:22
@Tobymosque I’m using Adsense search: http://www.google.com/cse?cx=partner-pub-8463297176934444%3Alw4pr6i52rx&cof=FORID%3A10&ie=UTF-8&q=google#gsc.tab=0&gsc. q=google&gsc. page=1

– abcd

2015/08/31 at 00:03
Try to define the width and height from father tag to auto, and then specify the sizes min and max for both of us.

– Edilson

2015/09/28 at 01:21

Show 2 more comments

1 answer

Browser other questions tagged javascript jquery css iframe

You are not signed in. Login or sign up in order to post.

by Rafael Almeida • **2,585** points · Answer 1 · 2015-04-22T01:26:18+00:00

This is not possible via CSS as it only changes the style of the elements, does not interpret their values. The height: 100% causes the element (in this case, iframe) is 100% tall compared to the window that is displaying the site. To achieve your goal, you need to manipulate the element after it is loaded.

Using jQuery we can know when the iframe has just been loaded, and then after that, we can change your height:

$("iframe").on('load', function() { 
    // Pega a altura total do documento do iframe
    var newHeight = $("iframe").contents().find("body").height() + "px";
    $("iframe").css('height', newHeight);
});

It is important to note that obtaining the elements from within an iframe is only possible if the website you are opening in iframe is on the same domain as yours. For this reason I could not host the example in Jsfiddle, so I left it in a folder on my site so you can analyze it better: http://rafaelalmeidatk.com/demos/so/56902-teste_iframe/

Observing:

Do not place the code inside a function $(document).ready([...], because pressing F5, the iframe will return to the initial size and the code will not be executed. To resolve this, leave the code outside any scope.