[JavaScript plug-in]iframe autoHeight
前言
系統有一個需求，是要達到類似frame的效果，但是要用iframe來置放。
然而為了讓UI畫面不會太突兀，所以iframe應該要無框線，高度應該要跟原網頁的Scope一樣。
但只設定iframe的height是無法解決這問題的，所以要透過javascript去處理。
網路上當然也有前輩已經碰過這樣的需求，所以請member (感謝Cindy跟J妹) 去survey了一下，
有個不錯的解決方式，也提供給各位參考：jQuery : Auto iFrame Height
使用方式
- include autoHeight.js
- 將iframe的class設定為autoHeight
只有這樣，就搞定了。
最後順便附上該JavaScript的內容：
function doIframe(){
o = document.getElementsByTagName('iframe');
for(i=0;i<o.length;i++){
if (/\bautoHeight\b/.test(o[i].className)){
setHeight(o[i]);
addEvent(o[i],'load', doIframe);
}
}
}
function setHeight(e){
if(e.contentDocument){
e.height = e.contentDocument.body.offsetHeight + 35;
} else {
e.height = e.contentWindow.document.body.scrollHeight;
}
}
function addEvent(obj, evType, fn){
if(obj.addEventListener)
{
obj.detachEvent('on' + evType, fn);
obj.addEventListener(evType, fn,false);
return true;
} else if (obj.attachEvent){
var r = obj.attachEvent("on"+evType, fn);
return r;
} else {
return false;
}
}
if (document.getElementById && document.createTextNode){
addEvent(window,'load', doIframe);
}
[註]2010/9/9：原本的JavaScript會有performance的問題，原因是只有attachEvent，沒有detachEvent。會導致iframe中跑越多次，網頁越來越慢...已經將正確版本的JavaScript修改至內文中了，如果有使用此plug-in的朋友，記得修正一下。
blog 與課程更新內容，請前往新站位置：http://tdd.best/
