关于使用Iframe自适应高度

最新推荐文章于 2024-06-14 15:13:12 发布

Sokasa_BiuBiuBiu

最新推荐文章于 2024-06-14 15:13:12 发布

阅读量562

点赞数

分类专栏：前端小笔记文章标签： iframe 自适应高度 jsp 报表 css

本文链接：https://blog.csdn.net/qq_36273946/article/details/77017508

版权

前端小笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

项目中有一个需求是这样的，在一个JSP页面同时展示多张报表，并且提供打印功能。另外还可以通过复选框选择对应的报表内容进行展示或者打印

一、考虑到所有的报表都是使用某个报表制作器制作而成，CSS样式统一，因此多个报表之间就算使用不同的DIV进行包裹区分也会出现样式错乱的问题。后一个报表会将前一个报表覆盖，导致前面的报表样式错乱，能正确展示的报表只有一个。

因此，在这样的需求下，使用Iframe将报表进行一个区分存放是最好不过的选择。因为Iframe之间属于不同的“域”,互相之间的HTML代码不会相互污染。即，A页面里面包含了B,C,D,E。4个JSP页面。
`

<style>
        .checked_box{
            text-align: center;
        }
</style>
<style type="text/css" media="print">
        .print_ing{
        //打印的时候隐藏不相关的内容，比如打印按钮以及各种复选框==
            display : none;
        }
</style>
<!--注意这里的class： print_ing样式-->
<!--功能按钮区-->
<div class="checked_box print_ing" id="aaa">
            <button onclick="print123()">打印</button>
            <input type="checkbox" id="c1" onchange="fnChange(this)" checked="checked" value="A_jsp">报表1</input>
            <input type="checkbox" id="c2" onchange="fnChange(this)" checked="checked" value="B_jsp">报表2</input>
            <input type="checkbox" id="c3" onchange="fnChange(this)" checked="checked" value="C_jsp">报表3</input>
            <input type="checkbox" id="c4" onchange="fnChange(this)" checked="checked" value="D_jsp">报表4</input>
            <input type="checkbox" id="c5" onchange="fnChange(this)" checked="checked" value="E_jsp">报表5</input>
</div>
<!--报表内容区-->        
<div id="A_jsp" style="height:300px; margin-left: 15px;margin-right: 15px;">
            <center>    
             <report:html name="A_jsp" srcType="file" 
                XXXXX           
             /> 
           </center>
        </div>
  <!-- 通过Iframe引入 其余剩下4个报表,这里每个Iframe是要通过Src的方法返回一个完整的JSP页面的-->
  <iframe width="100%" id="B_jsp"  frameBorder=0 scrolling=no   src="Action的命名空间+方法的命名空间"></iframe>
  <iframe width="100%" id="C_jsp"  frameBorder=0 scrolling=no   src=""></iframe>
  <iframe width="100%" id="D_jsp"  frameBorder=0 scrolling=no   src=""></iframe>
  <iframe width="100%" id="E_jsp"  frameBorder=0 scrolling=no   src=""></iframe>

<!-- Iframe的高度需要在javascript里面动态设置-->
<script type="text/javascript">
//在加载子页面时,动态获取每个子页面的真实高度。这里通过<center> 标签获取。这里之所以用<center>而不用"<body>",是因为在使用了某些前端框架后,body的高度并不是我们想要的高度。这里的高度取值要根据具体情况而定，但是大致的取值思想都是差不多的。
$(document).ready(function(){
    $("iframe").load(function(){   
    //有些报表自带的iframe不存在<center>。因此这里需要做判断
    if($(this).contents().find("center")[0]){
    //关键代码，根据HTML的报表内容动态设置Iframe的高度
            $(this).height($(this).contents().find("center")[0].clientHeight+40); 
        }
    });
});
//复选框关联报表内容
function fnChange(e){
    if($(e).is(':checked')){
        $("#"+$(e).val()).show();
    }else{
        $("#"+$(e).val()).hide();
    }
}
//打印
function print123(){
//  调用浏览器自身的打印方法,打印当前整个页面。
    window.print();
}

</script>