很多現代的瀏覽器在網址列的右邊有個搜尋框,預設的安裝有 Google 搜尋等。如下圖所示:
其實這是 OpenSearch 的一個應用,只要寫出對應的微格式的 xml 文件,就可以發展出對應的搜尋框。參考 OpenSearch 的定義文檔,可以基本上獲得基本的 xml 格式。例如某個典型的搜
很多現代的瀏覽器在網址列的右邊有個搜尋框,預設的安裝有 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 根以外,其他的定義從字面上就可以理解:
InputEncoding 指定搜尋的編碼,依網站的實際情況而定
ShortName 這個是搜尋的短名稱,例如“Google 搜尋”
Description 針對這個搜尋框的描述,例如“淘寶購物搜尋 - 只有你想不到,沒有你淘不到”
Image 類似網頁的 favicon ,用於識別搜尋
Url 這個是最重要的參數,指定搜尋的連結。它有許多參數,一般使用 {searchTerms} 參數指定搜尋詞即可。參數type=”text/html” 註明回傳的是頁面(瀏覽器會跳到這個頁面),如果是其他格式就會使用對應預設程式開啟(例如type=”application/rss xml” 就會使用RSS 閱讀器開啟)。
編寫 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 */ }}
這樣,就可以將這個函數註冊到某個連結或按鈕的點擊事件中,就會跳出個確認框,如圖使用者點擊確認以後,就加入到瀏覽器搜尋框中了。
以上是XML-OpenSearch應用的具體介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!