如何获取iframe内容宽度？

我的页面中有一个iframe。像这样：如何获取iframe内容宽度？

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

我希望能够检测iframe内容是否大于600px。我试过这个：

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

我怎么能检测的iframe内容真实宽度在Chrome？

来源

2013-02-04 Magus

$（'iframe'）。outerWidth（）show？ – Thariama

它也显示600。 – Magus

我想你想获得TinyMCE的iframe的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));

来源

2013-02-05 09:42:09 Thariama

是的，我使用tinyMCE。但我也使用redactor。但我会试试你的解决方案。 – Magus

我接受您的解决方案，因为它可以与TinyMCE一起正常工作。但是我仍然在寻找没有TinyMCE的“通用”解决方案。 – Magus

这应该很容易，因为您只需要获取所需iframe的窗口，文档和选择，并在我的代码中替换少数编辑器相关的东西 – Thariama

尝试增加宽度的iframe装载后检查，如建议here

它的伎俩我。

来源

2013-02-04 16:04:29 marbor3

-1

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

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

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

来源

2013-02-04 18:04:03 markus

doc.body.scrollWidth仍然是600.但是，如果我有一个HTML内容的div，这个div的scrollWitdh是好的宽度。但是如果html内容有一个元素在这个div浮动之外，宽度仍然是错误的。 – Magus

如何获取iframe内容宽度？

回答

相关问题