iframe的高度自适应

乐之者java

于 2020-04-17 20:49:46 发布

阅读量6.3k

点赞数 7

分类专栏：前端文章标签： js javascript jquery java

本文链接：https://blog.csdn.net/xiaozhuangyumaotao/article/details/105588135

版权

前端专栏收录该内容

175 篇文章 2 订阅

订阅专栏

现在有这样一个情景：a页面需用使用iframe嵌入b页面，而b页面的内容高度是不固定的，有可能是300px,有可能是500px......，这时候我要求在a页面嵌入b页面的区域不能有垂直滚动条，怎么实现呢？很显然，因为被嵌入的b页面高度是不确定的，我们在使用iframe的时候就不能固定iframe这个元素的高度，而是应该写为100%。好，下面我还是用最简单的例子来验证如何完美的解决iframe高度自适应的问题。

a页面的html结构：

<div id="cont">
    <iframe id="tab_iframe" src="iframe_embed.jsp" frameborder="0" height="100%" width="100%"></iframe>
</div>

b页面的html结构：

<!doctype html>
<html>
<head>
   <meta charset="utf-8">
   <title>被嵌入的页面</title>
   <script type="text/javascript" src="<%=request.getContextPath()%>/rs/js/jquery-1.12.4.min.js"></script>
   <style type="text/css">
      .div1{
         border: 1px solid black;
      }
   </style>
</head>
<body>
   <div class="div1">
      <p>我是被嵌入的页面</p>
      <p>我是被嵌入的页面</p>
      <p>我是被嵌入的页面</p>
      <p>我是被嵌入的页面</p>
      <p>我是被嵌入的页面</p>
      <p>我是被嵌入的页面</p>
      <p>我是被嵌入的页面</p>
      <p>我是被嵌入的页面</p>
   </div>
</body>
</html>

到目前为止，访问a页面的效果如图所示：

这时候是有滚动条的，怎么解决呢？考虑在iframe加载完成之后重新设置iframe的高度，在a页面中加入如下js：

document.getElementById('tab_iframe').onload =function () {
    adjustHeight();
};
function  adjustHeight() {
    var iframeEle = $("#tab_iframe").get(0);
    // contentDocument:获取iframe的document对象 contentWindow:获取iframe的window对象
    var iframeDocumentObj = iframeEle.contentDocument || iframeEle.contentWindow.document;
    var height = $(iframeDocumentObj).find("html").outerHeight(true)+30;
    $("#tab_iframe").height(height);
}

再刷新a页面，可以看到已经达到了我想要的效果：

但是现在还有一个问题，如果在被嵌入的b页面中与后台有交互，且这种交互比较费时，在b页面div1里面加入一个段落用来存放后台返回的结果，修改后的b页面html结构：

<!doctype html>
<html>
<head>
   <meta charset="utf-8">
   <title>被嵌入的页面</title>
   <script type="text/javascript" src="<%=request.getContextPath()%>/rs/js/jquery-1.12.4.min.js"></script>
   <style type="text/css">
      .div1{
         border: 1px solid black;
      }
   </style>
</head>
<body>
   <div class="div1">
      <p>我是被嵌入的页面</p>
      <p>我是被嵌入的页面</p>
      <p>我是被嵌入的页面</p>
      <p>我是被嵌入的页面</p>
      <p>我是被嵌入的页面</p>
      <p>我是被嵌入的页面</p>
      <p>我是被嵌入的页面</p>
      <p>我是被嵌入的页面</p>
      <p id="result"></p>
   </div>
   <script>
      $.get("getData",function (data) {
         $("#result").html(data.text);
      });
   </script>
</body>
</html>

其中getData为后台url，java代码如下：

@RequestMapping("/getData") @ResponseBody
public  Map<String, Object> getData(HttpServletRequest request){
   Map<String, Object> map=new HashMap<String, Object>();
   try {
      Thread.sleep(5000);//模拟耗时的业务逻辑
   }catch (Exception e){
      e.printStackTrace();
   }
   map.put("text", "java后<br>台<br>经<br>过<br>一<br>番<br>运算之后返回的数据");
   return  map;
}

这时候页面又有滚动条了：

怎么解决这种情况呢？这时候只需要修改一下被嵌入的b页面的js就可以了：

$.get("getData",function (data) {
   $("#result").html(data.text);
   parent.adjustHeight();//在数据返回之后再调用一下a页面设置iframe高度的函数
});

这样之后，看下效果：

到此为止，就可以完美解决iframe高度自适应的问题

乐之者java

关注

7
点赞
踩
25

收藏

觉得还不错? 一键收藏
1
评论
iframe的高度自适应

现在有这样一个情景：a页面需用使用iframe嵌入b页面，而b页面的内容高度是不固定的，有可能是300px,有可能是500px......，这时候我要求在a页面嵌入b页面的区域不能有垂直滚动条，怎么实现呢？很显然，因为被嵌入的b页面高度是不确定的，我们在使用iframe的时候就不能固定iframe这个元素的高度，而是应该写为100%。好，下面我还是用最简单的例子来验证如何完美的解决iframe高度...
复制链接

扫一扫