解决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赋值，经过测试，果然解决了这个问题效果图如下：

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

猜你喜欢