本文介绍在使用jQuery Ajax异步请求数据时，如何解决iframe内容高度动态变化导致的自适应问题。通过监听ajaxStart和ajaxComplete全局事件，在请求开始和结束后重新计算并设置iframe高度，确保页面加载完成后iframe能正确显示全部内容。
iframe自适应高度的基本实现
实现iframe高度自适应的核心思路并不复杂，主要是在页面加载完成后，重新计算并设置其高度值即可。
具体实现代码如下：
代码如下：
// 公共方法：用于设置iframe的高度，确保数据全部显示
// function SetPageHeight() {
// var iframe = getUrlParam('ifname');
// var myiframe = window.parent.document.getElementById(iframe);
// iframeLoaded(myiframe);
//}
var iframeLoaded = function (iframe) {
if (iframe.src.length > 0) {
if (!iframe.readyState || iframe.readyState == "complete") {
var bHeight =
iframe.contentWindow.document.body.scrollHeight;
var dHeight =
iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.height = height;
}
}
}
// 分页时重新设置 iframe 高度 ； 修改后：iframe.name = iframe.id
var reSetIframeHeight = function()
{
try {
var oIframe = parent.document.getElementById(window.name);
oIframe.height = 100;
iframeLoaded(oIframe);
}
catch (err)
{
try {
parent.document.getElementById(window.name).height = 1000;
} catch (err2) { }
}
}调用 reSetIframeHeight() 方法即可。
Ajax异步加载下的自适应问题
然而，当使用 jQuery Ajax 请求数据时，若数据在 body 加载完成后仍在进行 HTTP 请求，此时窗口内尚无数据占据高度，reSetIframeHeight 方法无法准确计算出高度。
针对这种情况，我们可以利用 Ajax 的 Complete 事件来判断请求是否执行完成。
但如果在每个页面的 Ajax Complete 事件中单独添加处理逻辑，代码将变得冗余。因此，这里可以使用 jQuery Ajax 的全局变量来处理。
基于全局事件的解决方案
处理 Ajax 和 iframe 自适应的代码如下：
代码如下：
var sendcount = 0;
var completecount = 0;
// 添加 ajax 全局事件处理。
reSetIframeHeight();
$(document).ajaxStart(function (a, b, c) {
}).ajaxSend(function (e, xhr, opts) {
sendcount++;
}).ajaxError(function (e, xhr, opts) {
}).ajaxSuccess(function (e, xhr, opts) {
}).ajaxComplete(function (e, xhr, opts) {
completecount++;
reSetIframeHeight();
}).ajaxStop(function () {
});先执行一次 reSetIframeHeight，再在每个 Ajax 完成后调用 reSetIframeHeight。
经过测试，该方法有效。