Tag get size of another TAG

Question

Tag get size of another TAG

Navigation

#1 by (1 votes)

3

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

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

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

I have tried with JS,

javascript jquery css iframe

asked by anonymous 03.04.2015 / 20:24

1 answer

Problem with Spring MVC + javascript How to create an executable in java + MySQL database?

score 1 · Answer 1

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

Using jQuery we can know when the iframe ends up being loaded, and then after that, we can change its 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's important to note that fetching elements from within an iframe is only possible if the site you are opening in the iframe is in 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 for you to analyze better: link

Note:

Do not put the code inside a $(document).ready([...] function, because when you press F5, the iframe will return to the initial size and the code will not execute. To resolve this, leave the code out of any scope.