解决iframe框架,高度自适应问题

首先HTML代码
<div class="news_list">
    
div>
javascript代码(这里使用jquery,操作dom比较方便)
<script>
    window.onload = function(){
        // var obj = $('#newsMenu').contents().find('.news_list_item').outerHeight();
        // console.log(obj);
        //获取子页面的高度
        function refresh(){
            var childPageH = $('#newsMenu').contents().find('body').height();
            $('#newsMenu').height(childPageH);
            console.log(childPageH);
        }
        refresh();
        setInterval(refresh,100)
    }
script>
延伸
  • 在引入iframes框架的内部获取iframes里面的内容高度
var obj = $('#newsMenu').contents().find('.news_list_item').outerHeight(); 
$(function(){
    //获取单个新闻头的高度(包括宽度边框和边距)
    var $newsTitleH = $('.news_list_item').outerHeight();
    //获取页面中所有新闻头的个数
    var $newsTitleN = $('.news_list_item').length;
    //获取页面的显示高度
    var bodyH = $('body').height();
    //设置父级iframe框架的高度
    $(window.parent.document).find('#newsMenu').height(bodyH+'px');
    var $newsTitleH = $('.news_list_item').outerHeight();
    console.log($newst);
});

你可能感兴趣的:(javascript)