Javascript使iframe自适应高度

最新推荐文章于 2022-04-19 20:39:19 发布

Day_by_day93

最新推荐文章于 2022-04-19 20:39:19 发布

阅读量625

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/w1019945543/article/details/50884498

版权

JS 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用JavaScript实现主页面上按钮点击触发iframe加载不同页面内容，并通过动态调整iframe高度避免显示滚动条的技术细节。通过自定义函数getData()和setIframeHeight()，实现在不同页面内容加载时自动调整iframe高度，确保用户体验流畅。

摘要由CSDN通过智能技术生成

这是我在网上找的代码，项目中正好用到了，里面还有我项目中用到的例子。

准备工作

我们准备一个主页面a.html，以及两个用于嵌入iframe的页面分别为iframeH.html和iframeH1.html，内容可以自己随便加，实际应用中可能是后台生成的内容。

为了演示，我们在主页面a.html中加入如下代码：

<div class="opt_btn"> 
    <button onclick="getData('iframeH');">加载内容1</button> 
    <button onclick="getData('iframeH2');">加载内容2</button> 
</div> 
<iframe src="iframeH.html" id="ifrm" frameborder="0" width="100%" scrolling="no" marginheight="0" marginwidth="0" onLoad="setIframeHeight(this.id)"></iframe>

我们要实现的是，分别点击两个按钮，iframe中加载不同的内容，iframe中不能出现滚动条。

Javascript

首先我们使用Javascript动态改变iframe的src值，即分别点击两个按钮时，iframe加载不同的页面内容。代码中按钮button分别调用了自定义函数getData()就实现了切换内容的效果。

function getData(ifm){ 
    document.getElementById("ifrm").src = ifm+'.html'; 
}

然后，我们来关注iframe里的内容，因为我们事先不知道iframe的内容高度，如果先设置好iframe的高度height值，很可能当页面内容超长时会出现滚动条，这不是我们想要的。那么我们使用Javascript来动态获取iframe页面高度，然后设置iframe的高度。

在iframe完全加载后即onload，调用setIframeHeight()，iframe内容加载完成后，可获取iframe的高度值，然后重新设置iframe的高度，以下是整理好的代码：

function setIframeHeight(id) { 
     var ifrm = document.getElementById(id); 
     var doc = ifrm.contentDocument? ifrm.contentDocument: 
         ifrm.contentWindow.document; 
     ifrm.style.visibility = 'hidden'; 
     ifrm.style.height = "10px"; // reset to minimal height ... 
     ifrm.style.height = getDocHeight( doc ) + 4 + "px"; 
     ifrm.style.visibility = 'visible'; 
 } 
  
 function getDocHeight(doc) { 
     doc = doc || document; 
     var body = doc.body, html = doc.documentElement; 
     var height = Math.max( body.scrollHeight, body.offsetHeight, 
         html.clientHeight, html.scrollHeight, html.offsetHeight ); 
     return height;

}

例子(1)：

</div>

例子(2):

又遇到这个问题了，但是用例子(1)的方法，抱 ifrm.contentDocument? ifrm.contentDocument: ifrm.contentWindow.document;的错误，找了半天，找到一个可以用的属性，换了一部分代码：

html：

<div class="leftsidebar_box" id="menu_div">
</div>


<div class="content_div tab-control" id="content_div">
<div class="masthead">
<samp id="firstNav">首页</samp><samp id="secondNav"></samp>
</div>
<div class="main">
<iframe name="mainframe" id="mainframe" src="" scrolling="auto" frameborder="0"></iframe>
</div>
</div>

js:

/**
* 非列表时执行的iframe高度判断
*/
$("#mainframe").load(function(){
/* var mainheight = $(this).contents().find("body").height() + 30;
$(this).height(mainheight); */
setTimeout("changeContentHeight()",1000);
});

function changeContentHeight(){
var ifm = document.getElementById("mainframe");
var content = document.getElementById("content_div");
var subWeb = document.getElementById("mainframe").contentWindow.document;
if(ifm != null && subWeb != null) {
var contentHeight = subWeb.body.clientHeight +50;
$("#content_div").css("height",contentHeight+ 50);
$("#mainframe").css("height",contentHeight);
}
}

获取iframe内容高度： document.getElementById("mainframe").contentWindow.document.body.clientHeight