jQuery/JS調整iframe不工作的大小

我嘗試用jQuery和JS調整iframe的大小。首先，我從iframe列表中獲取iframe，並在iframe內容準備就緒時調整其大小。jQuery/JS調整iframe不工作的大小

NOTE: The two-steps resize is necessary because otherwise after the content of the iframe-page is a huge space.

問題：在while循環我檢查iframe的內容準備好，當我沒有設置1秒超時。但jQuery不檢查內容是否準備好，它總是進入if，並嘗試調整iframe的大小，但因爲jQuery無法獲得NULL元素的大小而失敗。

有人對我的問題有解決方案嗎？

我的代碼：

$(document).ready(function() { 
    var iframes = $(".my-iframe"); 
    $.each(iframes, function() { 
     resizeIframe(this); 
    }); 
}); 

function resizeIframe(iframe) { 
    $(iframe).width("100%"); 
    var iframeIsReady = false; 
    do 
    { 
     if ($(iframe).ready) 
     { 
      var iframeHeight = iframe.contentDocument.body.scrollHeight; 
      $(iframe).height(iframeHeight); 
      var iframeContentHeight = $(iframe).children("#DivInPage").height(); 
      $(iframe).height(iframeContentHeight); 
      iframeIsReady = true; 
     } 
     else 
     { 
      setTimeout(resizeIframe(iframe), 1000); 
     } 
    }while(!iframeIsReady); 
}

Edit:

Check out my solution

來源

2016-11-29 Yannik

一個問題我看到的是，在你的setTimeout調用你想傳遞給resizeIframe來電，但你調用它，而不是，傳遞的結果。你需要'setTimeout（function（）{resizeIframe（iframe）;}，1000）;' –

你的iframe是否與你的頁面在同一個域上？ –

@Pekka웃是的，但沒有可能在我的頁面中包含iframe的內容而沒有iframe – Yannik

解決辦法是：

$(document).ready(function() { 
     var iframes = $(".my-iframe"); 
     $.each(iframes, function() { 
      resizeIframe(this); 
     }); 
    }); 

    function resizeIframe(iframe) { 
     $(iframe).width("100%"); 
     setInterval(function() { 
      //Check if the Content inside the iframe is ready 
      if ($(iframe.contentDocument.body).ready) { 
       var iframeHeight = iframe.contentDocument.body.scrollHeight; 
       $(iframe).height(iframeHeight); 
       var iframeContentHeight = $(iframe).children("#DivInPage").height(); 
       $(iframe).height(iframeContentHeight); 
       //Close the Function 
       return; 
      } 
     }, 1000); 
    }

來源

2016-11-29 11:52:28 Yannik

不工作在chrom –

@sandeepkumar錯誤是什麼？ – Yannik

您好是在你的代碼小的變化，請檢查以下。

$(document).ready(function() { 
    var iframes = $(".my-iframe")[0]; // $(".my-iframe"); /Edited 
    $.each(iframes, function() { 
     resizeIframe(this); 
    }); 
}); 

function resizeIframe(iframe) { 
    $(iframe).width("100%"); 
    var iframeIsReady = false; 
    do 
    { 
     if ($(iframe.contentDocument).ready) // added 'iframe.contentDocument' instead of iframe 
     { 
      var iframeHeight = iframe.contentDocument.body.scrollHeight; 
      $(iframe).height(iframeHeight); 
      var iframeContentHeight = $(iframe).children("#DivInPage").height(); 
      $(iframe).height(iframeContentHeight); 
      iframeIsReady = true; 
     } 
     else 
     { 
      setTimeout(resizeIframe(iframe), 1000); 
     } 
    }while(!iframeIsReady); 
}

試試這個。

我再次檢查代碼發現$（「。my-iframe」）返回元素對象的數組。我們需要的對象不是數組。所以我硬編碼第0指數。你可以使用id而不是這個。我的問題

來源

2016-11-29 11:09:39 spankajd

抱歉不起作用。錯誤：jquery-3.0.0.js：3781 jQuery.Deferred異常：無法讀取null的屬性'scrollHeight'TypeError：無法讀取屬性'scrollHeight'爲空 – Yannik

我只在條件.... iframe被iframe替換時才更改。 contentDocument。和你所說的錯誤與此無關。請檢查 – spankajd

我再次檢查了它，並將腳本和iframe包含在另一個頁面中，並且工作正常，因爲該頁面需要較長時間來刷新，並且'resizeIframe（）'函數運行iframe的內容時準備好了，我也不例外。 – Yannik

jQuery/JS調整iframe不工作的大小

回答

相關問題