How to get an iframe contents width?

Question

I got an iframe in my page. Like this :

<iframe width="600px">
    <html>
        <head>
        </head>
        <body>
            <p>Some text</p>
            <img src="/foo/bar/test.png" />
        </body>
    </html>
</iframe>

I want to be able to detect if the iframe contents is larger than 600px. I tried this one :

var iframe = $('iframe');
if (iframe.width() < iframe.contents().width()) {
    console.log('contents larger than the iframe');
}

It works on Firefox and Internet Explorer. But not on Chrome. On Chrome, iframe.contents().width() is 600.

I tried iframe.contents().find('body').width() but the result is also 600.

How can i detect the iframe contents real width in Chrome ?

what does $('iframe').outerWidth() show? – Thariama Feb 04 '13 at 15:36 — Thariama, Feb 04 '13 at 15:36

score 0 · Answer 1 · edited May 23 '17 at 12:01

0

Try adding width checking after loading iframe, like suggested here

it did the trick for me.

edited May 23 '17 at 12:01

Community

1
1

answered Feb 04 '13 at 16:04

marbor3

439
3
13

score 0 · Accepted Answer · answered Feb 05 '13 at 09:42

I guess you want to get the iframe width of a tinymce iframe. You could give this code snippet a try. What still needs to be done is to set the caret to the outer right position. The idea is to measure the caret location.

var ed = tinymce.editors[0]; // or tinymce.get('your_editor_id')
var rng = ed.selection.getRng();
rng.collapse(true);

var bm = ed.selection.getBookmark();
var $marker = $(ed.getBody()).find('#'+bm.id);
var elem = ed.getDoc().getElementById(bm.id+'_start');

try {
    box = elem.getBoundingClientRect();
} 
    catch(e) 
{
    console.log('adjustIframePosition (irbasics) error creating box: ' + e);
}


var doc = ed.getDoc(),
    docElem = doc.documentElement,
    body = ed.getBody(),
    win = ed.getWin(),
    clientTop  = docElem.clientTop  || body.clientTop  || 0,
    clientLeft = docElem.clientLeft || body.clientLeft || 0,
    scrollTop  = win.pageYOffset || jQuery.support.boxModel && docElem.scrollTop  || body.scrollTop,
    scrollLeft = win.pageXOffset || jQuery.support.boxModel && docElem.scrollLeft || body.scrollLeft,
    top  = box.top  + scrollTop  - clientTop,
    left = box.left + scrollLeft - clientLeft;

console.log('iframe width: ' + (box.left + scrollLeft) );

Yes i use tinyMCE. But i also use redactor. But i'll give a try with your solution. — Magus, Feb 05 '13 at 11:43
I accept your solution because it works fine with TinyMCE. But i'm still looking for a "generic" solution without TinyMCE. — Magus, Feb 07 '13 at 14:32
this should be easy, because you only need to get the window, document and selection of the desired iframe and replace the few editor relevant things in my code — Thariama, Feb 07 '13 at 15:31

score -1 · Answer 3 · answered Feb 04 '13 at 18:04

-1

I don't use jQuery, but maybe can help this:

var iframe = document.getElementById("myiframe");
var doc = iframe.contentDocument || iframe.contentWindow.document;

alert(doc.body.scrollWidth); // use this property for check

answered Feb 04 '13 at 18:04

markus

561
4
15

doc.body.scrollWidth is still 600. But if i had a div around the html content, the scrollWitdh of this div is the good width. But if the html content has an element outside of this div float, the width is still wrong. – Magus Feb 04 '13 at 19:20

How to get an iframe contents width?

3 Answers3