the size of an iframe don't fit the real content

Question

Good afternoon

Is simple, i need the white box height and width fit with the iframe text, how i can do it?

function resizeIframe (iframeContentWidth, iframeContentHeight) {
    var container = window.frameElement.parentElement;
    if (container != parent.document.body) {
        container.style.width = iframeContentWidth + 'px';
        container.style.height = iframeContentHeight + 'px';
    }
    window.frameElement.style.width = iframeContentWidth + 'px';
    window.frameElement.style.height = iframeContentHeight + 'px';
    return;
}

html {
  background-color: #fff
}
div {
  background-color: #000;
display: inline-block;
}

<div>
  <iframe src="http://190.216.202.35/rxp/mobilpxr.php?stopid=502102" height="85px"  width="250px" scrolling="no" frameborder="0">
</div>

If the iframe source is not in [the same domain](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Same_origin_policy_for_JavaScript) with the parent page, there's nothing you can do. — Teemu, Oct 09 '15 at 19:45
Then [this](http://stackoverflow.com/a/11807287/1169519) might help? Though I'm not aware, how the weight (= mass) of a page can be calculated ; ). Probably you mean "width"? — Teemu, Oct 09 '15 at 19:50
Notice, that `iframeContentWidth` and `iframeContentHeight` are dummy variables in the linked answer, you've to calculate and assign correct values to those variables. — Teemu, Oct 09 '15 at 19:56
http://190.216.202.35/prueba/jquery-simplyscroll-2.0.5/test/test_framerate60.html — , Oct 09 '15 at 19:56
Notice also, that the code in the above linked answer is placed within the iframe. It is purposed to be executed there after the iframe page has been parsed. Set `display: inline-block` to the content div, and get the size for example with [`getBoundingClientRect`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) method. — Teemu, Oct 09 '15 at 20:05
I put the correct variables but i dont think the script is do it nothing, but tnks :D — , Oct 09 '15 at 20:26
It would help, if you'd add the script you've tried to the question, we'll see what's wrong. — Teemu, Oct 09 '15 at 20:29
now is there, and is in the web to the same server, remember i need to fit exact whit the text. — , Oct 09 '15 at 20:37
Umh... Looking your live example, the code is not in the iframe. it's on the parent page, and you never do the maths or call the function ... I'll compose a general answer for you about how these things work, it'll take for a while though. — Teemu, Oct 09 '15 at 20:55

Teemu · Accepted Answer · 2015-10-09T22:18:28.690

At first, it's good to know, how the elements you've used in your HTML work.

Every browser has its own default size for iframes, which is used, if the size is not given by attributes or CSS. Usually the size is nearby 300x200. The body of a document loaded into iframe adapts the width of the iframe it was loaded into, and the height is defined according to the content, if any sizing for the body haven't been defined.

A div element is a block level element, which by default takes a width of 100% of its parent element, and the height depends on the content height. However, this can be changed by setting a CSS property display: inline-block for a div, when the width will be set according to the content of a div.

There's no simple way at client side to detect the size of an arbitrary content to be loaded, before it has been parsed, hence we have to wait that happen. We can wait the iframe to finish loading and parsing on a parent page (= the page containing the iframe), or we can do that in the iframe itself. The latter simplifies referencing, so we'll use it in the following example, i.e. all the following code must be included in the file which is loaded to the iframe.

The body of the iframe:

<div>
    <span class="title">Capri A2</span>
    <br />
    <span class="big">Rutas aquí:  | P17 | E31 | T31 | E21</span>
</div>

Iframe resize in the iframe:

window.onload = function () {
    var bodyWrapper = document.querySelector('div'),
        size;

    // Adapt the size of bodyWrapper to its content. If needed, an absolute size can be set too.
    bodyWrapper.style.display = 'inline-block';

    // Get the size information of bodyWrapper
    size = bodyWrapper.getBoundingClientRect();

    // Set the iframe size
    frameElement.style.width = size.width + 'px';
    frameElement.style.height = size.height + 'px';

    // Done!
    return;
}

Try to fix the invalid HTML within the `div` (invalid tag ``, and the missing closing `span` tag) in the `iframe`. You can copy-paste a correct code from my example. — Teemu, Oct 09 '15 at 22:45
I'm sorry, I'm not sure why the height is not correctly set. As a quick-fix, you can increase the height manually: `size.height + 20 + 'px'`. `20` or what ever you need to correct the height. Maybe it has something to do with Google fonts? Have you tried with standard fonts? Aaand there's still a missing closing `span` tag. — Teemu, Oct 09 '15 at 23:04
tks for all your help i change the fonts but dont fix and i dont see the missing span but tnks — , Oct 13 '15 at 15:44
sorry for bother but the solution stop working, and i try to verify why, whit no susses please help @teemu — , Apr 11 '16 at 16:54
@NicolasTenorio For starters, you could check, if the iframe content is still overflowing. In general, these are difficult to solve without knowing the exact code, HTML and CSS you have in your iframe. I'd suggest you to ask a new question, but please include all the needed information. — Teemu, Apr 11 '16 at 17:21

score 0 · Answer 2 · answered Oct 09 '15 at 20:08

0

Try this, hope it will resolve your issue.

Set iframe "height:auto"

answered Oct 09 '15 at 20:08

CreativePS

1,105
7
15

the size of an iframe don't fit the real content

2 Answers2