javascript – Tag take size from another tag

Question:

I would like to know if there is in CSS, or JS, something that makes a TAG that takes up space, to make the 'father' TAG adapt to 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>

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

I've already tried it with JS,

Answer:

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

Using jQuery we can know when the iframe finishes loading, 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 is important to note that obtaining elements from within an iframe is only possible if the site you are opening in the iframe is on the same domain as yours. For this reason I couldn't host the example on JSFiddle, so I left it in a folder on my website so you can analyze it better: http://rafaelalmeidatk.com/demos/so/56902-teste_iframe/

Observation:

Do not put the code inside a $(document).ready([...] , because when you press F5, the iframe will go back to its initial size and the code will not be executed. To solve this, leave the code outside of any scope.

Post Views: 4
Scroll to Top