jquery實現的iframe高度自適應程式碼例項

關於iframe標籤的基本用法可以參閱HTML的<iframe>標籤一章節。

iframe在編碼中具有很大的便利之處，但是也有個缺點，就是無法在預設情況下實現高度自適應效果。

下面就通過程式碼例項介紹一下如何利用jquery實現此功能。

程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
$(document).ready(function(){ 
  $("#theframe").load(function(){ 
    $(this).height(0);
    var height=$(this).contents().height()+10; 
    $(this).height(height<500?500:height); 
  }); 
});

實現高度自適應的原理非常的簡單，當iframe載入完畢之後，獲取iframe引用文件的高度，然後再設定ifram的高度。

程式碼註釋:

1.$(document).ready(function(){})，文件結構完全載入完畢再去執行函式中的程式碼。

2.$("#theframe").load(function(){})，iframe引入內容載入完畢再去執行函式中的程式碼。

3.$(this).height(0)，首先將它的高度設定為0。

4.var height=$(this).contents().height()+10，獲取iframe引入文件的高度再加上10，當然這個10是根據實際情況的考慮。

5.$(this).height(height<500?500:height)，對高度進行判斷，然後設定iframe的高度。

特別說明:

上面程式碼的操作只在同域下有小，如果想實現跨域高度自適應可以參閱iframe實現跨域高度自適應程式碼例項一章節。