如何获取iframe的内容宽度？

Question

如何获取iframe的内容宽度？

5

我的页面中有一个iframe，像这样：

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

我希望能够检测IFrame内容是否大于600像素。我尝试了这个：

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

这段代码在Firefox和Internet Explorer上可以运行，但是在Chrome上无法正常工作。在Chrome上，iframe.contents().width()的结果为600。

我尝试了iframe.contents().find('body').width()，但结果仍然为600。

如何在Chrome中检测iframe内容的真实宽度？

- Magus

$('iframe').outerWidth() 显示什么？ - Thariama

3个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Thariama · Answer 1

我猜你想获取tinymce iframe的宽度。你可以尝试使用这段代码片段。还需要完成的是将插入符设置为最右侧位置。思路是测量插入符位置。

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) );

- marbor3 · Answer 2

尝试在加载 iframe 后添加宽度检查，就像建议的这里一样。

对我来说起作用了。

- markus · Answer 3

我不使用jQuery，但也许可以帮助你：

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

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