以前后台布局都是用的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/554
评论列表