实现IE8的新特性

最新推荐文章于 2022-06-02 15:28:21 发布

转载最新推荐文章于 2022-06-02 15:28:21 发布 · 103 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yuehua/archive/2008/10/23/1318078.html

文章标签：

#c#

在上面一篇随笔中，主要是讲了IE8给我们上网冲浪带来的优越性，希望能够吸引大家去尝试着用用它，从本文开始，我们主要是以web开发员的角度去开发新特性，为我们自己产品或者网站的用户提供基于IE8的新特性，增强我们自己产品的用户体验。

在进入本文具体内容描述前，先简单介绍一下我阐述的思路。在每个新特性的介绍时，都需要做一个简单例子，主要包括以下内容：

1、应用场景

2、代码示例

3、参考资料

在进入下面具体内容钱，请下载示例代码，对照着去查看，应该效果比较快些。

/////////////////////////////////////////////无敌的分割线//////////////////////////////////////////////////

一、加速器的开发和实现

1、应用场景

当你在网上浏览时，如果查看到了一条有趣的消息，需要分享给朋友，或者看到了某个信息，需要了解更多关于该信息的资料时，加速器可以帮助你完成这些事情，同时不会让你中断当前浏览操作。个人认为，加速器就是帮你执行ctrl+a，ctrl+c，ctrl+v的操作，方便的把你选中的信息复制到加速器里面，然后加速器可以按照你指定的处理方式，去实现加速度功能，所以说加速器本身没有什么更多特别功能，关键在于能够把你重复劳动，或者需要做好几步的操作，让你鼠标轻轻一点就完成了，加速=快捷。

因此，我们可以大致列举一下加速器可以使用的地方：

发送博客，如Windows Live Spaces, Windows Live Writer, Blogger，...，可以把你当前查看的信息，直接发送到你的博客，分享给大家
电子地图，如Windows Live Map, Google Maps, Yahoo! Maps, MapQuest，...，可以选中某个城市或者其他的地名，然后用电子地图的加速器，可以方便快捷的查询出该地名的地图信息；
电子邮件，如Windows Live Mail, Gmail, Yahoo Mail，...，你可以把选中的信息，拷贝到发送邮件的页面，然后点击发送就可以了；
在线翻译，如Windows Live Translation, AltaVista's Babel Fish, Google Translation，...，可以把不认识或者默认的单词或者句子，通过加速器，去找到翻译后的内容
其他，有很多地方可以用，发挥你的想象力，一切皆有可能。

2、代码示例和讲解

了解了加速器的基本使用场景后，我们可以在自己的产品中选择合适的地方来提供加速功能，从加速器的开发到最终用户能够使用，需要做以下事情：

编制加速器文件（web站点开发员）
加速器部署（web站点开发员）和安装（用户）
为加速器提供处理程序（用户）

首先，我们可以用文本编辑器或者其他工具来编辑加速器文件，最好选择那些能够方便地处理xml文档的编辑器。
然后按照微软的OpenService加速器格式规范来编制自己的加速器。以下是我们已经编制好的一个加速器，名称为：AcceleratorDemo.xml

加速器示例
<?xml version="1.0" encoding="UTF-8"?>
<openServiceDescription
   xmlns="http://www.microsoft.com/schemas/openservicedescription/1.0">
       <homepageUrl>http://localhost/test/default.htm</homepageUrl>
       <display>
          <name>一号加速器</name>
          <icon>http://localhost/test/images/app.ico</icon>
      </display>
      <activity category="博客">
          <activityAction context="selection" >
              <preview action="http://localhost/test/Accelerators/preview.aspx">
              <parameter name="selectdata" value="{selection}" />
              <parameter name="mydata" value="My test data。" />
        </preview>
              <execute action="http://localhost/test/Accelerators/readdata.aspx">
                  <parameter name="selectdata" value="{selection}" />
              </execute>
          </activityAction>
      </activity>
</openServiceDescription>

加速器编制好后，就需要部署和安装，我们需要把AcceleratorDemo.xml文件放置到一个web站点的目录下，我这里测试的时候放置到http://localhost/test/AcceleratorDemo.xml位置。然后我们需要为用户提供一个安装的入口，告诉用户我们已经有了加速器，你可以来安装了，并且只要点击一下按钮就可以，因此我们新建了一个页面http://localhost/test/default.html文件，在该文件中，主要有以下代码：

加速器安装
<body>
<p>Add my demo  Accelerator to your IE8 Beta2.</p>
<p>
<button id="btnAddAccelerator"
    onclick="window.external.AddService('http://localhost/test/acceleratorDemo.xml')">
    安装加速器</button>
    </p>
</body>

为了灵活起见，我们可以判断是否已经安装某个加速器，代码示例如下：

Code
window.onload = function() {
    if (window.external.IsServiceInstalled('http://localhost/test/,'博客')) {
        document.getElementById('myButton').disabled = true;
    }
}

最后，我们需要编辑对应的处理程序，通过前面加速器的xml文档描述里面，可以发现，我们主要需要做两个方面的处理，第一，需要做预览时的处理，第二，需要做执行时的处理。我们编制了对应的preview.aspx和readdata.aspx页面，获取从加速器传来的参数，并且把最新的结果显示出来。

加速器的编制过程就是这样的了，在编制时需要注意按照OpenService规范来编写，并且里面涉及到的url地址，一定要是同一域名才行，任何地方出错了，加速器将不能够正常显示。（现在没有工具自动生成他，建议大家可以按照微软的OpenService规范，去做一个自动生成加速器的工具吧，将会受到欢迎）。

当我们部署了加速器后，用户在访问我们站点时，可以把加速器安装到用户的IE8里面，然后就可以在冲浪中使用到我们刚才做好的加速器了。

3、参考资料

OpenService Accelerators Developer Guide
http://msdn.microsoft.com/zh-cn/library/cc289775(en-us,VS.85).aspx
OpenService Format Specification for Accelerators
http://msdn.microsoft.com/zh-cn/library/cc304163(en-us,VS.85).aspx

二、Web Slice的开发和实现

1、应用场景

在找Web slice的使用场景前，我们先来回顾一下Web Slice本身的一些特性，Web Slice出现的位置是在“IE的收藏夹工具条”上，从左到右一字排开，当服务器中的内容更新后，IE收藏夹工具条上的Web Slice就给出提示（加粗和高亮），这里我们不难发现，Web Slice最主要的好处是能够“提示”，当然不要忘记了Web slice的订阅是可以“部分”，即对页面某部分内容进行订阅。

因此，我们可以找出需要把最新消息通知客户的场景，然后编制Web Slice去实现他，如：任务通知、邮件通知、预警消息、新闻、实时价格、工作流、...。给大家举个简单例子，如果你喜欢在某个小说站点看小说，由于每个小说作者更新时间又是不定点，你既不想花更多时间去不停的刷新小说更新列表，又不想因为没有及时关注它就漏掉了精彩内容，这个时候Web slice可以帮你解决这个问题，最简单的就是把用户收藏的小说列表做成web slice，然后再订阅到IE里面，只要有了新的更新，就会在Web slice的预览窗口中提示你，这样可以很方便的获取到最新的信息，而不会为自己代理更多的负担。

2、代码示例

Web Slice的开发应该是IE8新特性中，最简单的一个，不需要对原来的页面做大的改动，而只是在html标签的class属性里面，添加一些标记就可以了，如“hslice”，“entry-title”，“entry-content”等，然后用IE8浏览这些网页的时候，就会找到这些添加了标记的部分页面，并且完成web slice的订阅操作。详细的 Web slice定义办法，请参考MSDN里面的Web slice格式规范文章。

开发Web slice时，需要注意到Web slice有几种状态：订阅、预览、显示（执行），这些状态可以分别由不同的页面来实现或者用同一页面来实现其中一种或者几种状态，可以根据实际使用的需要去找到最适合自己产品的组合方式。举个例子，如果你的你期望你的预览状态中，能够响应一下鼠标事件，或者按钮事件，或者能够执行简单交互，那么你必须编制单独的预览页面来提供娱乐功能，否则在预览界面中不会响应你交互操作。

以下是一个非常简单的Web slice的代码示例，把订阅、预览和显示都集中在一个页面。

Web Slice定义
    <div class="hslice" id="demoslice1"
    style="border: 1px solid #000000; margin: 10px; padding: 10px; font-size:small; width: 400px; height: 450px;">
        <p class="entry-title">Web Slice功能介绍</p>
        <div class="entry-content">
            <p>
                简介：Web 页面的部分订阅。详细内容参考<a href="http://msdn.microsoft.com/zh-cn/library/cc196992(en-us,VS.85).aspx" target=_blank>微软网站</a>。
                 </p>
            <img alt="Internet Explorer 8 Web Slice" border="0" height="305"
                src="Images/MSIE.jpg" width="399" />
              <p>自动更新时间：<span class="ttl">15</span>分钟</p>
             <p>过期时间：<abbr class="endtime" title="2008-12-30T12:00:00-00:00">3个月</abbr></p>

        </div>
     </div>

当用户访问到添加了Web slice的页面，就可以用IE8浏览器实现发现和订阅操作，在今后浏览其他网站时，就可以享受到有了变化得到通知的功能。

3、参考资料

Web Slice Format Specification - Version 0.9
http://msdn.microsoft.com/zh-cn/library/cc304073(en-us,VS.85).aspx
IE8提供的RSS功能：
http://msdn.microsoft.com/en-us/library/cc196991(VS.85).aspx

三、即时搜索功能的开发和实现

1、应用场景

一直一来大家都是用Google、百度等搜索引擎去查询资料，而对于一般的网站，则只能够被动的让搜索引擎来搜索自己，而不能够按照自己的意愿提供搜索功能，现在在IE8中我们可以通过非常简单的办法来实现搜索功能，而且还可以提供可视化搜索功能，即搜索出来的结果中包括图片、文字、超链接等信息，方便用户直观的找到自己需要的信息。例如，把淘宝提供的“闪电搜索”加载到本地后，在IE的搜索框中，我们输入任意的产品关键词，然后就会得到包含图片信息的结果。

我们这里提供的搜索功能，不只是淘宝类电子商务网站需要，而且对于其他任何网站都合适，你可以构建自己网站特有信息的搜索功能，你的用户在浏览网页时，可以随时随地的在IE的搜索框中，通过关键词从你的网站中找到他最想要的信息。

2、代码示例

要开发及时搜索功能，需要完成以下操作：

定义OpenSearch描述文件
定义搜索建议文件（就是在IE搜索框中显示查询结果的）
搜索功能的部署和安装
即时搜索的使用

首先，我们定义一个OpenSearch描述文件，示例如下：

OpenSearch描述文件
<?xml version="1.0" encoding="utf-8" ?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
  <ShortName>即时搜索测试器</ShortName>
  <Description>用于展示IE8提供的即时搜索功能。</Description>
  <Tags>我的测试网站。</Tags>
  <Contact>zhzyang@winarray.com</Contact>>
  <Url type="text/html"
       template="http://localhost/test/VisualSearch/SearchResult.aspx?q={searchTerms}"/>
  <Url type="application/x-suggestions+xml"
       template="http://localhost/test/VisualSearch/VSearch.aspx?q={searchTerms}" />
  <LongName>测试即时搜索功能</LongName>
  <Query role="all" searchTerms="any" />
  <Developer>杨镇泽</Developer>
  <Attribution>
    Yzz,版权所有，2008
  </Attribution>
  <SyndicationRight>open</SyndicationRight>
  <AdultContent>false</AdultContent>
  <Language>zh-CHS</Language>
  <OutputEncoding>UTF-8</OutputEncoding>
  <InputEncoding>UTF-8</InputEncoding>
</OpenSearchDescription>

其次，定义VSearch.aspx和SearchResult.aspx文件，由于后者仅是一般的asp.net页面，只是获取传递过来的q的值，并显示处理的结果，而前者VSearch.aspx则是我们处理的重点。在VSearch.aspx中，需要最终输出一个xml文件，才能够在IE的搜索框中显示出来，因此我们直接在VSearch.aspx文件中写入一个xml，详细代码如下：

搜索建议（硬编码）
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="VSearch.aspx.cs" Inherits="VSearch" %>

<SearchSuggestion>
    <Query><%=HttpUtility.HtmlEncode(Request["q"])%></Query>
    <Section>
        <Item>
            <Text><%=HttpUtility.HtmlEncode(Request["q"])%> 结果一</Text>
            <Description>无图有超级链接</Description>
            <Url>http://localhost/test/default.htm</Url>
        </Item>
        <Item>
            <Text><%=HttpUtility.HtmlEncode(Request["q"])%> 结果二</Text>
            <Description>没有图片的结果</Description>
        </Item>
        <Item>
            <Text><%=HttpUtility.HtmlEncode(Request["q"])%> 结果三</Text>
             <Description>漂亮小女孩1.</Description>
            <Image source="http://localhost/test/images/cc2.jpg" alt="cc" width="75" height="75" />
        </Item>
        <Item>
            <Text><%=HttpUtility.HtmlEncode(Request["q"])%> 结果四</Text>
            <Description>漂亮小女孩2.</Description>
            <Image source="http://localhost/test/images/cc2.jpg" alt="beauty girl" width="75" height="75"/>
            <Url>http://www.microsoft.com/</Url>
        </Item>
        <Item>
            <Text><%=HttpUtility.HtmlEncode(Request["q"])%> 结果五</Text>
            <Description>漂亮小女孩3.</Description>
            <Image source="http://localhost/test/images/cc2.jpg" alt="beauty girl" width="75" height="75"/>
            <Url>http://www.microsoft.com/</Url>
        </Item>
    </Section>
</SearchSuggestion>

然后，我们需要在一个地方提供搜索引擎被发现和安装的地方，代码如下：

安装搜索提供程序
<input id="btnSearch" type="button" value="安装自定义搜索提供程序" onclick="window.external.AddSearchProvider('http://localhost/test/VisualSearch/searchdemo.xml');" />

最后，用户可以访问你的网站，然后点击我们的搜索功能的安装按钮，并使用你的搜索功能。

3、参考资料

Search Provider Extensibility in Internet Explorer
http://msdn.microsoft.com/en-us/library/cc848862(VS.85).aspx

OpenSearch规范
http://www.opensearch.org/Specifications/OpenSearch/1.1

转载于:https://www.cnblogs.com/yuehua/archive/2008/10/23/1318078.html