一個iframe的尺寸不符合實際的內容

很簡單，我需要的白框的高度和寬度正好與iframe的文本，我可怎麼辦呢？

function resizeIframe (iframeContentWidth, iframeContentHeight) { 
 
    var container = window.frameElement.parentElement; 
 
    if (container != parent.document.body) { 
 
     container.style.width = iframeContentWidth + 'px'; 
 
     container.style.height = iframeContentHeight + 'px'; 
 
    } 
 
    window.frameElement.style.width = iframeContentWidth + 'px'; 
 
    window.frameElement.style.height = iframeContentHeight + 'px'; 
 
    return; 
 
}

html { 
 
    background-color: #fff 
 
} 
 
div { 
 
    background-color: #000; 
 
display: inline-block; 
 
}

<div> 
 
    <iframe src="http://190.216.202.35/rxp/mobilpxr.php?stopid=502102" height="85px" width="250px" scrolling="no" frameborder="0"> 
 
</div>

來源

2015-10-09 Nicolas Tenorio

如果IFRAME源不在[同一域（HTTPS：//developer.mozilla。 org/en-US/docs/Web/JavaScript/Same_origin_policy_for_JavaScript）與父頁面，沒有什麼可以做的。 – Teemu

是同一個域 –

然後[this]（http://stackoverflow.com/a/11807287/1169519）可能有幫助嗎？雖然我不知道，但如何計算頁面的重量（=質量）; ）。可能你的意思是「寬度」？ – Teemu

首先，這是很好的知道，怎麼你在你的HTML工作中使用的元素。

每個瀏覽器都有自己的iframe默認大小，如果大小不是由屬性或CSS給出的，則使用它。通常尺寸在300x200附近。加載到iframe中的文檔的主體將調整其加載的iframe的寬度，並根據內容定義高度，如果未定義主體的大小。

div元素是一個塊級元素，默認情況下它的父元素的寬度爲100％，高度取決於內容高度。但是，當寬度將根據div的內容設置時，可以通過爲div設置CSS屬性display: inline-block來更改此設置。

客戶端沒有簡單的方法來檢測任意內容在被解析之前被加載的大小，因此我們必須等待這種情況發生。我們可以等待iframe在父頁面（=包含iframe的頁面）上完成加載和解析，或者我們可以在iframe中完成。後者簡化了引用，因此我們將在以下示例中使用它，即所有以下代碼都必須包含在加載到iframe的文件中。

的IFRAME的主體：

<div> 
    <span class="title">Capri A2</span> 
    <br /> 
    <span class="big">Rutas aquí: | P17 | E31 | T31 | E21</span> 
</div>

I幀在iframe調整：

window.onload = function() { 
    var bodyWrapper = document.querySelector('div'), 
     size; 

    // Adapt the size of bodyWrapper to its content. If needed, an absolute size can be set too. 
    bodyWrapper.style.display = 'inline-block'; 

    // Get the size information of bodyWrapper 
    size = bodyWrapper.getBoundingClientRect(); 

    // Set the iframe size 
    frameElement.style.width = size.width + 'px'; 
    frameElement.style.height = size.height + 'px'; 

    // Done! 
    return; 
}

來源

2015-10-09 22:11:14 Teemu

tnks是答案，但高度太短，我怎麼修復它 –

嘗試修復'div'中的無效HTML（無效標籤'
'，和丟失在'iframe'中關閉'span'標籤）。您可以從我的示例中複製粘貼正確的代碼。 – Teemu

我修好了，但高度還是錯的 –

試試這個，希望它能夠解決您的問題。

設置的iframe "height:auto"

來源

2015-10-09 20:08:30 CreativePS

nop，沒有工作，但tnks –

一個iframe的尺寸不符合實際的內容

回答

相關問題