解决bootstrap标签页切换中ifram引入的外部链接显示出现问题（layui也差不多）最新更新

先看一段代码：

    

        

            ★销售人员信息
        
        

            ★销售人员评价
        
        

            ★销售人员奖励明细
        
        

            ★工资管理
        
    
    

        

            
        
        

            
        
        

            
        
        

            
        
    

从代码中我们可以看出，我们通过切换tab标签，可以切换通过ifram嵌入不同的网页，显示效果如图：

第一个标签页显示正常，但是我们切换到第二个时，就出现问题了，第三个也是一样，以此类推，只有第一个才是正常的，效果如下：

可以看到，ifram的高也没有撑开，显示内容也出现了问题，没有效果。

那么怎么解决呢。

我们可以想象一下，第一次直接加载，就正常，切换时就不正常了，那么会不会时在切换标签中间的过程中加载有问题。所以我们就这样写代码。

我们加上这样一段代码，去监听标签页切换的事件，在标签页切换还没显示之前重新去对div的高度和ifram的src赋值，经过测试，果然解决了这个问题效果图如下：

2019-9-21：记，更改显示，上面之前会每次都会从新加载数据，现在更新，重新加载记录只记录一次，不重复加载，也是我们更希望得到的效果：

代码改进：

css代码：

iframe {
    width: 100%;
}
.my-fluid{
    width: 100%;
}
.my-nav-top{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3em;
    background-color:#F2F2F2;
}
.my-nav-content{
    margin-top: 3em;
    width: 100%
}
.myTabContent{
    height: 750px;
}

html代码：

    

        

            

                ★巡检资产详情
            
            

                ★巡检项详情
            
        
    
    

        

            

                
            
            

                
            
        
    

代码中不在直接嵌入地址，避免加载时将所有嵌入页面一次性加载出来

js代码：

var index = 0;

$(function () {
    $("#assets").attr("src",prefix+"/pollingAssetsInfoView/"+pollingPlanId);

    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        // 获取已激活的标签页的名称
        var target = $(this).attr('href');
        //设置激活标签对应div的高度
        $(target).css("height","100%");
        //重新设置加载对应标签中ifram的src,解决标签切换ifram嵌套页面的显示问题
        if(target === "#appraise" && index === 0){
            $(document).ready(function () {
                $("#appraise .iframeurl").attr('src',prefix+"/itemView/"+pollingPlanId);
                index ++ ;
            });
         }
    });

})

这里改成用js进行初始化加载，初始时加载第一个页面，也就是active的页面,然后监听标签切换事件，因为第一个加载完成，后续监听判断，只需要对后面的标签页进行监听判断，用index变量记录第二个页面重新加载了几次，只有没有加载才进行重新加载，以此类推，如果后续有多个页面，可以用多个变量记录其他页面的加载次数，只有加载次数为0的才进入if判断重新加载。多个页面的判断的和最早上面的监听判断一样，就是判断target，这样每个页面都只会加载一次。

效果：