为网站添加 OpenSearch 功能

最近得知微博添加了 OpenSearch 功能，出于好奇，了解了一下如何为网站添加 OpenSearch 功能。

OpenSearch 是什么

OpenSearch 是一种用于共享搜索结果的协议，它可以让我们更加快速的搜索到我们需要的内容。一般浏览器在地址栏的右侧会有一个搜索栏，类似下图：

Firefox 的搜索栏

点击该搜索栏中的搜索图标，会出现一些候选的搜索方案，点击某一个方案，浏览器就会自动跳转到改方案对应的 URL。

=========2016/4/15 更新=========

Chrome 地址栏

突然发现 Chrome 对 OpenSearch 的支持加强了，直接在地址栏提示用户可直接搜索了。

=========2016/4/15 更新结束=========

实现 OpenSearch

实现 OpenSearch 十分的简单。只需要三步：

获取网站的搜索地址，比如 http://zdm.yixun.com/search/?keyword=xxxx；
编写 OpenSearch 配置文件；
页面中添加对配置文件的引用。

OpenSearch 配置文件的一般格式如下：

<!-- opensearch.xml -->
<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
    <InputEncoding>utf-8</InputEncoding>
    <ShortName>易启玩</ShortName>
    <Description>易启玩搜索</Description>
    <Url type="text/html" template="http://zdm.yixun.com/search/?keyword={searchTerms}"/>
  </OpenSearchDescription>

其中的 Url 标签的 template 属性就是第一步中获取的网站搜索地址。

如果需要加上图标，可以添加如下语句：

<Image height="64" width="64" type="image/png">http://example.com/websearch.png</Image>
<Image height="16" width="16" type="image/vnd.microsoft.icon">http://example.com/websearch.ico</Image>

完整的配置文件可以参考这里

页面中引用配置文档可以使用 link 元素或者是 JS 的方式进行引用。

<!-- link 元素方案 -->
<link rel="search" type="application/opensearchdescription+xml" href="http://zdm.yixun.com/opensearch.xml" title="易启玩" />

因为需要处理兼容性，JS 的引用方案比较繁琐：

// JS 方案
function installSearchEngine() {
 if (window.external && ("AddSearchProvider" in window.external)) {
   // Firefox 2 and IE 7, OpenSearch
   window.external.AddSearchProvider("http://example.com/search-plugin.xml");
 } else if (window.sidebar && ("addSearchEngine" in window.sidebar)) {
   // Firefox <= 1.5, Sherlock
   window.sidebar.addSearchEngine("http://example.com/search-plugin.src",
                                  "http://example.com/search-icon.png",
                                  "Search Plugin", "");
 } else {
   // No search engine support (IE 6, Opera, etc).
   alert("No search engine support");
 }
}

MDN 示例

添加 OpenSearch 的意义

通过浏览器的搜索栏可以让我们无需登录网站就搜索到相应资源，更加高效地将互联网资源整合在一起。对于内容为主的网站更加需要添加 OpenSearch 功能。

我们的易启玩栏目可以把这个施工需求提上日程了。

参考文献

百度百科 http://www.opensearch.org/Home MDN

YIXUNFE / blog