在Javascript中更好的計時器，取代Date，用來計算執行時間等應用

一般在javascript中要計算某段程式的執行時間，可以使用Date物件。

用法是Date.now() 或 new Date().getTime()，用以取得microsecond(毫秒)的目前時間數值。

在執行函數的前後取得並相減，以取得執行時間，例如：

var ticks_start = Date.now();

RunTestFunction();

var ticks_end = Date.now();

alert(ticks_end - ticks_start);

但一些指令的時間小於毫秒時，根本結果不是0就是1，看不出所以然。

從這篇文章“A better timer for JavaScript”得到了更小單位時間的方法。

window.performance = window.performance || {};

performance.now = (function() {

  return performance.now       ||

         performance.mozNow    ||

         performance.msNow     ||

         performance.oNow      ||

         performance.webkitNow ||

         function() { return new Date().getTime(); };

})();

再將程式改為以下，即可測得0.x毫秒的執行時間：

var ticks_start = performance.now();

RunTestFunction();

var ticks_end = performance.now();

alert(ticks_end - ticks_start);

網頁中的元素到底誰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才能正常運作。




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

各種版本IE的網頁測試

請出IETester，建立出一個多版本的IE測試環境。
可安裝在Windows 7, Vista and XP，可測試IE8, IE7 IE 6 and IE5.5。
這可比弄好幾套OS簡單的多了。

IETester is a free WebBrowser that allows you to have the rendering and javascript engines of IE8, IE7 IE 6 and IE5.5 on Windows 7, Vista and XP, as well as the installed IE in the same process.

推! MiniJQueryLab

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

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

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

詳全文

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檔案。

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




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

處理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沒有測試)

自動將貼到Blog的程式碼Code或HTML Code做轉換及編排

因為希望可以直接把寫好的程式碼貼到Blog上，又能夠保持他原來的格式，並且做好排版，之後還要方便修改，因此寫了一個小javascript＋css來完成這件事情，結果會如下：



主要的做法是將程式碼放在<code>中，並用註解將程式碼包起來，來避免Browser拿Code去用，如下:
由於Blogger不能放入<![CDATA[ ]]>，因而使用<!-- -->，所以資料要再放同樣的符號就容易產生問題！！


----
<code>
<--
這裏放程式碼
-->
</code>
----


再於<head>中加入以下兩行．




在Google Blogger的小工具"HTML/JavaScript"中使用的方法
由於這個小工具會把css的設定吃掉(放入後存檔就消失了)，因此要做一點改寫，如下。




自動將選取的文字放入clipboard

getSel()傳回選取的文字
copy_clip(txt)將文字放入clipboard
在body的onmouseup="copy_clip(getSel());", 就可以自動將選取的文字放入clipboard囉!

function copy_clip(meintext)
{

 if (window.clipboardData) 
   {
   
   // the IE-manier
   window.clipboardData.setData("Text", meintext);
   
   // waarschijnlijk niet de beste manier om Moz/NS te detecteren;
   // het is mij echter onbekend vanaf welke versie dit precies werkt:
   }
   else if (window.netscape) 
   { 
   
   // dit is belangrijk maar staat nergens duidelijk vermeld:
   netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');
   
   // maak een interface naar het clipboard
   var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
   if (!clip) return;
   
   // maak een transferable
   var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
   if (!trans) return;
   
   // specificeer wat voor soort data we op willen halen; text in dit geval
   trans.addDataFlavor('text/unicode');
   
   // om de data uit de transferable te halen hebben we 2 nieuwe objecten nodig   om het in op te slaan
   var str = new Object();
   var len = new Object();
   
   var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);
   
   var copytext=meintext;
   
   str.data=copytext;
   
   trans.setTransferData("text/unicode",str,copytext.length*2);
   
   var clipid=Components.interfaces.nsIClipboard;
   
   if (!clip) return false;
   
   clip.setData(trans,null,clipid.kGlobalClipboard);
   
   }
   //alert("Following info was copied to your clipboard:\n\n" + meintext);
   return false;
}

function getSel()
{
 var txt = '';
 var foundIn = '';
 if (window.getSelection)
 {
  txt = window.getSelection();
  foundIn = 'window.getSelection()';
 }
 else if (document.getSelection)
 {
  txt = document.getSelection();
  foundIn = 'document.getSelection()';
 }
 else if (document.selection)
 {
  txt = document.selection.createRange().text;
  foundIn = 'document.selection.createRange()';
 }
 else return;
 //alert(txt);
 //alert(foundIn);
 return(txt);
}

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.

Javascript Tag

<script type="text/jscript" language="jscript"></script>
<script type="text/javascript" language="javascript"></script>

使用jscript在firefox時, 是完全不會被理會的.