相信大多数程序员都跟iframe打过交道,iframe简单,好用。在我用的过程中比较苦逼的是关于iframe高度的设置。
由于子页面内容不确定,页面高度也不确定。于是开始网上的各种搜索,一般有两种:一种是通过父页面同一控制,另一种是通过子页面控制父页面的高度。通过父页面直接控制,试过n多次,屡试不对。。。于是通过另一种子页面控制父页面的高度
<iframe src="" id="mainFrame" name="mainFrame" width="100%" height="800" frameborder="no" border="0" scrolling="no"></iframe>
像这个iframe,如果想要实现iframe的高度随子页面内容的高度自适应,我们需要等子页面加载完成之后添加js代码,这段代码是经过我多次升级之后一直用的js代码实现想要功能
var oHeight = (document.body.scrollHeight)||(document.body.offsetHeight); window.parent.document.getElementById('mainFrame').height = oHeight;
这种方法虽然在我做过的项目中没有出现什么兼容性问题,但是有一缺点就是,每个子页面都不能忘记调用这一段js代码,否则就会出问题。
福利来啦!!!
现在我们用jq的ajax来实现上述功能,但是不使用iframe标签,假如我们的html如下:
<a targeurl="productman.htm" class="menutar block">产品管理</a> <a targeurl="orderman.htm" class="menutar block">订单管理</a> <a targeurl="basicarc.htm" class="menutar block">基础档案</a>
对应的js代码,我们只需要得到需要显示的页面路径,并ajax请求该路径,将请求的数据给了我们代替iframe的div即可。
我们的div如下:
<div class="conIfram" id="ifrig"></div>
对应的js,需要添加到a标签的click事件上,代码如下:
$(".menutar").click(function(){ var obj = this; var tarurl = $(obj).get(0).attributes["targeurl"].nodeValue; // console.log(tarurl); $.post(tarurl,function(datas){ $("#ifrig").html(datas); }); });
粘贴代码试试吧