如何獲取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內容寬度？

回答

相關問題