WebSlices 是一项新的功能为 Web 站点与用户进行连接,允许用户直接订阅网页内容。 WebSlices 行为就像是信息源(Feed),其中客户端可以订阅,以获取更新和更改的通知。
以下是EBay提供的WebSlice
这个是一个具体的实例
在搜索结果里订阅某一个商品的拍卖信息。订阅后IE8的Favorite Bar里便多了一个WebSlice按钮。当拍卖信息发生变化(比如说是有人出了更高的价钱),该WebSlice按钮会闪动,点击后便如上图一样展开,显示新的拍卖信息。
用户在整个WebSlices的使用过程中有四个步骤
- 发现
- 订阅
- 提示
- 预览
发现(Discovery )
当IE8发现页面中存在WebSlices时,Tool Bar中会出现一个紫色的发现按钮,点击展开可以看到此页面的所有Feed(包括Rss之类的)。
而当鼠标悬浮在使用了特殊标记的那部分html上时,左上角也会浮出这个即处(in-place)发现按钮。
订阅(Subscribe )
点击紫色的发现按钮就可以完成订阅。当然,会有一个确认的对话框。
订阅后,Favorite Bar里就会出现对应的WebSlice按钮。
提示(Notify )
订阅信息发生变化,该WebSlice按钮会闪动提示.预览(Preview)
点开Favorite Bar里的WebSlice按钮就可以预览订阅的信息。如何编写WebSlice
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< meta name ="Keywords" content ="WebSlices的测试例子" />
< meta name ="Description" content ="这是一个简单小Demo" />
< title > WebSlices Test </ title >
</ head >
< body >
< div class ="hslice" id ="hsliceTest" >
< h3 class ="entry-title" > WebSlices测试 </ h3 >
< div class ="entry-content" >
WebSlices的简单的示例。来自 < a target ="_blank" href ="http://bbs.csdn.net/" title ="webSlices" > CSDN.NET </ a >
< p > End time: < abbr class ="endtime" title ="20080417T14:55:00" > 过期测试 </ abbr ></ p >
< p > This clip updates every < span class ="ttl" > 15 </ span > minutes </ p >
</ div >
</ div >
</ body >
</ html >
基本的元素:
1.WebSlice :必须的;
2.Entry Title :必须的 ;
3.Entry Content :可选的;
其他一些可选的标记:
End Time:指定过期时间
在entry-content元素里添加如下的代码
这里唤醒标记是".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:
< rss version ="2.0" xmlns:mon ="http://www.microsoft.com/schemas/rss/monitoring/2007" >
< channel >
< title > Feed for Item </ title >
< link > http://auction.microsoft.com </ link >
< description > Feed for auction item </ description >
< ttl > 15 </ ttl >
< item >
< title > Item = $66.00 </ title >
< link > http://auction.microsoft.com/item#1 </ link >
< description > high bidder: buyer1 … </ description >
< mon:endtime > 2008-02-28T17:00:00 </ mon:endtime >
</ item >
</ channel >
认证:Authenticated WebSlices
两种方式进行验证:永久 Cookie ;HTTP 身份验证。发现机制
经过前面的介绍,大家应该了解WebSlice是如何被发现的了。但是除了之前的介绍以外,我们还可以为页面制定一个主WebSlice. 或是让即处发现按钮不会浮出(也许有人讨厌这个,比如影响他们自己定制的一些效果),或是用js来下达订阅命令。
主WebSlice
在ToolBar里的发现按钮是个(split button),展开可以看到页面里所有的WebSlice,而如果指定了主WebSlice以后,直接点发现按钮就可以了,不需要从展开的split button找出来再点。指定主WebSlice的代码
< link rel ="default-slice" type ="application/x-hatom" href ="www.example.com/#auction" />
</ head >
rel type href这三个属性都是必须的。ref,type的值就是"default-slice","application/x-hatom",这段代码的页面 的地址是www.example.com,它指定的主WebSlice是"#auction.hslice"选出的。
禁用即处发现按钮
< meta name ="slice" scheme ="IE" content ="off" />
</ 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收藏栏中的标题效果。