jquery外掛程式之iframe自適應可視區域

在web專案中常常會使用到框架（frameset），但是使用了frameset的頁面沒有body，所以不能往頂層的頁面上新增遮罩，所以一般性的做法就是在頂層的頁面裡面加乙個iframe，然後讓這個iframe能夠自動擴充套件到整個可視區域。

要做到這一點，有兩個關鍵點：

1，在頁面載入完時，將iframe的高度和寬度設定為整個頁面的可視區域

在jquery中可以通過window的寬度和高度獲取

$("window").width();
$("window").height();

2，當頁面的大小發生變化是，重新設定iframe的高度和寬度

設定window的resize事件

下面是外掛程式的實現：

(function($);
var opts = $.extend(defaults, option);
resize($this);
function resize()
}else
height = $(window).height() * opts.height;
if($(window).height()-height < 4 && $.browser.msie)
}$cur.height(height);
}//設定寬度
if(opts.width != 0)else
width = $(window).width()*opts.width;
}$cur.width(width);
}} $(window).resize(function());
}})(jquery);

呼叫方法如下：

$("#iframe").iframe_autoresize(option);

option 為js的object物件，包含兩個字段

（1）height，設定自動調整的高度屬性

當height的值等於0時，本外掛程式不做任何處理

大於0小於等於1時，將iframe的高度設定為：可視區域高度*height屬性值

小於0時，將iframe的高度設定為：可視區域高度+height屬性值（也就是高度減去height的絕對值，相當於高度變小了）

當大於1時，與等於1一樣處理

（2）width，設定自動調整的寬度屬性（其定義方式與height類似）

整體的效果如下：

變化整個框架的大小後

在開發過程中，發現了在ie中有乙個問題：

如果把iframe設定成為和可視區域一樣高（或者將body的高度也設定成這樣），會導致出現body出現滾動條，此時只好將body的overflow樣式設定成為hidden將超出的部分隱藏（事實上並沒有超出，只是body變大了4個畫素）

jquery外掛程式之iframe自適應可視區域

jQuery外掛程式之瀑布流外掛程式

jQuery外掛程式之瀑布流外掛程式

JQUERY外掛程式學習之jqPlot

jquery外掛程式之iframe自適應可視區域

jQuery外掛程式之 瀑布流外掛程式

jQuery外掛程式之 瀑布流外掛程式

JQUERY外掛程式學習之jqPlot

相關推薦

jQuery外掛程式之瀑布流外掛程式

jQuery外掛程式之瀑布流外掛程式