content height is wrong (iframe auto height)

本來寫的iframe自動調整其高度的程式，於昨日新增了某內容頁後，該內容頁無法正確的處理。
經過研究後，其原因是css的影響。
當加入以下style後，javascript就無法取得正確的頁面高度。
body{height: 95%}

解決方式：
1.移除該樣式。
2.加入清除該樣式的程式碼。
　以jQuery為例：$("body").css("height", "auto");

html include html，兩種工具介紹與比較。

沒有Server Side的支援，又不想用iframe，想用html include html。
這裡提供兩個選擇，
1.inc-5(jQuery Plugin)：inc: A super-tiny client-side include JavaScript jQuery plugin
2.jQuery UI - Tabs

先說明第２個，jQuery UI - Tabs，你可以只做一頁，有頭有尾，包函css等，然後用Tab的方式，當按下Tab時，會去載入該頁內容，而該頁只需是沒頭沒尾、乾淨的、只有內容的html code。
優：網頁內容單獨維護，乾淨簡單。
缺：搜尋引擎找到內頁內容時，你只能讓人看到白白的純HTML。

inc-5，網頁中就有範例。實做上有兩種大方向：
1.同jQuery UI - Tabs，只做一個page，onclick時再動態載入需要的內容。
2.每個page獨立，可以用javascript的方式，動態載入header或footer之類include用的檔案。
個人還沒有實做，但猜想：每個Page可以用最簡單的方式，但或許要包函一點必備的html頭尾及inc-5等，其它的網頁頭尾用inc-5，網頁其它設定及需求，都用js動態載入動態處理，或某些可寫在header.inc中。

完整的iframe auto height程式(在iframe內容頁中處理)

全部參考：
1.Iframe自動調整高度, 在子網域SubDomain的情形
2.處理iframe auto height(Iframe自適應高度)
3.處理iframe auto height(Iframe自適應高度) - 相關問題紀錄
4.完整的iframe auto height程式(在iframe內容頁中處理)
5.或許你想要 "html include html，兩種工具介紹。"


以下是一個完整的iframe auto height程式，放在iframe內容頁的網頁中即可。 看Demo。
程式使用了google的AJAX Libraries API來載入jQuery，並使用jQuery來處理部份的程式。
不需要在iframe設定name或id，因為程式會找到自己的iframe。




處理iframe auto height(Iframe自適應高度) - 相關問題紀錄

全部參考：
1.Iframe自動調整高度, 在子網域SubDomain的情形
2.處理iframe auto height(Iframe自適應高度)
3.處理iframe auto height(Iframe自適應高度) - 相關問題紀錄
4.完整的iframe auto height程式(在iframe內容頁中處理)
5.或許你想要 "html include html，兩種工具介紹。"


請注意以下內容都是在iframe onload時處理的。

parent不存在的問題

1.可能是用google找到了iframe的內容，這時沒有parent
2.iframe有時會單獨存在（被單獨開啟）
，這時若去執行iframe_auto_height()，當然會有錯誤發生。
判斷的方法是if(parent != window)時才執行。

parent和iframe是cross site的問題

1.有時可能別人的網站，用iframe嵌入你的iframe內容
寫了以下is_crosssite()來判斷是不是cross site，應和［parent不存在的問題］同時判斷




Iframe自動調整高度, 在子網域SubDomain的情形

請參考在子網域SubDomain的情形

parent不是自己的網站時（或iframe單獨存在時），想要加上logo或header & footer

1.有時可能別人的網站，用iframe嵌入你的iframe內容
2.可能是用google找到了iframe的內容，這時沒有parent
3.iframe有時會單獨存在（被單獨開啟）
以下是使用jQuery將logo附加在頁面的右下角




iframe中的link是完整網頁時（或別人的網站）

1.不是link到iframe的內容，是link到parent的頁面
2.可能是link到別人的網站。
就是已包函外框的網頁，不適合放在iframe中，會破壞畫面，變成一層一層的。
這時最好使link<a>的target是_top或_blank，才不會開在iframe中。
以下是使用jQuery去改變http:開頭的target都變成_top，所以自己的內部連結都不應用完整的網址。




處理iframe auto height(Iframe自適應高度)

全部參考：
1.Iframe自動調整高度, 在子網域SubDomain的情形
2.處理iframe auto height(Iframe自適應高度)
3.處理iframe auto height(Iframe自適應高度) - 相關問題紀錄
4.完整的iframe auto height程式(在iframe內容頁中處理)
5.或許你想要 "html include html，兩種工具介紹。"

注意

1.現在會寫下這篇的主要原因在於google chrome中，iframe的高度，會不斷的增高，當不斷按下iframe.content中的連接時，會不斷的reload。
2.這篇無法處理cross site的問題，先前有一篇「Iframe自動調整高度, 在子網域SubDomain的情形」
3.請參考處理iframe auto height(Iframe自適應高度) - 相關問題紀錄

處理的過程是

1.是從iframe的onload事件處理
2.或是從iframe content的onload事件處理
3.將iframe.height設成iframe.content.height。

但過程中就會遇到很多問題

Iframe 的onload事件

1.在Linux的Konqueror中似乎只有第一次, 之後內容的改變都不會再onload.
2.Mac的Safari似乎沒有這個onload事件, 因此Iframe先預設高度為2000px.
3.而IE 6; Firefox 2; Opera 9都沒有問題.

這個onload問題決定的是，要在iframe或iframe.content的onload事件來處理

iframe.content.height的取得問題

和height有關的屬性有clientHeight、offsetHeight和scrollHeight，參考 http://www.tsolong.com/post/355.html
1.每個Browser的定義不相同
* 參考同上。

2.當設DOCTYPE後還會產生變化
* 目前的測試是，沒加的話，３種高度Height會依Browser的設定
* 有加的話，不論那一種，３種高度Height都同樣拿到scrollHeight的值。

3.想說用jquery來取得height，也會受DOCTYPE設定的影响
用alert($("body").height()+" "+$("body").outerHeight()+" "+$("body").innerHeight());來測
* 在chrome和firefox中，不論DOCTYPE設什麼，或沒有設，３種高度都同樣拿到scrollHeight的值。
* 在IE7中，DOCTYPE有設，３種高度都同樣拿到scrollHeight的值。
* DOCTYPE沒設，３種高度都同樣拿到像是clientHeight的值。
* 需在每個頁面加入jquery.js

4.chrome中的iframe.document.body.scrollHeight會受iframe.height影响,
5.本文後面還遇到css設定position:absolute影响高度的問題

以上問題試了好幾個小時，覺得這真是個有點難解。

目前的解法

1.在iframe的onload中處理
2.每個iframe content一定要有DOCTYPE(解決chrome的問題，才能用offsetHeight)
3.用offsetHeight的值(解決chrome的問題)



這段code已測試的，Firefox3、IE7、Chrome。
還想在Konqueror、Safari、Opera、IE6中做測試。
不敢保證用offsetHeight在未測試的Browser或舊版本中不會遇到問題。
在iframe.onload中處理，也可能有瀏覽器會遇到問題。

實際運用後又遇到問題

http://of.openfoundry.org/projects/1/sympa
在網站連接sympa(mailing list system)的時候，設高度的功能硬是失效，原來拿到的content.height是０，為什麼是０呢？
經檢查發現以下片段



名為Canvas的div將整個網頁包住了，並且設為position: absolute;，造成Canvas像是定在那裏，而整個網頁並沒有高度。(目前只確定Firefox3有這問題，其它Browser沒有測試)

Iframe自動調整高度, 在子網域SubDomain的情形

全部參考：
1.Iframe自動調整高度, 在子網域SubDomain的情形
2.處理iframe auto height(Iframe自適應高度)
3.處理iframe auto height(Iframe自適應高度) - 相關問題紀錄
4.完整的iframe auto height程式(在iframe內容頁中處理)
5.或許你想要 "html include html，兩種工具介紹。"


如果CompanyName.com要以Iframe放入srv.CompanyName.com的網頁, 這時會有cross-site的問題, 無法互相以javascript設定Iframe的高度, 因此想到要以cookie的傳遞來完成這件工作.

當然子網域是可以用簡單的方式，就是設定document.domain，例如sub.a.com和www.a.com都加上document.domain = "a.com"，但這樣會延伸出安全性的問題，
1. 因為不只iframe height，其它的網頁元素或資訊，如cookie也全都可以取得。
2. 其它如other.a.com，本來希望是cross-site，但它也可以跟著設定domain。
3. 可能會提供customer.a.com給你的客戶。

所謂cross-site，不同host就是cross-site
of.openfoundry.org 和 rt.of.openfoundry.org互相是cross-site, 沒有主從關係
of.openfoundry.org 和 of.openfoundry.org/rt, path間的關係不是cross-site

適用於IE;Firefox;Opera

過程大致如下:
1.在Iframe內容頁面(srv.CompanyName.com)的onload時, 取得頁面高度, 並放在主要Domain Cookie(CompanyName.com)中.
2.在CompanyName.com的網頁中, 再於Iframe的onload時, 取得Cookie的的值, 再去設定Iframe的高度.


過程1:

 function iframeAutoFit()
 {
  var now = new Date();
  setCookie("IframeMaxHeight", this.document.body.scrollHeight,
    now,"/","CompanyName.com");
 }

 if(window.attachEvent)
 {
  window.attachEvent("onload",  iframeAutoFit);
 }
 else if(window.addEventListener)
 {
  window.addEventListener('load',  iframeAutoFit,  false);
 }

 function setCookie(name, value, expires, path, domain, secure) {
   var curCookie = name + "=" + escape(value) +
       ((expires) ? "; expires=" + expires.toGMTString() : "") +
       ((path) ? "; path=" + path : "") +
       ((domain) ? "; domain=" + domain : "") +
       ((secure) ? "; secure" : "");
   document.cookie = curCookie;
 }

過程2:

<iframe id="wiki" src="Content.html" frameborder="NO" scrolling="auto"
    style="width:100%; height:2000px" onload="DoIframeToMaxHeight();">
</iframe>


 function DoIframeToMaxHeight(){
  //某些Browser的Iframe onload事件似乎慢了一點, 或setCookie時慢了一點, 所以要等一下子
  window.setTimeout('IframeToMaxHeight("wiki")',500);
 }

 function IframeToMaxHeight(id){
  try{
   document.getElementById(id).style.height =
     parseInt(getCookie("IframeMaxHeight")) + 50;
  }
  catch (ex){}
 }

 function getCookie(name) {
   var dc = document.cookie;
   var prefix = name + "=";
   var begin = dc.indexOf("; " + prefix);
   if (begin == -1) {
     begin = dc.indexOf(prefix);
     if (begin != 0) return null;
   } else
     begin += 2;
   var end = document.cookie.indexOf(";", begin);
   if (end == -1)
     end = dc.length;
   return unescape(dc.substring(begin + prefix.length, end));
 }

一些情形:

1.Iframe 的onload事件:
  在Linux的Konqueror中似乎只有第一次, 之後內容的改變都不會再onload.
  Mac的Safari似乎沒有這個onload事件, 因此Iframe先預設高度為2000px.
  而IE 6; Firefox 2; Opera 9都沒有問題.
2.在Konqueror3.5中Iframe會蓋住Div
3.觀看時調整字型變大時, 不會立即有反應, 而會出會Scroll Bar.