根據內容更改 iframe 高度

Question

iframe 標簽：

  <iframe scrolling="no" style="height: 956px; width: 100%" frameborder="0" id="ampcontentiframe"></iframe>

我正在嘗試在內容加載時調整 iframe 高度。我嘗試了以下其他解決方案：

鏈接1

鏈接2

鏈接3

但是他們都沒有解決我的問題。我嘗試在窗口加載和 iframe 加載時調用 resize 函數。但是它每次設置的高度不同（有時是實際內容高度，有時是 iframe 的原始高度）。

任何幫助家伙.....??

僅供參考：我也嘗試從 iframe 中刪除滾動屬性。但它沒有用

Answer 1

這是確實比應該解決的難的問題之一。 為了保持iFrame的大小正確，您需要考慮以下幾點。

算出准確的高度

為iFrame獲取准確的高度並不是應該那么簡單，因為您可以選擇六個不同的屬性來進行選擇，但沒有一個能夠提供正確的答案。 只要您不使用CSS來使body標簽溢出，我想出的最好的解決方案就是該功能有效。

function getIFrameHeight(){
    function getComputedBodyStyle(prop) {
        return parseInt(
            document.defaultView.getComputedStyle(document.body, null),
            10
        );
    }

    return document.body.offsetHeight +
        getComputedBodyStyle('marginTop') +
        getComputedBodyStyle('marginBottom');
}

這是IE9版本，有關較長的IE8版本，請參見此答案 。

如果你這樣做溢出身體，你不能修復您的代碼停止這一點，那么無論使用的offsetHeight或scrollHeight的屬性document.documentElement是你的最佳選擇。 兩者都有優點和缺點，最好只是對它們進行測試，看看哪種對您有用。

留言

postMessage API提供了一種簡單的方法來在iFrame及其父級之間進行通訊。

要將消息發送到父頁面，請按以下方式調用它。

parent.postMessage('Hello parent','http://origin-domain.com');

在另一個方向上，我們可以使用以下代碼將消息發送到iFrame。

var iframe = document.querySelector('iframe');
iframe.contentWindow.postMessage('Hello my child', 'http://remote-domain.com:8080');

要接收消息，請為消息事件創建一個事件列表器。

function receiveMessage(event)
{
  if (event.origin !== "http://remote-domain.com:8080")
    return;

  console.log(event.data);
}

if ('addEventListener' in window){
    window.addEventListener('message', receiveMessage, false);
} else if ('attachEvent' in window){ //IE
    window.attachEvent('onmessage', receiveMessage);

這些示例使用origin屬性限制消息發送到的位置並檢查消息的來源。 可以指定*以允許發送到任何域，並且在某些情況下，您可能希望接受來自任何域的消息。 但是，如果這樣做，則需要考慮安全隱患，並對傳入消息進行自己的檢查，以確保它包含您的期望。 在這種情況下，iframe可以將其高度發布為“ *”，因為我們可能有多個父域。 但是，最好檢查傳入消息是否來自iFrame。

function isMessageFromIFrame(event,iframe){
    var
        origin  = event.origin,
        src     = iframe.src;

    if ((''+origin !== 'null') && (origin !== src.substr(0,origin.length))) {
        throw new Error(
            'Unexpect message received from: ' + origin +
            ' for ' + iframe.id + '. Message was: ' + event.data  
        );
    }

    return true;
}

突變觀察者

更現代的瀏覽器的另一項進步是MutationObserver ，它使您可以監視DOM中的更改。 因此，現在可以檢測到可能影響iFrame大小的更改，而不必不斷使用setInterval進行輪詢。

function createMutationObserver(){
    var
        target = document.querySelector('body'),

        config = {
            attributes            : true,
            attributeOldValue     : false,
            characterData         : true,
            characterDataOldValue : false,
            childList             : true,
            subtree               : true
        },

        observer = new MutationObserver(function(mutations) {
            parent.postMessage('[iframeResize]'+document.body.offsetHeight,'*');
        });

    log('Setup MutationObserver');
    observer.observe(target, config);
}

var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

if (MutationObserver){
    createMutationObserver();
}

其他事宜

其他要考慮的事項包括，在頁面上有多個iFrame，CSS：Checkbox和：Hover事件導致頁面調整大小，避免在iFrame的body和html標簽中使用height auto，最后避免調整窗口大小。

iFrame調整程序庫

我將所有這些都包裝在一個簡單的依賴庫中，該庫還提供了一些此處未討論的額外功能。

https://github.com/davidjbradshaw/iframe-resizer

這適用於IE8 +。

Answer 2

您可以嘗試使用以下腳本。

<script type="text/javascript">
  function iframeLoaded() {
    var iFrameID = document.getElementById('your_frame_id');
    if(iFrameID) {            
        iFrameID.height = "";
        iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
   }   
}
</script> 

並在您的iframe中添加onload函數，例如

<iframe onload="iframeLoaded()">

Answer 3

如果要為iframe滾動條，請嘗試此操作

<iframe style="height: 956px;overflow-y:scroll; width: 100%" frameborder="0" id="ampcontentiframe"></iframe>

只需輸入“最小高度”並添加“ overflow-y”道具即可滾動

或者，如果您不想滾動，請嘗試

<iframe scrolling="no" style="min-height: 956px; width: 100%" frameborder="0" id="ampcontentiframe"></iframe>

Answer 4

如果您可以控制 iframe 內容，我強烈建議您使用

調整大小觀察者

只需在iframe的srcdoc屬性末尾插入以下內容，如果需要，將其轉義。

<script type="text/javascript">
var ro = new ResizeObserver(entries => {
  for (let entry of entries) {
    const cr = entry.contentRect;
    // console.log(window.frameElement);
    window.frameElement.style.height =cr.height +30+ "px";
  }
});

ro.observe(document.body);
</script>