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

先看一段代码：

<div style="width: 100%">
    <ul id="myTab" class="nav nav-tabs">
        <li class="active">
            <a href="#information" data-toggle="tab">★销售人员信息</a>
        </li>
        <li>
            <a href="#appraise" data-toggle="tab">★销售人员评价</a>
        </li>
        <li>
            <a href="#award" data-toggle="tab">★销售人员奖励明细</a>
        </li>
        <li>
            <a href="#salary" data-toggle="tab">★工资管理</a>
        </li>
    </ul>
    <div id="myTabContent" class="tab-content" style="height: 700px">
        <div class="tab-pane fade in active" id="information" style="height: 100%">
            <iframe class="iframeurl" frameborder="0" style="height: 100%" src="sales_person_information.html"  seamless></iframe>
        </div>
        <div class="tab-pane fade" id="appraise">
            <iframe class="iframeurl" frameborder="0" style="height: 100%" src="sales_person_appraise.html"  seamless></iframe>
        </div>
        <div class="tab-pane fade" id="award">
            <iframe class="iframeurl" frameborder="0" style="height: 100%"  seamless></iframe>
        </div>
        <div class="tab-pane fade" id="salary">
            <iframe class="iframeurl" frameborder="0" style="height: 100%"  seamless></iframe>
        </div>
    </div>
</div>

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

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

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

那么怎么解决呢。

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

<script type="text/javascript">
    $(function(){
        $('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 === "#information"){
               $(document).ready(function () {
                   $("#appraise .iframeurl").attr('src','sales_person_information.html');
               });
           }else if(target === "#appraise"){
               $(document).ready(function () {
                   $("#appraise .iframeurl").attr('src','sales_person_appraise.html');
               });
           }else if(target === "#award"){
               $(document).ready(function () {
                   $("#award .iframeurl").attr('src','sales_person_appraise.html');
               });
           }
           else if(target === "#salary"){
               $(document).ready(function () {
                   $("#salary .iframeurl").attr('src','sales_person_appraise.html');
               });
           }
        });
    });
</script>

我们加上这样一段代码，去监听标签页切换的事件，在标签页切换还没显示之前重新去对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;
    z-index: 1000;
}
.my-nav-content{
    margin-top: 3em;
    width: 100%
}
.myTabContent{
    height: 750px;
}

html代码：

<div class="my-fluid">
    <div class="my-nav-top">
        <ul id="myTab" class="nav nav-tabs">
            <li class="active">
                <a href="#information" data-toggle="tab">★巡检资产详情</a>
            </li>
            <li>
                <a href="#appraise" data-toggle="tab">★巡检项详情</a>
            </li>
        </ul>
    </div>
    <div class="my-nav-content">
        <div id="myTabContent" class="tab-content myTabContent">
            <div class="tab-pane fade in active" id="information" style="height: 100%">
                <iframe id="assets" class="iframeurl" frameborder="0" style="height: 100%" seamless></iframe>
            </div>
            <div class="tab-pane fade" id="appraise">
                <iframe id="item" class="iframeurl" frameborder="0" style="height: 100%" seamless></iframe>
            </div>
        </div>
    </div>
</div>

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

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，这样每个页面都只会加载一次。

效果：