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

一个问题我看到的是，在你的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); 
    }

不工作在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而不是这个。我的问题

抱歉不起作用。错误：jquery-3.0.0.js：3781 jQuery.Deferred异常：无法读取null的属性'scrollHeight'TypeError：无法读取属性'scrollHeight'为空 – Yannik

我只在条件.... iframe被iframe替换时才更改。 contentDocument。和你所说的错误与此无关。请检查 – spankajd

我再次检查了它，并将脚本和iframe包含在另一个页面中，并且工作正常，因为该页面需要较长时间来刷新，并且'resizeIframe（）'函数运行iframe的内容时准备好了，我也不例外。 – Yannik

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

相关推荐