很多現代的瀏覽器在網址列的右邊有個搜尋框,預設的安裝有Google 搜尋等。如下圖所示:
其實這是OpenSearch 的應用,只要寫出對應的微格式的xml 文件,就可以發展出對應的搜尋框。參考OpenSearch 的定義文檔,可以基本上取得基本的xml 格式。例如某個典型的搜尋xml 檔可以這樣指定。
<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
<InputEncoding>utf-8</InputEncoding>
<ShortName>ShortName</ShortName>
<Description>Description</Description>
<Image type="image/vnd.microsoft.icon">favicon</Image>
<Url type="text/html" template="http://who.am.i/search?word={searchTerms}"/>
</OpenSearchDescription>
上面的xml 檔很容易理解,除了固定的xml 根以外,其他的定義從字面上就可以理解:
編寫OpenSearch 的xml 格式就完成了,詳細資訊可以參閱其OpenSearch 定義文件。下面要在頁面中加入這個搜索,基本上可以分成兩種方式。分別是頁面的在head 中加入link 標記(類似RSS),以及使用Javascript 方式新增(例如定義某個按鈕觸發)。加入link 標記非常簡單,格式如下
<link rel="search" type="application/opensearchdescription+xml"
href="http://who.am.i/search.xml" title="ShortName" />
與RSS 相似,rel 和type 是固定的,我們主要指定href (上述xml 的url 路徑,保險起見使用絕對路徑,即http:// 開頭)以及title (也就是搜尋的短標題)即可。就這樣,在Explorer 以及Firefox 中開啟這個頁面就可以看見對應的選單了,如圖所示:
使用Javascript 加入比較麻煩(也許現在的情況會很好多)。我們主要會使用瀏覽器的擴充功能,在Explorer 有個window.external.AddSearchProvider 參數(詳細文件)。典型的呼叫方法如下
window.external.AddSearchProvider('http://who.am.i/search.xml');
參數中的連結就是上述link 中的內容。在Firefox 下可以使用
window.sidebar.addSearchEngine(
"http://who.am.i/search.xml", /* engine URL */
"favicon.ico", /* icon URL */
"ShortName", /* engine name */
"Description" ); /* category name */
參數和範例如範例程式碼中所述(官方文件)。值得注意的是在Firefox2 版本以後已經「相容」 Explorer 的window.external.AddSearchProvider 呼叫方法(詳細資訊)。那我們對應的Javascript 程式碼就可以這樣寫(為了相容Firefox2 之前的版本,加入else if 判斷,如果覺得沒有必要,可以不加)
function addEngine(){
if (window.external || window.external.AddSearchProvider) {
window.external.AddSearchProvider('http://who.am.i/search.xml');
} else if (window.sidebar && window.sidebar.addSearchEngine) {
window.sidebar.addSearchEngine(
"http://who.am.i/search.xml",
"favicon.ico", /* icon URL */
"ShortName", /* engine name */
"Description" ); /* category name */
}}
這樣,就可以將這個函數註冊到某個連結或按鈕的點擊事件中,就會跳出個確認框,如圖用戶點擊確認以後,就加入到瀏覽器搜尋框中了。