ajax應用實現iframe高度自適應程式碼例項

在使用iframe的時候，為了網頁的美觀度，一般要特別注意iframe高度自適應問題，本章介紹一下在ajax應用中如何實現iframe的高度自適應效果，下面進入正題。

原理非常的簡單就是在頁面載入完成後，重新計算iframe高度，程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
//公共方法：設定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()方法即可實現我們的要求。

但是還有一種情況就是使用jquery ajax請求資料，資料都是在body load完成後，還在進行http請求，這時候沒有資料佔據視窗高度，reSetIframeHeight方法無法計算出來高度。

這時候，我們想到一個方法：ajax什麼時候能夠執行完成，當然是Complete事件是執行完成。

但是我們也不能在每一個頁面裡的ajax Complete事件中新增處理。這裡就用到了jquery ajax的全域性變數。

處理ajax和iframe自適應的程式碼:

[JavaScript] 純文字檢視 複製程式碼
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()函式即可。