vue + bootstrap-tab 环境下 iframe 自适应高度完美解决方案

狄龙疤

于 2019-11-19 16:08:32 发布

阅读量1.9k

点赞数

分类专栏： vue iframe css 文章标签： vue javascript iframe css html

本文链接：https://blog.csdn.net/heshiyuan1406146854/article/details/103144668

版权

vue 同时被 3 个专栏收录

2 篇文章

订阅专栏

css

2 篇文章

订阅专栏

iframe

1 篇文章

订阅专栏

1. vue 页面摘要：

<div id="app" style="overflow:auto">
    <div id="div_main_container" style="margin: 10px;" v-cloak>
        bala bala ...
    </div>
</div>

2. bootstrap-tab.js 中新增函数：

function changeIframeHeight( iframeId,height ){
    $( "#" + iframeId ).height( height );
    $(".tab-content").css('height',height );
    $(".tab-pane.active").css('height',height );
}

3. vue对象新增 watch 监听函数：

 new Vue({
        el: '#app',
        data: function() {
            return {
                bala bala...
            }
        },
        created: function () {
            bala bala...
        },
        watch:{
            dataList: function(){
                this.$nextTick(function(){
                    window.parent.changeIframeHeight( "我是 iframe 的 id", $("#div_main_container")[0].clientHeight + 50 );
                });
            }
        },
        methods: {
            bala bala...
        }
}