Javascript

在網頁裡面用 Select 是很常遇到的，之前也寫了一篇如何利用 jQuery 動態增加 option 或取值，jQuery 部份就不介紹了，那是需要搭配 jQuery Plugin: Select box manipulation，今天要介紹的是如何用 javascript 動態取值或者是增加 option 選項。因為我發現有使用者直接利用 innerHtml 的方式來把資料塞入到 Select 裡面，雖然 FireFox 或 Chrome 都可以正常運作，但是遇到 IE 還是沒辦法動。

如何取得 select element 底下很多方法可以取得 select element: 1. 透過 form name + element name

document.myform.selectname

document.myform.elements

document.getElementById("selectid")

NodeJS 是目前當紅的 Web 2.0 技術，去年 COSCUP 2010 就有 KKBOX 資深工程師 ericpi 來探討這個議題，NodeJS 背後使用了 V8 引擎為基礎，沒看過用純 JS 來當 Server-Side 吧，台灣很紅的 Plurk 也是大量使用 NodeJS，然而每開發一種語言，就會想開始找搭配的 Framework，那就首推 Node Framework Express 來撰寫程式，本篇是要介紹如何在 Ubuntu 10.10 無痛安裝 nodejs + express。

下載 Nodejs 原始碼 直接到

官網下載 Stable 的版本吧，目前是 node-v0.4.10.tar.gz，也可以先看看 API Document

# wget http://nodejs.org/dist/node-v0.4.10.tar.gz

之前寫了一篇 jQuery 偵測瀏覽器版本, 作業系統(OS detection)，這次可以來加上 Android 手機版本，其實就是分析瀏覽器 User Agent 來達到目的，底下分享 PHP 跟 Javascript 作法

PHP 方法

if(stripos($_SERVER['HTTP_USER_AGENT'],'Android') !== false) 
{
	header('Location: http://android.xxx.com');
	exit();
}

Javascript 方法

if(navigator.userAgent.match(/Android/i))
{
	window.location = 'http://android.xxx.com';
}

Apache .htaccess 方法 用

Apache mod rewrite 方法

RewriteCond %{HTTP_USER_AGENT} ^.*Android.*$
RewriteRule ^(.*)$ http://android.xxx.com [R=301]

update: 簡易版的偵測 iphone/ipod time: 23:32 jQuery 真是一個相當方便的 javascript framework，最近在弄嵌入式系統時候需要去偵測瀏覽器 user agent，就類似下此訊息 “Mozilla/4.0 (compatible; MSIE 4.01; Windows 95)"，原本打算直接用 C 語言內建的 getenv(“HTTP_USER_AGENT”) 來做掉，不過後來想想，直接在 UI 那邊，利用 jQuery 來偵測瀏覽器版本、系統OS，這樣就解決了，上網找到有人寫了 jQuery browser and OS detection plugin，利用底下語法就可以知道一些 user agent 裡面的資料

紀錄 iframe 如何呼叫子頁或者是父頁函式，iframe 在現今 Web 2.0 時代已經不流行了，因為有很多問題的存在，例如對於 SEO 搜尋引擎也沒有幫助，但是也是很多人在使用，底下筆記心得，說不定之後會 google 到自己的文章，哈哈。 父頁(主視窗)呼叫子頁函式：

/* iframeID 是 iframe ID*/
window.iframeID.formSubmit();
/* ifr 是 iframe ID */
document.getElementById('ifr').contentWindow.formSubmit();

parent.formSubmit();

parent.parent.formSubmit();

【程式】JS : parent , iframe function call Access child function from iframe

看到 Google Chrome Blog 發表的Google Chrome 支援超過 40,000 Extensions!，當 Google Chrome 瀏覽器剛出來的時候，造成 Web Developer 一些震撼，因為 Chrome 強調的是擁有快速的 Javascript 引擎，以及快速的啟動，Fast start-up、Fast loading、Fast search，也因此讓很多設計網站的工程師必須把 Chrome 的支援性考慮進去，但是由於剛推出的瀏覽器，沒有任何外掛功能，我本身用 FireFox 瀏覽器很多年了，FireFox 的附加元件讓許多程式設計師投入開發，也製造出很多方便的附加元件來讓大家使用，例如：FireBug、Gmail Manager、Greasemonkey…，然而 FireFox 最方便的就是 Greasemonkey 此附加元件，使用者可以撰寫簡單 Javascript 語言來跟指定網站進行元件控制，現在 Google 工程師聽到我們的聲音了，Google Chrome 4 加入 Greasemonkey user scripts 功能，大家可以到 userscripts.org 下載超過 40,000 script 安裝到 Chrome 瀏覽器。您可以在 blogger 使用 emoticons，大家可以去參考看看。 由於 Chrome 支援了 Greasemonkey，所以趕快把 FireFox 所安裝的 script，也安裝到 Chrome，可是我發現之前 DarkKiller 大神寫的 Wretch Album Expander 已經不能用了，所以我將它實做到 Chrome，可以從這裡下載安裝：Wretch Album Expander for Google Chrome or FireFox，平時自己偶而會看看無名小站，所以也是方便自己觀看照片，此 script 也可以安裝在 FireFox 喔。這樣大家就不用再看圖片還要一張一張慢慢點，只要負責按換頁就可以了 ^^。 來測試看看，隨便找一本無名相簿：馬甲‧小葵 ，畫面：點我觀看