禁用ajax导航,AJAX 导航简介

AJAX 导航简介

01/29/2010

本文内容

c3c0f7bca1fab9a87d7d4bfbed0a26e1.gif

Internet Explorer 8 引入了异步 JavaScript 和 XML (AJAX) 导航。 有些最终用户在启用 AJAX 的网站中无法通过“后退”和“前进”按钮进行导航,而且无法更新浏览历史记录,这些功能可帮助减少这种情况的发生。 只需使用简单的几行脚本,即可向网站添加 AJAX 导航,从而像“传统”导航一样平稳而无缝地导航启用了 AJAX 的内容。

本主题包含以下各部分:

简介

问题的示例

工作原理

示例代码

相关主题

简介

用户通过实现 AJAX 获得的最大好处之一(实际上,这也是 AJAX 存在的主要原因之一)是,可以更新网页内容,而无需导航到新网页。 不过在带来便利的同时,也存在一些使用户受到困扰的缺点。 例如,在启用大量 AJAX 的网页上,每次更新都不会更新地址栏。 接下来,也不会更新“旅行日志”(浏览历史记录)。

AJAX 导航更改了此行为,它允许用户向后和向前导航,而无需离开 AJAX 应用程序。 启用 AJAX 导航的网站将触发诸如地址栏之类的浏览器组件的更新,采用的方式是:设置 window. location. hash 值,然后引发针对网页中警报组件的事件,甚至在旅行日志中创建条目。

问题的示例

例如,以一个地图服务网站(如 Windows Live Search 地图)为例。 对于该应用程序中启用了 AJAX 的功能(如平移和缩放),地址栏和旅行日志都将无法更新。 对于习惯于在地址栏中更改新网页的用户或依赖浏览器的“后退”和“前进”按钮的用户而言,他们可能有时会对此过程感到不解。 虽然一些网站在通过 AJAX 更新内容时会通过导航隐藏的 iframe 来绕开此限制,但此技术会降低性能。

工作原理

为了启用 AJAX 导航,以 IE8 模式运行的 Internet Explorer 8 会像“传统”导航一样对待 window.location.hash 属性的更新。IE8 模式是默认兼容性模式;有关模式的更多信息,请参见定义文档兼容性(可能为英文网页)。 在更新 hash 属性时,将在地址栏、旅行日志和“后退”按钮中更新上一个文档 URL(可能来自上一个哈希段)。 同时,将引发新的 onhashchange 事件,并在用户离开网页前保存该哈希 URL 段。

在采用此新功能的启用了 AJAX 的网页上,当 AJAX 内容发生更改时,会像平常一样进行无缝导航,但用户可以像对待“传统”导航一样对 AJAX 导航执行后退和前进操作。

示例代码

以下示例演示了此新功能的一种用法。 在此示例中,将用 Microsoft Virtual Earth 地图控件的 onendzoom 事件设置 hash 属性。 换句话说,每当用户进行缩放操作时,都将更新地址栏和旅行日志,这样用户便能够使用“后退”和“前进”按钮在各个缩放级别间进行前后导航。

AJAX Map

var oMap = null;

var iZoomLevel = 0;

function GetMap()

{

oMap = new VEMap('myMap');

oMap.LoadMap();

oMap.AttachEvent("onendzoom", ZoomHandler);

iZoomLevel = oMap.GetZoomLevel();

window.location.hash = iZoomLevel;

}

function ZoomHandler(e)

{

iZoomLevel = oMap.GetZoomLevel();

// The following declaration sets the hash property to a

// variable containing the URL fragment to be saved.

window.location.hash = iZoomLevel;

}

function HashChangeHandler()

{

var hash = window.location.hash;

var iNewZoomLevel = hash.substr(1);

if (iNewZoomLevel != iZoomLevel)

{

iZoomLevel = iNewZoomLevel;

oMap.SetZoomLevel(iNewZoomLevel);

}

}

style="overflow: scroll; height: 100%">

每当用户进行缩放操作时,都将更新地址栏中的段标识符,如下图所示。 在此网页上,这只是简单表示数字符号 (#) 后的整数将增大。

4b032dc191236fe15e6d3ccb9bc07943.gif

相关主题

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值