解決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賦值，經過測試，果然解決了這個問題效果圖如下：