使用ajax来对后台主框架进行布局(非iframe方式)

以前后台布局都是用的iframe配合js来对后台进行布局,使用iframe框架对后台布局有很多优势,例如这个标签是符合w3c标准的标签,不会存在兼容性问题,然后相对于其他的iframe给你视觉上的整体度更高,下来面就发下我常用的后台布局代码吧,是iframe的方式

html代码:

<a href="javascript:;" data-href="/new">文章</a>
<div class="layui-body">    
    <iframe src="/show" frameborder="0" id="MianGMP" style="width: 100%; min-height: 580px;"></iframe>    
</div>

js代码:

$('.layui-nav-item').on('click', 'a', function(){    
    var href = $(this).attr('data-href');    
    if(href){    
        $('#MianGMP').attr('src', href);    
    }    
    $('#MianGMP').load(function(){    
        var frameHeight = $('#MianGMP').contents().find("html").height() + 20;    
        $('#MianGMP').css('height', frameHeight + 'px');    
    });    
});

好了,上面就是以前的布局方式,没有什么特别的地方,主要就是在iframe载入进入了以后使用load方式把框架高度调整下,加20px


接下来我们看看ajax的后台布局方式代码

html代码:

<a href="javascript:;" data-code="new">文章</a>
<div class="content"></div>

js代码:

$('.layui-nav-item').on('click', 'a', function(){
    var code = $(this).attr('data-code');
    $.ajax({
        url:code+'.html',
        type:'GET'
        data:{code:code},
        dataType:'html',
        success:function(data){
            $('#content').html(data);
        }
    });
});


内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://sulao.cn/post/557.html