網頁中的元素到底誰bind了那些event呢?

看到這篇JQuery之軛提到，用jQuery等Library，許多event是用bind的，到最後bind了什麼都不知道，也不好Debug。

所以想來找找有什麼方法可以知道，什麼元素bind了什麼event。

先看最後知道可以的工具，就是Firefox的Firebug(此時是Firefox5)，
在HTML檢視下，可以看到某Button，後面附加了jQuery16208644716556509593=Object { events={...}, handle=function()}，點一下就可看到其bind的事件了，真是了不起。

再來看看用程式的方法，如何查看，這裏只有jQuery的部份，例如以下，button bind兩個事件click及blur，然後程式用$.data，可以查詢events：



然後以下找到的這段程式，可以往下探索物件的結構
http://stackoverflow.com/questions/5357442/how-to-inspect-javascript-objects，
目的是想知道除了event名稱外，其內容為何？
測試結果是簡單的程式碼ok，複雜的不行，例如:jQuery.proxy(...)，然後查到的結困，可能很難看得懂。
但這程式實際測試會掛掉或錯誤，原因在於物件層次太深太雜，就像跑不完一樣，
所以要看你查詢的物件狀態，若是範例中的document，其MAX ITERATIONS，可能得設為1才能正常運作。




jQuery anywhere, YUI anywhere (bookmarklets)

以下是兩個 bookmarklets，你可以點擊一下執行，立即給你 ＄＄，不是給你錢啦，是給你 jQuery 的 $ 和 YUI 3 的 Y

giveMe$ (jQuery)
   
giveMeY (YUI)

如果你會需要在別人的網頁動態載入 jQuery 或 YUI (做測試或做壞事?!)，也可以把這兩個連結拖曳到書籤列上，之後隨時可以在任何網頁做動態載入 jQuery 或 YUI3。

from jsGears.com - wmh

content height is wrong (iframe auto height)

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

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

gameQuery Javascript game engine

從google alert傳來gameQuery這東西。
標題寫著「javascript game development made easy」，也試玩了demo的game，只能說真是了不起，不過真派的上用場嗎？？目前是0.4版，再觀察吧，或許0.9、1.0版時，真的會很不錯。

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中。

推! MiniJQueryLab

不錯的工具，可以測試jQuery，也可以測JavaScript、HTML和CSS。

完整的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沒有測試)

IE7中只認得gray, 不認得grey

要用jquery來改背景顏色為灰色, 用了以下的語法
$("#abc").css("background-color","grey");
結果在IE7中出現錯誤訊息"內容值無效", firefox則是正確的.
原來英文grey = gray
但在IE7中只認得gray, 用grey會出現錯誤訊息"內容值無效".

在IE的table->td中若沒有值

在IE的table->td中若沒有值, 會連border都不見了.
解決的方法是
1.加入「空白」或「&nbsp;」, 可以用jquery替空白的td加入, $("td:empty").html('&nbsp;');
2.本來希望CSS可以解決但是empty-cells:show卻不被IE支援...

這篇Fun with tables, 講了不少Table的問題.