靠谱的软件下载站
当前位置:  IEfans/IE专区/IE相关/在IE9浏览器和Windows 7中固定网站

在IE9浏览器和Windows 7中固定网站

IE相关 互联网 2011-10-16 阅读(994)
IE9浏览器的一个新特性是能够把网站固定到任务栏、开始菜单或桌面上。使用Windows 7上的IE9的用户可以利用该特性查看网站。 Windows 7用户之前已经能够将应用程序固定到任务栏上,而这个特性将该原理延伸到了Web。这意味着可以添加一个功能层,这对于网站所有者和网站用户来说都有巨大机会,对开发人员也是如此。 固定网站 (Pinned Sites)开始时可能看起来与书签或快捷方式类似,但其中有些功能发展到了全新的水平,值得细看一下。 当然,应该是 Web 开发人员(代表网站所有者)来安装将会支持和鼓励用户使用固定网站的框架。这主要涉及在网站页面的 节中加入一些适当的配置代码,但它也的确需要一些有意思的决策。 在Internet Explorer 9中固定网站 固定网站是实现Microsoft 把用户首选的网络体验放在“前面和中心”这一公开目标的一个重要手段。最小化浏览器的镶边、按浏览次数最多的页面对新选项卡进行排序、把地址栏和搜索框结合起来,所有这些的目的都在于把更多注意力放在网站内容上,而不是放在呈现内容所需的技术上。 固定网站在某程度上也基于同样的思维方式。它可以让网站访问者向他们最想访问的网页提供可实现轻松访问的最高优先级,并主动提供有关这些网页的更新信息,从而吸引他们回到网站。 固定网站不需要修改现有内容。它们将在自己的浏览器窗口打开,非常像自主品牌的桌面应用程序。 它位于各种实现和配置选项中,尤其是像自定义浏览器品牌和网站驱动的用户操作调用等特性,这是固定网站提供的一种网站所有者希望能利用的营销机会。 为其在线消费者配置了固定网站的公司,已经报告其流量和用户互动均有所增加 让我们探索一些不同的固定网站具体特性,来看看开发人员所扮演的角色。 工作原理 使用 IE9 来固定一个网站有三种方式:拖动 favicon(在地址栏中网站的 URL 旁边可以找到)、拖动页面上特定用途的预配置图像,或从浏览器窗口把选项卡撕掉并把它拖动到一个固定的位置:本文中,我们将重点放在任务栏。在任何情况下,最终固定网站的任务栏图标将和 favicon 相同: 启动一个固定网站后,后退前进按钮将变成 favicon 的主要颜色并稍微向右移动,为 favicon 腾出空间,然后favicon 将成为固定网站的首页按钮,从而营造了一个有品牌的功能体验。 您可能会注意到,地址栏外的 favicon 比里面的更大。这充分利用了 favicon 支持不同分辨率的能力。 如果您的favicon 是 64×64 或 32×32 像素的,而不是更为标准的 16×16 的,任何浏览器都将把它缩小,在您的地址栏中显示它,但 IE9 将使用一个 24×24 的特殊 favicon 版本,即更大的 favicon 作为固定网站的主页按钮,使该网站的品牌效果更明显。 如果您把任务栏配置为使用小图标,您的固定网站图标将显示为 16×16,否则将显示 32×32 的版本。 所有开发人员必须要做的只是使用他们喜欢的图像编辑软件或独立应用程序创建一个 favicon,并把它上传到网站的根目录。我使用 Photoshop 和一个插件处理 .ico 文件。您也可以使用 X-Icon Editor 工具。 如果您的网站还没有使用 favicon,还需要在网站头中插入一行代码: 图标 好了,您已经有了一个漂亮的高分辨率 favicon,它可以被拖动到任务栏变成一个任务栏图标,提供某个网站的快捷方式。 将鼠标指针悬停在已固定于 Windows 7 任务栏上的应用程序图标上时,会看到一个所链接的程序的缩略图视图。单击该缩略图或图标,该程序将占据主窗口。固定网站的图标也是如此。 但是,被固定于任务栏的网站图标提供了更进一步的功能。 如果固定网站有多个打开的选项卡,任务栏图标将使用分层效果,每一层显示一个打开的选项卡。 在网页的多层图标上悬停鼠标指针,将为您排列显示在每个选项卡上的网页缩略图。单击缩略图就能访问那个固定网站的选项卡。 这不需要开发人员做任何工作,但是,您可以插入一些特性检测代码,检查用户的浏览器是否支持网站的固定,这是一个很好的实践。 这将执行以下任务: if (window.external.msIsSiteMode) { // Check if the website was launched from a pinned site. if (window.external.msIsSiteMode()) { // TRUE } else { >>// FALSE } } if (window.external.msIsSiteMode) { // Check if the website was launched from a pinned site. if (window.external.msIsSiteMode()) { // TRUE } else { // FALSE } } 在下一部分内容中,开发人员的工作会多一点。 跳转列表 开发人员能够创建自定义的跳转列表,可以通过右键单击固定网站的任务栏图标访问该跳转列表。跳转列表使用户无需先启动一个浏览器窗口就能执行操作,或访问网站的特定区域或 Web 应用。 系统自动为固定网站建立了一个默认的跳转列表,看起来像这样: 只需少量代码,就可以在跳转列表中添加很多功能。 网站页面 HTML 中的 meta元素可以自定义固定网站启动后的呈现方式,语法如下: 其中 name 的值和 content 的指南如下: application-name:如果您没有为快捷方式命名,将使用页面标题代替。 msapplication-tooltip:当鼠标指针悬停在固定网站的快捷方式图标时,作为一个工具提示显示的可选文本。 msapplication-starturl:应用程序的根 URL。如果缺失,将使用当前页面的地址代替。只允许使用 HTTP、HTTPS 或 FTP 协议。 msapplication-navbutton-color:固定网站浏览器窗口中后退前进按钮的颜色。任何命名的颜色或由级联样式表(CSS) 级别3 (CSS3) 中定义的十六进制颜色值都是有效的。有关更多信息,请参见颜色表。如果这个 meta 元素缺失,将根据快捷方式图标来确定颜色。 msapplication-window:固定网站浏览器窗口的初始大小。内容子元素提供数值 N 作为大小,用分号隔开。注意,用户操作将覆盖该值。用户改变窗口的大小,然后关闭该实例时,Windows 将保留用户生成的窗口大小。 以下代码示例使用 meta 元素来自定义固定网站的快捷方式,含有一个工具提示、起始 URL、初始窗口大小和导航按钮颜色。 Meta 元素也可以用来定义应用程序特定的操作,这些操作可以被添加到跳转列表中。 赫芬顿邮报网站上就有一个该特性的出色实际例子,该网站是一个在线实体,在成为被固定最多的网站以及为其读者提供什么方面费了些周折。这就是基本的 Huffpost 跳转列表的样子: 在 Tasks(任务)列表中,使用不同颜色的 favicon 区分读者感兴趣的领域。注意,附在 Big News(特大新闻)项目上的图标对应于 Tasks (任务)下面列出的 Web 页面类别。 Big News(特大新闻)列表是一个自定义类别,当其网站上的项目更新时,在跳转列表上的项目也会更新——我们将在下面了解如何实现这一点。 这一切都有助于为赫芬顿邮报的读者制作一个有意义的、有用的和可操作的菜单,并且这最终会让网站的所有者受益。IE 博客 Ziad Ismail 介绍赫芬顿邮报作为使用网站固定的新闻服务案例:它绝对值得一读。 自定义跳转列表类别 正如赫芬顿邮报中的类别一样,开发人员可以在跳转列表中添加自定义类别,这不仅提供了一个网站或特定网页的直接链接,还向用户提供了该页面的信息。 为此,我们将调用 msSiteModeCreateJumplist 方法并使用 Alerts标签创建自定义类别。 在使用这些步骤中的任何其他方法之前,应至少调用一次 msSiteModeCreateJumplist。 window.external.msSiteModeCreateJumplist('Alerts'); window.external.msSiteModeCreateJumplist('Alerts'); 类别中至少有一个项目,类别标签才会在跳转列表中显示,所以下一步是用 msSiteModeAddJumpListItem 创建列表项目。第一个参数指定了该项目的名称,第二个参数指定了该项目被选中时所使用的 URL,而第三个参数则指定在列表中显示该项目时所使用的图标。 window.external.msSiteModeAddJumpListItem('Item 1', 'http://example.com/Item1.html', 'http://example.com/images/item1.ico'); window.external.msSiteModeAddJumpListItem('Item 2', 'http://example.com/Item2.html', 'http://example.com/images/item2.ico'); window.external.msSiteModeAddJumpListItem('Item 3', 'Item3.html', ‘http://example.com/otherimages/item3.ico'); window.external.msSiteModeAddJumpListItem('Item 1', 'http://example.com/Item1.html', 'http://example.com/images/item1.ico'); window.external.msSiteModeAddJumpListItem('Item 2', 'http://example.com/Item2.html', 'http://example.com/images/item2.ico'); window.external.msSiteModeAddJumpListItem('Item 3', 'Item3.html', ‘http://example.com/otherimages/item3.ico'); 创建列表及其项目之后,我们现在需要显示该列表。使用 msSiteModeShowJumplist 方法,Windows 会在跳转列表中显示当前列表项目,同时立即更新内存中的列表。 window.external.msSiteModeShowJumplist(); window.external.msSiteModeShowJumplist(); 调用 msSiteModeClearJumplist 方法时,Windows 从跳转列表中移除项目。 window.external.msSiteModeClearJumplist(); window.external.msSiteModeClearJumplist(); Amazon 网站有另一个利用跳转列表的好例子: 这些代码表示,页面载入时创建自定义的 Amazon Favorites(Amazon 收藏夹)类别,所以不需要 msSiteModeShowJumpList 方法。 注意,项目的添加顺序与它们在跳转列表上的显示顺序相反。 还要注意,Tasks(任务)列表重点关注用户能做的事情,而自定义 Amazon Favorites(Amazon 收藏夹)类别则列出用户可以访问的页面。 在自定义类别中,同时最多能显示 20 个项目。如果您在一个类别中添加的项目超过 20 个,最早添加的项目将被删除。虽然自定义跳转列表类别可以包含最多 20 个项目,但默认只能看到列表中的最后 10 项。 您可以更改任务栏的默认设置,但请记住这将只影响您的显示。其他用户可能还是只看到默认的 10 项。 1. 右键单击任务栏,并单击 Properties(属性)。 2. 单击 Start Menu (开始菜单)选项卡并单击 Customize(自定义)按钮。 3. 在对话框底部的 Start menu size(开始菜单大小)下面,将 Number of recent items to display in Jump Lists(在跳转列表中显示的最近项目数)选项设置为您喜欢的数字。 4. 单击 OK(确定),然后单击OK(确定)。 注意,用户可以从一个自定义跳转列表中删除项目(这些项目可能会在一个新会话中恢复),但用户不能从预先设定的 Tasks(任务)列表中删除项目。 实现动态的跳转列表 设置好自定义类别后,我们将通过调用 msSiteModeAddJumpListItem 方法动态添加项目。项目被添加到列表的顶部,与它们在跳转列表上的显示顺序相反。 在本例中,在我们自定义的“Alerts”类别中的两个项目被设置为响应onload 事件。在 Task1 之前定义 Task2,使它们以正确的顺序出现在跳转列表中。 var g_ext = null; window.onload = function() { try { if (window.external.msIsSiteMode()) { g_ext = window.external; g_ext.msSiteModeCreateJumpList("Alerts"); g_ext.msSiteModeAddJumpListItem( "Second Task","http://example.com/task2"," http://example.com/img/icon2.ico"); g_ext.msSiteModeAddJumpListItem( "First Task","http://example.com/task1"," http://example.com/img/icon1.ico"); } } catch(ex) { // Fail silently. } } var g_ext = null; window.onload = function() { try { if (window.external.msIsSiteMode()) { g_ext = window.external; g_ext.msSiteModeCreateJumpList("Alerts"); g_ext.msSiteModeAddJumpListItem( "Second Task","http://example.com/task2"," http://example.com/img/icon2.ico"); g_ext.msSiteModeAddJumpListItem( "First Task","http://example.com/task1"," http://example.com/img/icon1.ico"); } } catch(ex) { // Fail silently. } } 即使您关闭了固定网站,跳转列表上的项目仍然保持可见。但是,如果动态项目依赖于应用程序状态的改变,网站被关闭后,它们将不再有效。出于这个原因,跳转列表中的链接应包含足够的导航信息,而不会受应用程序状态的影响。 把我们的前两个任务设置为在 onload 时加载后,将不会自动显示对原始页面的更改。 现在我们要在自定义列表中多添加两个项目,这两个项目将在响应用户点击时更新。我们将保留在上面的例子中所设置的全局变量。 function buttonClick() { if (g_ext) { g_ext.msSiteModeClearJumpList(); g_ext.msSiteModeCreateJumpList("Alerts"); g_ext.msSiteModeAddJumpListItem("Fourth Task","http://example.com/task4","http://example.com/img/icon4.ico"); g_ext.msSiteModeAddJumpListItem("Third Task","http://example.com/task3","http://example.com/img/icon3.ico"); g_ext.msSiteModeShowJumplist(); } } function buttonClick() { if (g_ext) { g_ext.msSiteModeClearJumpList(); g_ext.msSiteModeCreateJumpList("Alerts"); g_ext.msSiteModeAddJumpListItem("Fourth Task","http://example.com/task4","http://example.com/img/icon4.ico"); g_ext.msSiteModeAddJumpListItem("Third Task","http://example.com/task3","http://example.com/img/icon3.ico"); g_ext.msSiteModeShowJumplist(); } } 还记得我曾提到用户可以从一个自定义类别的跳转列表中删除项目吗?在更新跳转列表的同时,msSiteModeShowJumpList 方法对从最后一次调用 msSiteModeShowJumpList 方法以来用户所删除的每个项目触发一次 onmssitemodejumplistitemremoved 事件。如果您使用 msSiteModeClearJumpList 清空列表,该事件将不会被触发。 关于网站固定还有相当多的话题,特别是一些您可以利用任务栏图标实现的明智事情,包括使用覆盖图标通知用户固定网站上的事件或状态变化,以及添加工具栏命令,让用户可以在一个固定网站的缩略图窗口内访问应用程序的功能。 我将把这些内容留到我的下一篇文章,还有关于如何充分利用网站固定的一些其他技巧,以及在使它为网站用户和网站所有者产生最大利益的过程中开发人员所扮演的角色。 但目前 Microsoft 的 www.ieliulanqi.com固定网站开发人员文档是有关网站固定的关键信息源,而在探索 IE 博客上的 Ziad Ismail 的系列文章也非常有用。 via:Ricky Onsman

标签:IE相关Windows 7IE9固定网站

Copyright © 1998-2017 www.iefans.net All Rights Reserved 湘ICP备13012168号-17