Size programatically created iframe within jQuery UI dialog

Question

I have an issue I can't seem to solve, and I'd like some pointers.

So, I have, in JS, an URL.

The aim is to open a jQueryUI dialog containg an iFrame containing that URL.

The dialog should be as small as possible to fit the iFrame content without scrolling.

I have read something in an other question (Adjust width height of iframe to fit with content in it), suggesting:

iframe = iframe[0];
iframe.width  = iframe.contentWindow.document.body.scrollWidth;
iframe.height = iframe.contentWindow.document.body.scrollHeight;

but I can't get it to work.

Indeed, the iFrame content does not exist until the dialog is created and by then, it's too late, and changing the iframe size does not change the dialog size.

Here is a fiddle with my progress on this issue.

https://jsfiddle.net/587mj6oy/

Thanks a lot for your help,

Maxime

score 0 · Answer 1 · answered Oct 03 '16 at 15:52

0

You can use css to set the height and width of the iframe. Is the image going to be dynamic or a static size?

iframe { height:300px;width:300px;}

answered Oct 03 '16 at 15:52

alanmbarr

142
2
7

That would have been too easy! Basically, it's a table with a certain number of rows, and I can't know the number of rows before the frame is opened. – Maxime Oct 03 '16 at 15:54

score 0 · Answer 2 · answered Oct 03 '16 at 16:52

0

Try this:

var img = new Image();
img.src = input_link;

img.onload = function() {
   iframe.width(this.width);
   iframe.height(this.height);
}

answered Oct 03 '16 at 16:52

Marcos Alexandre Sedrez

537
3
13

Firstly, do you need to load the image and get the size after. – Marcos Alexandre Sedrez Oct 03 '16 at 17:00

Size programatically created iframe within jQuery UI dialog

2 Answers2