很多现代的浏览器在地址栏的右边有个搜索框，默认的安装有 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 */
    }
}

这样，就可以将这个函数注册到某个链接或者按钮的点击事件中，就会跳出个确认框，如图

用户点击确认以后，就加入到浏览器搜索框中了。

--EOF--

Firefox3 即将发布，支付宝 的兄弟们正在完善对于 Firefox 的支持，在这里表示关注和支持。

Gracecode.com | Permalink(xHTML) | Trackback | Rss