同域iframe自适应高度

最新推荐文章于 2025-07-10 16:09:19 发布

最新推荐文章于 2025-07-10 16:09:19 发布 · 123 阅读

文章标签：

#Opera #JavaScript #ViewUI

web 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用JavaScript自适应调整iframe元素高度的方法。通过监听iframe加载完成事件并获取其内部文档的实际高度来动态调整iframe的高度，确保内容完整显示且不出现多余空白。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

function SetCwinHeight(){
  var iframeid=document.getElementById("iframeId");//所要自适应高度的iframe的id
  if (document.getElementById){
   if (iframeid && !window.opera){
    if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight){
     iframeid.height = iframeid.contentDocument.body.offsetHeight;
    }else if(iframeid.Document && iframeid.Document.body.scrollHeight){
     iframeid.height = iframeid.Document.body.scrollHeight;
    }
   }
  }
 }

<iframe   onload="Javascript:SetCwinHeight()"  src="url" 
name="orderInfoFrame" id="orderInfoFrame"  frameborder="0" 
style="Z-INDEX: 1; VISIBILITY: inherit; WIDTH: 100%;" scrolling="no" ></iframe>

注意去掉<iframe> 中的height值，用onload调用所写的js。