網頁

2009年3月13日 星期五

[程式]讓你Javascript更小更正確-用JSLint檢查語法,用Packer壓縮

由於javascript是一個結構非常鬆散的物件語言,在寫javascript的時候,常常很容易出現缺失,有時候可能少了一個逗點(,),也有可能少個分號(;),結果卻依然可以執行。

詳全文

2009年3月7日 星期六

HTML原始檔中js及css後面加了"?數字"是什麼用途?

在Ruby on Rails產生的網頁原始碼中總看到assets的後面會多一段數字,像是:
<script src="/javascripts/cache/bundle.js?1236331223" type="text/javascript"></script>
現在才知道這是為了讓確保使用者能夠拿到最新的javascript或css檔案。

看到一個Plugins - Asset timestamping,會把最後修改的timestamp加到URL中,但是plugin的comment中就有人回應「Looks like assets are timestamped in Rails automatically now (v 1.1+)」,可能這是很舊的plugin了吧!

做了測試用Live HTTP Headers去看:
1.先隨便試一個js檔,如:http://wadevelop.blogspot.com/xxx.js?12345
Cotent-Length:9999
2.再開新的tab,一樣連到http://wadevelop.blogspot.com/xxx.js?12345
Cotent-Length:0
3.然後換連到http://wadevelop.blogspot.com/xxx.js?abcde
Cotent-Length:9999
證明了?後面更新timestamp,使用者就不會使用cache,而會重新載入js或css檔案。

2009年3月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 auto height程式,放在iframe內容頁的網頁中即可。 看Demo
程式使用了google的AJAX Libraries API來載入jQuery,並使用jQuery來處理部份的程式。
不需要在iframe設定name或id,因為程式會找到自己的iframe。


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不存在的問題]同時判斷




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,所以自己的內部連結都不應用完整的網址。


2008年12月27日 星期六

Which is the best JavaScript and Ajax framework?

* jQuery (52%, 356 Votes)
* Dojo (14%, 99 Votes)
* Prototype.js (13%, 91 Votes)
* Ext.js (9%, 62 Votes)
* Mootools (7%, 47 Votes)
* YUI (Yahoo User Interface) (7%, 45 Votes)
Total Voters: 690

2008年12月24日 星期三

ROR Production mode改code不想restart,code寫在view中

Ruby on Rails在Production的模式中,有時偷懶不想在controller中寫action,因為controller中的修改需restart server, view則不需要,打算把code寫在view裏面,然後呼叫/controller/action,結果一點反應也沒有。

要記住!!剛新增的view還是要先restart server一次,server才會知道有view的action可以呼叫,之後修改code就比較方便做測試。

處理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後還會產生變化
* 目前的測試是,沒加的話,3種高度Height會依Browser的設定
* 有加的話,不論那一種,3種高度Height都同樣拿到scrollHeight的值。

3.想說用jquery來取得height,也會受DOCTYPE設定的影响
用alert($("body").height()+" "+$("body").outerHeight()+" "+$("body").innerHeight());來測
* 在chrome和firefox中,不論DOCTYPE設什麼,或沒有設,3種高度都同樣拿到scrollHeight的值。
* 在IE7中,DOCTYPE有設,3種高度都同樣拿到scrollHeight的值。
* DOCTYPE沒設,3種高度都同樣拿到像是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是0,為什麼是0呢?
經檢查發現以下片段



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