iFrame自适应高度
有一个功能要求是在tab下动态加载iframe,尝试了很多自适应高度的方法都没有成功
在网上搜索资料、调试以后才知道高度绑定的事件必须在iframe加载完成之前去绑定,否则无效
说直接点就是不要在$(document).ready()里就绑定路径等信息
<div id="main" runat="server">
<ul>
<li><a href="#resume_analysis">简 历</a></li>
<li><a href="#resume" onclick="fit_mframe();">简历原文</a></li>
<li><a href="#assessment">评价信息</a></li>
</ul>
<div id="assessment">
<table class="detail" id="detail_table" border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th class="jobr_th1">
职位名称
</th>
<th class="jobr_th2">
所属部门
</th>
<th class="jobr_th">
职位编号
</th>
<th class="jobr_th">
职位状态
</th>
<th class="jobr_th">
招聘状态
</th>
<th class="jobr_th">
招聘详情
</th>
</tr>
</thead>
<tbody id="assessment_body">
</tbody>
</table>
</div>
<div id="resume_analysis" runat="server">
<input type="hidden" id="htmlText_analysis" runat="server" />
<iframe id="mframe_analysis" src=""></iframe>
</div>
<div id="resume" runat="server">
<input type="hidden" id="htmlText" runat="server" />
<iframe id="mframe" src=""></iframe>
</div>
</div>
//实现tab切换
$(function () {
var tab = $('#main').tabs();
//初始化结构化解析的简历HTML
var htmlPath = document.getElementById("htmlText_analysis").value;
document.getElementById("mframe_analysis").src = htmlPath;
//简历tab自适应高度
$("#mframe_analysis").load(function () {
$(this).height($(this).contents().height() + 40);
});
});
//加载简历原文HTML并设置自适应高度
function fit_mframe() {
//初始化简历HTML
var htmlPath = document.getElementById("htmlText").value;
document.getElementById("mframe").src = htmlPath;
//简历原文tab自适应高度
$("#mframe").load(function () {
$(this).height($(this).contents().height() + 40);
});
}