IE 8.0 Beta1 新特性之—— WebSlice

时间:2021-10-17 18:07:05
WebSlices 允许用户订阅的网页部分内容。用户通常每天访问网站很多次以查看是否有新的更新。 RSS 源简化此体验: 用户可以订阅更新并查看它们的摘要,而不必导航到每个站点。 IE 8 Beta 1 添加了 WebSlices的功能。
WebSlices 是一项新的功能为 Web 站点与用户进行连接,允许用户直接订阅网页内容。 WebSlices 行为就像是信息源(Feed),其中客户端可以订阅,以获取更新和更改的通知。

以下是EBay提供的WebSlice
IE 8.0 Beta1 新特性之—— WebSlice

这个是一个具体的实例
IE 8.0 Beta1 新特性之—— WebSlice
在搜索结果里订阅某一个商品的拍卖信息。订阅后IE8的Favorite Bar里便多了一个WebSlice按钮。当拍卖信息发生变化(比如说是有人出了更高的价钱),该WebSlice按钮会闪动,点击后便如上图一样展开,显示新的拍卖信息。


用户在整个WebSlices的使用过程中有四个步骤
  • 发现
  • 订阅
  • 提示
  • 预览

发现(Discovery )

当IE8发现页面中存在WebSlices时,Tool Bar中会出现一个紫色的发现按钮,点击展开可以看到此页面的所有Feed(包括Rss之类的)。
IE 8.0 Beta1 新特性之—— WebSlice

而当鼠标悬浮在使用了特殊标记的那部分html上时,左上角也会浮出这个即处(in-place)发现按钮。
IE 8.0 Beta1 新特性之—— WebSlice

订阅(Subscribe )

点击紫色的发现按钮就可以完成订阅。当然,会有一个确认的对话框。
订阅后,Favorite Bar里就会出现对应的WebSlice按钮。
IE 8.0 Beta1 新特性之—— WebSlice

提示(Notify )

订阅信息发生变化,该WebSlice按钮会闪动提示.

预览(Preview)

点开Favorite Bar里的WebSlice按钮就可以预览订阅的信息。

IE 8.0 Beta1 新特性之—— WebSlice

如何编写WebSlice

IE 8.0 Beta1 新特性之—— WebSliceIE 8.0 Beta1 新特性之—— WebSlice<% ... @ Page Language="C#" AutoEventWireup="true" CodeBehind="WebSlices.aspx.cs" Inherits="OpenServiceTest.WebSlices"  %>
IE 8.0 Beta1 新特性之—— WebSlice
IE 8.0 Beta1 新特性之—— WebSlice
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
IE 8.0 Beta1 新特性之—— WebSlice
IE 8.0 Beta1 新特性之—— WebSlice
< html  xmlns ="http://www.w3.org/1999/xhtml"   >
IE 8.0 Beta1 新特性之—— WebSlice
< head >
IE 8.0 Beta1 新特性之—— WebSlice    
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
IE 8.0 Beta1 新特性之—— WebSlice    
< meta  name ="Keywords"  content ="WebSlices的测试例子"   />
IE 8.0 Beta1 新特性之—— WebSlice    
< meta  name ="Description"  content ="这是一个简单小Demo"   />
IE 8.0 Beta1 新特性之—— WebSlice    
< title > WebSlices Test </ title >
IE 8.0 Beta1 新特性之—— WebSlice
</ head >
IE 8.0 Beta1 新特性之—— WebSlice
< body >
IE 8.0 Beta1 新特性之—— WebSlice
IE 8.0 Beta1 新特性之—— WebSlice
< div  class ="hslice"  id ="hsliceTest" >  
IE 8.0 Beta1 新特性之—— WebSlice    
< h3   class ="entry-title" > WebSlices测试 </ h3 >
IE 8.0 Beta1 新特性之—— WebSlice    
< div  class ="entry-content" >
IE 8.0 Beta1 新特性之—— WebSlice        WebSlices的简单的示例。来自
< target ="_blank"  href ="http://bbs.csdn.net/"  title ="webSlices" > CSDN.NET </ a >
IE 8.0 Beta1 新特性之—— WebSlice    
< p > End time: < abbr  class ="endtime"  title ="20080417T14:55:00" > 过期测试 </ abbr ></ p >  
IE 8.0 Beta1 新特性之—— WebSlice    
< p > This clip updates every  < span  class ="ttl" > 15 </ span > minutes  </ p >  
IE 8.0 Beta1 新特性之—— WebSlice    
</ div >
IE 8.0 Beta1 新特性之—— WebSlice
</ div >
IE 8.0 Beta1 新特性之—— WebSlice
IE 8.0 Beta1 新特性之—— WebSlice
</ body >
IE 8.0 Beta1 新特性之—— WebSlice
</ html >
IE 8.0 Beta1 新特性之—— WebSlice
将需要提供webSlices订阅的网页内容,放在一个class为“entry-content”的容器内,当浏览器将鼠标移动到这个区域就会出现webSlices的订阅图标。

IE 8.0 Beta1 新特性之—— WebSlice

基本的元素:

1.WebSlice :必须的;

2.Entry Title :必须的 ;

3.Entry Content :可选的;


其他一些可选的标记:

End Time:指定过期时间

在entry-content元素里添加如下的代码

IE 8.0 Beta1 新特性之—— WebSlice< p > End time: < abbr  class ="endtime"  title ="2008-05-01T17:00:00" > 过期测试 </ abbr ></ p >  

这里唤醒标记是".hslice[id] .endtime",有意义的值的是title属性的值,而格式使用的是abbr-design-pattern。设置这个标记的意义是,当接近过期的时候(比如说5分钟前),Favorite Bar里的WebSlice按钮会闪动。而真的过期了,WebSlice按钮上的文字就会变灰了。


Time to Live:更新频率,制定WebSlice的客户端更新的频率

意义和rss里的ttl(Time-to-Live)值的意义是一样的,使用的标记也是".hslice[id] .ttl",表示浏览器检查的时间间隔是多少。

Feed URL:

IE 8.0 Beta1 新特性之—— WebSlice<? xml version="1.0" ?>
IE 8.0 Beta1 新特性之—— WebSlice
< rss  version ="2.0" xmlns:mon ="http://www.microsoft.com/schemas/rss/monitoring/2007" >
IE 8.0 Beta1 新特性之—— WebSlice  
< channel >
IE 8.0 Beta1 新特性之—— WebSlice    
< title > Feed for Item </ title >
IE 8.0 Beta1 新特性之—— WebSlice    
< link > http://auction.microsoft.com </ link >
IE 8.0 Beta1 新特性之—— WebSlice    
< description > Feed for auction item </ description >
IE 8.0 Beta1 新特性之—— WebSlice    
< ttl > 15 </ ttl >
IE 8.0 Beta1 新特性之—— WebSlice    
< item >
IE 8.0 Beta1 新特性之—— WebSlice      
< title > Item = $66.00 </ title >
IE 8.0 Beta1 新特性之—— WebSlice      
< link > http://auction.microsoft.com/item#1 </ link >
IE 8.0 Beta1 新特性之—— WebSlice      
< description > high bidder: buyer1 … </ description >
IE 8.0 Beta1 新特性之—— WebSlice      
< mon:endtime > 2008-02-28T17:00:00 </ mon:endtime >
IE 8.0 Beta1 新特性之—— WebSlice    
</ item >
IE 8.0 Beta1 新特性之—— WebSlice  
</ channel >
IE 8.0 Beta1 新特性之—— WebSlice
这个feed里只允许有一个item。而如果提供了feedurl,就以feed为准了,页面里的其他标记(title description link)不再起作用。

 

认证:Authenticated WebSlices

两种方式进行验证:永久 Cookie ;HTTP 身份验证。

发现机制

经过前面的介绍,大家应该了解WebSlice是如何被发现的了。但是除了之前的介绍以外,我们还可以为页面制定一个主WebSlice. 或是让即处发现按钮不会浮出(也许有人讨厌这个,比如影响他们自己定制的一些效果),或是用js来下达订阅命令。

主WebSlice

在ToolBar里的发现按钮是个(split button),展开可以看到页面里所有的WebSlice,而如果指定了主WebSlice以后,直接点发现按钮就可以了,不需要从展开的split button找出来再点。指定主WebSlice的代码 

IE 8.0 Beta1 新特性之—— WebSlice< head >  
IE 8.0 Beta1 新特性之—— WebSlice    
< link  rel ="default-slice"  type ="application/x-hatom"  href ="www.example.com/#auction"   />  
IE 8.0 Beta1 新特性之—— WebSlice
</ head >

rel type href这三个属性都是必须的。ref,type的值就是"default-slice","application/x-hatom",这段代码的页面 的地址是www.example.com,它指定的主WebSlice是"#auction.hslice"选出的。

禁用即处发现按钮

IE 8.0 Beta1 新特性之—— WebSlice< head >  
IE 8.0 Beta1 新特性之—— WebSlice    
< meta  name ="slice"  scheme ="IE"  content ="off"   />  
IE 8.0 Beta1 新特性之—— WebSlice
</ head >

使用js订阅WebSlice

js里订阅和原来添加到收藏的函数一样addToFavoritesBar。

window.external.addToFavoritesBar(string URL, string Title, [optional] string Type)

唯一值得一提的是最后的参数string Type,如果订阅的是WebSlice的话,Type必须为"slice",然后弹出的就不是addToFavoritesBar的确认框,而是添加WebSlice的确认框。

刷新WebSlice的发现

当浏览器解析完html以后,会在WebSlice发现按钮的split button里列出所有的feed和WebSlice,不过当dom发生变化,被列出的feed和WebSlice是不会同步更新的,使用

window.external.contentDiscoveryReset()

手动更新。在ajax的页面里,回调的最后不要忘了这句。

其他

默认情况下,IE8对feed和WebSlice的更新频率是24小时。 WebSlice里的脚本不会被执行,form里的字段也不会起作用。 WebSlice的更新时会和本地的WebSlice进行对比,如果有不同,Favorites Bar里的WebSlice按钮字体会加粗。

几点注意

•  不要在本地用静态页面测试webSlices示例页面。没有效果的,必须上传到服务器上才能有效果。
•  entry-content容器不能包含form表单。webSlices只能用来展现数据,不能进行互动性操作。
•  如果你原来的结构已经包含了class,那如何加上这些额外的class呢?其实很简单,只要两个class之间用空格隔一下就可以了。例如:<div class="my_oldclass entry-content">
•  如果你不想在页面上显示webSlices订阅标题(entry-title里面的内容),你可以将其display:none掉。这样,网页上便看不到这个webSlices订阅标题了,但是并不影响它在IE8收藏栏中的标题效果。