網頁

2009年2月2日 星期一

處理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不存在的問題]同時判斷
  1. function is_crosssite() {
  2.   try {
  3.     parent.location.host;
  4.     return(false);
  5.   }
  6.   catch(e) {
  7.     return(true);
  8.   }
  9. }


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


請參考在子網域SubDomain的情形

parent不是自己的網站時(或iframe單獨存在時),想要加上logo或header & footer


1.有時可能別人的網站,用iframe嵌入你的iframe內容
2.可能是用google找到了iframe的內容,這時沒有parent
3.iframe有時會單獨存在(被單獨開啟)
以下是使用jQuery將logo附加在頁面的右下角
  1. //如果cross site就加上logo
  2. if(parent == window || is_crosssite())
  3. {
  4.   $("body").append('<a href="http://www.openfoundry.org" target="_blank"><img src="http://www.openfoundry.org/Powered-by-OSSF-180x50" style="border:none; float:right;"></a>');
  5. }


iframe中的link是完整網頁時(或別人的網站)


1.不是link到iframe的內容,是link到parent的頁面
2.可能是link到別人的網站。
就是已包函外框的網頁,不適合放在iframe中,會破壞畫面,變成一層一層的。
這時最好使link<a>的target是_top或_blank,才不會開在iframe中。
以下是使用jQuery去改變http:開頭的target都變成_top,所以自己的內部連結都不應用完整的網址。
  1. //在iframe中就需改變link target
  2. if(parent != window){
  3.   $("a[href*='http:']").attr("target","_top"); //external link
  4. }

沒有留言: