CN103984686A - 页面切换方法及装置 - Google Patents

Abstract

本申请公开了页面切换方法及装置，其中，所述方法包括：监控将当前页面切换到目标页面的操作请求，并获取所述目标页面的资源地址；通过对当前页面的统一资源定位符URL的哈希值进行修改，触发浏览器的哈希值改变事件，以便浏览器在原生的访问历史中记录所述哈希值的变化，并提供窗口句柄；其中，修改后的哈希值中包含有所述目标页面的资源地址信息；从所述窗口句柄中获取所述目标页面的资源地址，并根据所述目标页面的资源地址向对应的Web服务器发起异步加载请求；根据所述Web服务器返回的资源数据，在所述当前页面所在窗口中展现所述目标页面。通过本申请，为在异步加载的情况实现正确的页面前进或后退提供了基础。

Description

页面切换方法及装置

技术领域

本申请涉及Web应用技术领域，特别是涉及页面切换方法及装置。

背景技术

Web应用是依赖于客户端浏览器，采用HTML(Hyper text Markup Language，超文本标记语言)、CSS(Cascading Style Sheet，级联样式表)、JS(JavaScript)等技术实现的一种应用形式。视图之间的切换(例如，将页面窗口中显示的页面A切换到页面B)通常要通过浏览器跳转，即请求新的资源地址，在服务器响应完成后，浏览器进行重新加载，以便在页面窗口中显示出新的页面内容。值得注意的是，在浏览器进行重新加载的过程中，用户看到的将是空白页面。在智能移动终端上，由于受到移动带宽等限制，用户面对白屏的时间将会更长。

为了避免上述现象的发生，现在有许多Web应用支持SPI(single pageinterface，单页面交互)，与传统的MPI(multi page interface，多页面交互)比起来，它在进行页面切换时，无需载入新的网页，速度会快很多，用户体验也会好很多。但是，在这种SPI方式下，页面的切换一般是异步加载的方式实现的，也即页面大部分内容由AJAX(Asynchronous JavaScript and XML，异步JavaScript和XML)载入。具体实现时，是由页面中的JS脚本发起AJAX请求，在服务器返回页面资源内容之后，JS进行页面内容的切换，整个过程不再通过浏览器来实现。

这种异步加载方式能够加快响应速度，更适合在智能移动终端中应用。然而，在实际应用中可能会存在一些问题，例如，在通过上述这种异步加载方式从页面A切换到页面B之后，如果用户点击浏览器的后退按钮，就会发现无法退回到页面A，等等。

发明内容

本申请提供了页面切换方法及装置，以实现在异步加载的情况下正确的进行页面前进或后退。

本申请提供了如下方案：

一种页面切换方法，包括：

监控将当前页面切换到目标页面的操作请求，并获取所述目标页面的资源地址；

通过对当前页面的统一资源定位符URL的哈希值进行修改，触发浏览器的哈希值改变事件，以便浏览器在原生的访问历史中记录所述哈希值的变化，并提供窗口句柄；其中，修改后的哈希值中包含有所述目标页面的资源地址信息；

从所述窗口句柄中获取所述目标页面的资源地址，并根据所述目标页面的资源地址，向对应的Web服务器发起异步加载请求；

根据所述Web服务器返回的资源数据，在所述当前页面所在窗口中展现所述目标页面。

一种页面切换装置，包括：

监控单元，用于监控将当前页面切换到目标页面的操作请求，并获取所述目标页面的资源地址；

哈希值修改单元，用于通过对当前页面的统一资源定位符URL的哈希值进行修改，触发浏览器的哈希值改变事件，以便浏览器在原生的访问历史中记录所述哈希值的变化，并提供窗口句柄；其中，修改后的哈希值中包含有所述目标页面的资源地址信息；

异步加载请求单元，用于从所述窗口句柄中获取所述目标页面的资源地址，并根据所述目标页面的资源地址，向对应的Web服务器发起异步加载请求；

展现单元，用于根据所述Web服务器返回的资源数据，在所述当前页面所在窗口中展现所述目标页面。

根据本申请提供的具体实施例，本申请公开了以下技术效果：

通过本申请，可以监控到从当前页面向目标页面切换的操作请求之后，可以在获取到目标页面的资源地址之后，通过对URL中的哈希值进行修改，来触发浏览器的哈希值改变事件，浏览器就会自动在原生的访问历史中增加一条关于hash变化的记录，并且提供窗口句柄，这样本申请实施例中JS就可以从窗口句柄中获取到目标页面的资源地址，然后采用异步加载的方式请求目标页面的资源内容，并在窗口中进行展现。由于在浏览器的访问历史中增加了关于hash变化的记录，相当于记录了各个页面与hash之间的对应关系，因此，在执行页面的前进或者后退操作时，就可以根据这种对应关系，前进或者后退到正确的页面。

当然，实施本申请的任一产品并不一定需要同时达到以上所述的所有优点。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是现有技术中异步加载过程中的页面后退过程示意图；

图2是本申请实施例提供的方法的流程图；

图3是本申请实施例提供的一方法中的系统框架示意图；

图4是本申请实施例提供的另一方法的流程图；

图5是本申请实施例提供的装置的示意图。

具体实施方式

下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员所获得的所有其他实施例，都属于本申请保护的范围。

首先需要说明的是，在实现本申请的过程中发明人发现，现有的异步加载技术中之所以会存在无法后退到上一页面，这是因为，每一次的AJAX请求都不能在浏览器的访问历史中记录，换言之，当连续请求多个页面文档后，用户点击浏览器“后退”按钮或者键盘上“退格”键执行返回操作时，浏览器会从访问历史记录中找到上一个页面的地址(URL)，然后显示出该地址对应的页面。但是，对于通过AJAX请求切换的页面，切换前后的页面具有相同的URL，也就是说，如果采用异步加载的方式从页面A切换到页面B，但是浏览器却无法记录这一切换过程，在浏览器看来，页面A与页面B具有相同的地址，相当于是同一页面，因此，在显示出页面B之后如果进行后退操作，就无法退回到页面A。

例如，参见图1，假设从页面A到页面B是采用的正常的浏览器跳转的方式，则在浏览器的访问历史中会分别记录下页面A的URL：taobao.com，以及页面B的URL：example.com(该页面可能是一个网站的首页视图)，在显示出页面B之后如果选择后退，则浏览器会根据访问历史记录，发现上一个页面的地址是taobao.com，于是可以按照该地址对页面A进行重新加载，从而正常的退回到页面A。

在显示出页面B之后，如果又在页面B中以异步加载的方式切换到页面C(对应网站的其他视图)，则浏览器就无法发现该操作，切换的结果是，虽然网页窗口内显示的内容变成了页面C，但是URL却一直没有变，仍然是example.com，因此，浏览器也不会在访问历史中记录关于此次页面切换的任何信息。在显示出页面C之后，如果用户进行后退操作，则浏览器根据访问历史记录会发现上一个地址是taobao.com，于是根据该地址进行重新加载，使得最终后退到的页面仍然是页面A，而不是页面B。

可见，之所以在执行后退操作时会发生问题，主要是因为在执行AJAX请求加载页面的情况下，切换前后页面的URL不变，浏览器无法感知到该切换事件的发生，不会在访问历史中对URL进行记录。因此，如果在以异步加载的模式进行页面切换时，能够通过某种方式记录这种变化，这样，在执行后退或者前进操作时，就能够正确的到达用户所希望的目标页面。

为此，在本申请实施例中，采用以了一种基于路由控制器的页面切换方法，其中，所谓的路由控制器是一种形象的说法，意思是，可以在进行异步加载的过程中，对页面切换的情况进行记录，使得在执行页面前进或后退操作时，可以正确的前进或者后退到所需要的页面。具体实现时，可以在使用异步加载的方式切换页面时，修改URL的哈希(hash)值，以此来触发浏览器的哈希值改变事件，这样浏览器就会自动将改变了哈希值之后的URL记录在访问历史记录中，以此来跟踪页面的切换过程。换言之，可以根据浏览器提供的哈希值改变事件，封装一整套方法，通过此方法可配置和建立hash匹配，使得每个AJAX异步加载的页面分别和URL中hash值一一对应，这样，当需要进行页面后退时，就可以根据访问历史记录中记录的上一个页面的哈希值，对上一个页面进行异步加载，展现出上一个页面，进而解决使用AJAX时浏览器无法正常返回上一步的问题。为了便于理解，下面首先对URL的hash值以及哈希值改变事件进行简单地介绍。

关于URL的hash值，就是一个URL中“#”及其之后的字符串。从定义来看，“#”代表网页中的一个位置。其右面的字符，就是该位置的标识符。比如http://www.example.com/index.html#print，就代表网页index.html的print位置。浏览器读取这个URL后，会自动将print位置滚动至可视区域。“#”是用来指导浏览器动作的，对服务器端完全无用。所以，HTTP请求中不包括“#”，也就是说，在第一个“#”后面出现的任何字符，都会被浏览器解读为位置标识符。这意味着，这些字符都不会被发送到服务器端，并且如果仅改变URL中“#”后的部分，浏览器不会重新加载网页。例如，将http://www.example.com/index.html#location1变为http://www.example.com/index.html#location2，浏览器不会重新向服务器请求index.html。但是，每一次改变“#”后的部分，都会在浏览器的访问历史中增加一个记录，此时，如果使用“后退”按钮，就可以回到上一个位置。具体在修改URL的hash值时，可以通过window.location.hash这个属性来进行修改，该属性可读可写，读取时，可以用来判断网页状态是否改变；写入时，则会在不重载网页的前提下，创造一条访问历史记录。因此，在本申请实施例中，就可以用不同的hash值，来表示出不同的访问状态。

哈希值改变事件可以是HTML5中定义的事件，如onhashchange事件，当#值发生变化时，就会触发这个事件。例如，浏览器原生提供哈希值改变的监控，比如，在链接http://domain#a/b，“#a/b”即为URL中的hash值，当hash发生变化时，浏览器不会重新加载页面，而是分发哈希值改变事件给window(当前文档窗口)，并且提供句柄(handler)给开发者做相应的处理。

可见，在需要进行页面切换时，就可以首先修改页面URL的哈希值，来触发浏览器的哈希值改变事件，同时可以在浏览器的访问历史中添加一条记录。但是，需要注意的是，在修改了URL的hash值之后，浏览器并不会重新加载界面，并且该修改后的hash值是由本申请实施例中的JS修改后的，并非原页面中定义的锚点等，进而也无法直接实现页面的切换。因此，在触发了哈希值改变事件之后，还需要本申请中的JS脚本来进行具体的页面切换操作。

具体的，由于在触发了浏览器的哈希值改变事件之后，浏览器会提供相应的回调函数(也即句柄)，我们的JS脚本就可以从回调函数中获取到目标页面对应的哈希值。因此，在具体实现时，在设置hash值时，各个页面的hash值中就可以包含各个页面的资源地址(或称文件路径)，这样，就可以从浏览器提供的回调函数中获取到目标页面的hash值，进而从中提取出目标页面的资源地址，然后，JS脚本就可以根据该资源地址向目标页面的Web服务器发起资源请求，在获取到资源之后，就可以将其展现在当前窗口中，从而实现页面的切换。

也就是说，在本申请实施例中，每次进行AJAX请求时，都可以为请求的目标页面设置hash值，该hash值中保存的信息就可以包括各个目标页面的资源地址，这样，在浏览器将各个页面的带有hash值的URL保存到访问历史记录中之后，就相当于在访问历史记录中保存了各个页面的资源地址，这样在进行页面的前进后退操作时，就可以根据各自的资源地址重新发起异步加载。

可见，在本申请实施例中，在每次进行页面切换时，都可以通过修改URL的hash值，来触发浏览器的哈希值改变事件，其中，hash值中需要保存有目标页面的资源地址，也即，使用目标页面的资源地址来修改URL的hash值，因此，在修改URL的hash值之前，需要首先获取目标页面的资源地址。关于如何获取到目标页面的资源地址，通过具体的情况的不同会略有不同。例如，当用户在一个当前页面中点击超链接的时候，如果该超链接被定义为需要按照异步加载的方式加载对应的目标页面，则会引发从当前页面到目标页面的切换。此时，就可以按照本申请实施例提供的方式，首先获取到目标页面的资源地址，然后用其修改当前页面的URL中的hash值，以此触发浏览器的哈希值改变事件，并从浏览器提供的回调函数中提取目标页面的资源地址，然后再根据该资源地址向对应的Web服务器发起异步加载请求，在获取到资源内容之后，进行页面的切换显示，显示出该超链接对应的目标页面。

其中，对于超链接对应的目标页面的资源地址，可以是由开发者提供的，由于超链接是在当前页面中，因此，在当前页面的HTML代码中会包含有对该超链接的定义，其中会指明超链接对应的目标页面的资源地址，因此，就可以从HTML代码中去获取目标页面的资源地址。当然，对于本申请实施例而言，这种超链接并不是普通的超链接，所谓的普通的超链接就是指当被点击之后由浏览器对页面进行重新加载，而本申请实施例中，超链接被点击之后，是需要采用异步记载的方式进行加载，因此，需要开发者在编写HTML代码时，对超链接进行特殊的定义。但对于开发者而言，不必关注具体的hash匹配机制(是由本申请实施例提供的JS内部实现的)，只需要在普通超链接上添加本申请约定的自定义属性，即可完成所有视图切换工作，比如：

-dataRole：inline//是否通过内联的方式加载页面

-href：filepath//目标页面地址

-checked：true//点击超链接时是否通过页面逻辑验证，比如，数据检测等。开发者也可以自行在该页面中对点击事件进行监听，同时设置此属性值，最终程序会根据此属性值来决定是否跳转

其中，dataRole以及checked属性都可以是本申请实施例中的约定属性，dataRole属性用于表示是否需要用异步加载的方式加载目标页面，checked属性用于表示在跳转到目标页面之前是否需要进行逻辑验证(例如，验证是否登录等等)。也就是说，对于普通的超链接而言，一般只需要定义href属性，其属性值为目标页面的资源地址，但在本申请实施例中，还可以同时定义dataRole属性，另外，如果需要，还可以定义checked属性。在这样定义了超链接属性之后，在用户点击超链接时，本申请实施例的JS就可以从当前页面的HTML代码中获取到该超链接的属性值，然后就可以确定出是需要按照异步加载的方式加载该超链接对应的目标页面，接下来就可以按照本申请实施例所述的流程执行后续的操作。首先，根据从HTML代码中获取到的超链接属性值，获取到超链接对应的目标页面的资源地址，然后用该资源地址修改当前URL中的hash值，触发浏览器的哈希值改变事件，等等。

需要说明的是，对于一个网页中包含的采用异步加载方式进行加载的超链接，在从当前网页向超链接对应的目标网页进行视图切换时，开发者还可以定义切换时的动画效果，例如，可以定义页面的推送方向，包括从左向右进入，或者从右向左进入等等。在本申请实施例中，开发者也可以一并在超链接的属性中进行定义，例如，在前述例子基础上还可以为超链接增加以下属性：

-animDir：forward页面推送方向(forward、back)

本申请实施例中，JS脚本在获取当前超链接的属性值时，也可以获取到该属性，用于表示采用怎样的动画效果来显示目标页面，进而，在获取到该目标页面的资源内容之后，就可以采用相应的动画效果实现目标页面的展现。例如，如果当前超链接的animDir属性是forward，则将获取到目标页面的资源内容插入到当前视图节点之前，否则，如果当前超链接的animDir属性是back，则将获取到目标页面的资源内容插入到当前视图节点之后，然后就可以利用CSS3(CSS的版本三，能够实现一些动画类的特效)来实现相应的动画效果，并展现出对应的目标页面。

以上介绍的方式中，开发者需要为超链接定义多个属性值，在实际应用中，还可以采用比较简单的方式来进行定义，例如：

<a href＝″#b/forward″class＝″rightbar″>下一步</a>

也即，由于普通的超链接在定义时直接定义为“href＝b”即可，因此，可以通过在定义中加入“#”，来表示需要以本申请实施例中提供的异步加载方式进行视图的切换。同时，也可以将动画效果信息直接在href属性中进行定义。当然，上述定义的格式并不是唯一的，也可以按照直接的需要设定其他格式，开发者按照设定好的格式进行超链接的定义即可。

另一种涉及到页面视图切换的情况一般是发生在需要后退或者前进到某目标页面时，当然，由于是后退或者前进到该目标页面，就意味着在此之前已经按照本申请实施例提供的异步加载的方式显示过该目标页面，该目标页面对应的hash值已经在浏览器的访问历史中进行了记录，因此，就可以从访问历史记录中找到该目标页面的hash值，然后从中提取出目标页面的资源地址，用该资源地址来修改当前URL的hash值。

例如，假设需要后退到目标页面，并假设当前窗口之前显示的上一个页面(也就是需要后退到的目标页面)的hash值为last_hash，该hash值会在浏览器的访问历史中记录；当前窗口当前显示的页面的hash值为current_hash；则在发出后退操作请求之后，可以首先从浏览器的访问历史中获取到上一个页面的hash值last_hash，比较前两者得知hash发生了变化，因此，首先将URL中的current_hash修改为last_hash，以此触发哈希值改变回调，然后从回调函数中获取到last_hash，从中可以提取出上一个页面的资源地址，然后就可以根据该资源地址向对应的Web服务器发起异步加载请求，在获取到资源内容之后，进行页面的切换显示，实现将页面后退到上一个页面。

通过以上所述可见，在页面视图切换的过程中，最初的切换一般是由用户在某当前页面中点击了某超链接来触发的，该超链接是开发者按照本申请实施例提供的方式定义的，将定义好的属性写在当前页面的HTML代码中，并在当前页面中插入本申请实施例提供的JS代码；因此，当该超链接被点击之后，JS代码就可以按照本申请实施例提供的方法流程，进行URL中hash值的修改，并将目标页面的资源地址写入到hash值中，触发浏览器的哈希值改变事件，并从浏览器提供的回调函数中获取到目标页面的资源地址，然后按照异步加载模式加载页面，等等，从而保存各个目标页面与hash值之间的对应关系。之后，如果用户点击页面的后退操作，则可以根据记录的hash值情况，找到上一个页面对应的hash值，仍然首先修改当前URL的hash值，触发浏览器的哈希值改变事件，并从浏览器提供的回调函数中获取到目标页面的资源地址，再发起异步加载请求，以此类推。也就是说，无论是在页面中点击超链接，还是执行页面的前进或后退操作，都可以首先由JS脚本来修改URL的hash值，来触发浏览器的哈希值改变事件，之后再进行异步加载操作，以此记录下每次访问的页面的访问历史轨迹，使得每次页面前进或者后退操作都能准确到达下一个或上一个页面。

例如，页面A中被插入了本申请实施例中的JS脚本，并按照本申请实施例的方式定义了某超链接，用户在页面A中点击了该超链接之后，JS脚本就可以取出该超链接的属性值，从中获取到该超链接对应的目标页面B的资源地址，然后用该地址来修改页面A对应的URL中的hash值，例如，由hashA修改为hashB，由此触发浏览器的哈希值改变事件，此时，在浏览器的访问历史中进行记录，即记录下页面B与hashB之间的对应关系，之后JS对页面B进行异步加载。在显示出页面B之后，当前网页的地址应该是用一个包含有hashB的URL来表示的；此时，如果用户点击后退按钮，则JS首先查询浏览器的访问历史记录，发现上一个地址是一个包含有hashA的URL，于是就可以从该hash中提取出页面A的资源地址，然后JS脚本首先将hashB修改为hashA，以此再触发浏览器的哈希值改变事件，此时，在浏览器的访问历史中进行记录，然后JS再根据浏览器提供回调函数取出页面A的资源地址，再发起异步加载请求，显示出页面A。可见，虽然从页面A切换到页面B的过程是采用异步加载的方式实现的，但是在显示出页面B之后，仍然能够成功的后退到页面A。

这里需要说明的是，在上述例子中，页面A可能是某网站的首页，该页面可能是由浏览器正常的加载方式进行加载的，此时，在以异步加载的方式显示出页面B之后，如果用户执行后退操作，则JS会发现访问历史记录中的上一个地址是一个hash值为空的URL，此时，为了能够正常运行，可以将页面A的URL进行记录，作为加载页面A时所需的默认的资源地址，因此，当后退时，如果发现上一个页面的URL的hash值为空，就可以按照该默认的资源地址，对页面A进行加载及显示。

其中，在根据目标页面的资源地址为目标页面设置hash值时，可以按照预先设定的目录层级进行设置，这样，JS在根据目标页面的hash值加载目标页面时，就可以匹配hash的目录层级，设计每级目录对应的处理方式和响应，比如hash值“#a/？lotType＝c”，可以进行如下设计和约定：

a：待加载目标页面(html模板)的URL路径，也即资源地址；

？lotType＝c：页面其他参数处理，用于满足单个html模板对应多个应用逻辑的场景

当然，也可以不存在？lotType，也就是说，当JS从浏览器提供的回调函数中提取到hash值之后，就可以按照上述规则来提取目标页面的资源地址，向Web服务器请求资源内容，然后进行内容的展现即可。

此处需要说明的是，如前文所述，开发者还可为超链接定义了动画效果信息(包括向前或者向后的页面推送方向等信息)，为了能够在后续的页面前进或者后退时可能实现该动画效果，还可以在加载超链接对应的目标页面的过程中，对动画效果信息进行保存。

具体实现时，一种实现方式是，可以直接将动画效果信息也作为目标页面对应的hash值的一部分，写入到URL中，也就是说，在为某目标页面修改hash值时，除了将该目标页面的资源地址写入到该hash值中，还可以将该目标页面在展现是所需的动画效果信息也写入到hash值中。例如，假设目标页面的资源地址是a，动画效果信息是b，页面其他参数处理参数为c，则该目标页面对应的hash值可以为：“#a/b/？lotType＝c”，这相当于在前述例子基础上为hash增加了一个目录层级。JS在从浏览器的回调函数中获取到该hash值之后，也可以按照对应的层级目录的定义，解析hash值中包含的信息，获取到目标页面的资源地址、动画效果信息、其他参数，等等。

或者，另一种具体的实现方式可以是，仍然仅将目标页面的资源地址写入到hash值中，但是目标页面的动画效果信息可以由JS脚本另外进行单独保存。例如，可以生成一个变量，将各个目标页面的动画效果信息写入该变量中。该变量可以是由多个状态值组成的一个序列，每个状态值就对应着被访问的一个页面的动画效果信息，该序列中生成状态值时可以是与浏览器的访问历史中添加新的记录是同步的，也即，每次切换一个页面视图，都将切换后的页面对应的hash值写入到访问历史记录中，同时也将该切换后的页面对应的动画效果信息作为一个状态值写入到该变量中。这样，当需要后退或者前进到某页面时，就可以从浏览器的访问历史记录中获取上一个或者下一个页面的hash值，从中获取到上一个或者下一个页面的资源地址，并且，从JS脚本记录的该变量的状态值中取出该上一个或下一个页面的动画效果信息，然后按照资源地址下载资源内容，再按照该动画效果展现出对应的资源内容即可。

当然，在实际应用中，JS在一个变量中记录各个页面的动画效果信息的同时，也可以连同各个页面的资源地址一起进行记录，在将动画效果信息也写入到hash值的情况下，就相当于在一个变量中保存各个页面的hash值。这样，在进行页面前进或者后退的过程中，就可以不必再依赖浏览器记录的访问历史，直接根据该变量在各个状态下的取值，就可以获取到上一个或者下一个页面的资源地址以及动画效果信息。

综上所述，本申请实施例提供了一种页面页面方法，参见图2，该方法可以包括以下步骤：

S201：监控将当前页面切换到目标页面的操作请求，并获取所述目标页面的资源地址；

如前文所述，页面切换请求可能是通过用户点击当前页面中的超链接发起的，也可能是通过用户点击前进、后退等操作按钮发起的。其中，关于前者，可以从当前页面的HTML代码中获取超链接的属性值，从中获取目标页面的资源地址，当然还可以同时获取到目标页面在展现时所需的动画效果信息。关于后者，可以从浏览器的访问历史记录或者本申请实施例中的JS脚本记录的自定义历史记录中记录的上一个或者下一个地址中获取，具体可以从地址中取出hash值，然后从中解析出目标页面的资源地址，如果hash值中包括有目标页面展现时的动画效果信息，还可以从中解析出动画效果信息。

S202：通过对当前页面的统一资源定位符URL的哈希值进行修改，触发浏览器的哈希值改变事件，以便浏览器提供窗口句柄；其中，修改后的哈希值中包含有所述目标页面的资源地址信息；

在获取到目标页面的资源地址之后，就可以用其来修改URL的hash值，当然，如果当前页面的URL中的hash值不为空，可将原hash值删除，然后将为该目标页面生成的hash值写入到URL中，如果当前页面的hash值为空，则直接在当前页面的URL最后添加为该目标页面生成的hash值。这样，由于URL中的hash值发生了变化，因此就可以触发浏览器的哈希值改变事件，并且浏览器会提供相应的回调函数，也即窗口句柄，该回调函数中就会包括有目标页面对应的hash值。同时，浏览器会自动的原生的访问历史中增加一条记录，记录下此次hash值的变化情况，当然浏览器并不会对页面重新加载。

S203：从所述窗口句柄中提取所述目标页面的资源地址，并根据所述目标页面的资源地址向对应的Web服务器发起异步加载请求；

虽然浏览器不会重新加载页面，但是，本申请实施例中的JS脚本会从窗口句柄中提取出目标页面的资源地址，并向对应的服务器发起异步加载请求。

S204：根据所述Web服务器返回的资源数据，在所述当前页面所在窗口中展现所述目标页面。

在服务器返回了资源数据之后，就可以通过JS脚本进行页面的切换，在切换后的页面中显示出目标页面的内容。其中，如果还获取到了目标页面的动画效果信息，还可以利用CSS3执行相关的动画，完成目标页面的显示。

以上过程可以通过图3更简化地进行表示(该图中假设存在动画效果信息，该动画效果信息主要是指切换时，视图进入的方向，简称切换方向)：

S301：初始化，通过修改hash触发浏览器的哈希值改变事件，hash中包含有目标页面的资源地址，也即模板文件的路径，还可以包括目标页面的切换方向；

S302：浏览器进行hash匹配，在访问历史中插入一条记录，记录下hash值的变化；

S303：浏览器提供窗口句柄，其中包含有目标页面对应的hash值；

S304：本申请实施例中的JS从窗口句柄中获取目标页面的模板文件路径以及切换方向；

S305：根据模板文件路径AJAX请求模板文件，然后将获取到的模板文件插入到DOM(Document Object Model，文档对象模型)中，在此之前，需要根据切换方向进行判断，如果是向前(forward)，则进入步骤S306，如果是向后(back)，则进入步骤S307：

S306：插入到当前视图节点之前；

S207：插入到当前视图节点之后；

S308：使用CSS3根据DOM的节点结构执行动画，切换到目标页面；

S309：动画执行完毕之后，为了避免占用过多的存储空间，可以删除当前节点的视图。

为了更好的理解本申请实施例，下面通过一个实际应用中的例子，对本申请实施例的流程进行详细地介绍。参见图4，具体可以包括以下步骤：

S401：监控在第一页面中点击超链接的操作，获取该超链接的属性值，从属性值中获取超链接对应的第二页面的资源地址；

在该步骤S301中，如果开发者还对超链接定义了动画效果信息，则还可以从超链接的属性值中获取第二页面在展现时的动画效果信息；

S402：通过对第一页面的URL的hash值进行修改，触发浏览器的哈希值改变事件，以便浏览器在原生的访问历史中记录哈希值的变化，并提供窗口句柄；其中，修改后的哈希值中包含有第二页面的资源地址信息；

S403：从浏览器提供的窗口句柄中获取第二页面的资源地址，并根据第二页面的资源地址向对应的Web服务器发起异步加载请求；

S404：根据Web服务器返回的资源数据，将所述当前窗口视图切换到第二页面；

在该步骤S304中，如果在S301中还获取到了第二页面在展现时的动画效果信息，则可以按照该动画效果信息，将当前窗口视图切换到第二页面，至此，就实现了从第一页面到第二页面的切换。

在展现出所述第二页面后，如果接收到页面后退的请求，则可以按照以下步骤进行：

S405：根据访问历史记录，获取第一页面的URL的哈希值；

该第一页面的URL的哈希值记录有第一页面的资源地址(同样是在用户点击该第一页面的超链接时，JS脚本为该第一页面生成的)；当然，访问历史记录中记录的第一页面的URL的哈希值有可能为空，这证明第一页面当时是由浏览器采用常规的加载方式加载的，针对这种情况，JS会预先记录该第一页面的URL，将其作为第一页面的默认资源地址，因此可以将预先根据该第一页面的URL记录的默认资源地址确定为第一页面的资源地址；

S406：将当前URL中的hash值修改为该第一页面的URL的哈希值，触发浏览器的哈希值改变事件，以便浏览器在原生的访问历史中记录哈希值的变化，并提供窗口句柄；

S407：从浏览器提供的窗口句柄中获取第一页面的资源地址，并根据所述第一页面的资源地址向对应的Web服务器发起异步加载请求；

S408：根据该Web服务器返回的资源数据，将所述当前窗口视图切换到所述第一页面。

与本申请实施例提供的页面切换方法相对应，本申请实施例还提供了一种页面切换装置，参见图5，该装置可以包括：

监控单元501，用于监控将当前页面切换到目标页面的操作请求，并获取所述目标页面的资源地址；

哈希值修改单元502，用于通过对当前页面的统一资源定位符URL的哈希值进行修改，触发浏览器的哈希值改变事件，以便浏览器在原生的访问历史中记录所述哈希值的变化，并提供窗口句柄；其中，修改后的哈希值中包含有所述目标页面的资源地址信息；

异步加载请求单元503，用于从所述窗口句柄中获取所述目标页面的资源地址，并根据所述目标页面的资源地址向对应的Web服务器发起异步加载请求；

展现单元504，用于根据所述Web服务器返回的资源数据，在所述当前页面所在窗口中展现所述目标页面。

具体实现时，所述监控单元501包括：

第一监控子单元，用于监控在当前页面中点击超链接的操作，获取所述超链接的属性值，从所述属性值中获取所述超链接对应的目标页面的资源地址。其中，属性值一般写在当前页面的HTML代码中，因此就可以从HTML代码中读取出该超链接的属性值，然后从中获取目标页面的资源地址。

其中，如果开发者为超链接定义了动画效果属性，则该装置还可以包括：

动画效果信息获取单元，用于从所述属性值中获取所述目标页面在展现时的动画效果信息；

所述展现单元504具体可以用于：

根据所述Web服务器返回的资源数据，按照所述动画效果信息，在所述当前页面所在窗口中展现所述目标页面。

为了能够在后续的页面前进或后退的过程中，也能体现出开发者定义的动画效果，该装置还可以包括：

动画效果信息记录单元，用于记录所述目标页面在展现时的动画效果信息，以便在从某页面前进或者后退到所述目标页面时，根据所记录的动画效果信息，对所述目标页面进行展现。

或者，在另一种实现方式下，所述修改后的哈希值中还包含有所述目标页面在展现时的动画效果信息，以便在从某页面前进或者后退到所述目标页面时，在触发了浏览器的哈希值改变事件之后，从浏览器提供的窗口句柄中获取所述动画效果信息，并根据所述动画效果信息对所述目标页面进行展现。

另外，在实际应用中，还可以由JS脚本自定记录各个界面的哈希值，这样可以不必依赖浏览器的历史记录，就能实现页面的前进后退操作，因此，该装置还可以包括：

哈希值记录单元，用于记录所述目标页面的URL的哈希值，生成自定义的浏览历史记录，以便在从某页面前进或者后退到所述目标页面时，根据所述自定义的浏览历史记录获取所述目标页面的URL的哈希值，进行页面的前进或者后退操作。

如果当前页面是初始状态下通过浏览器的常规加载方式加载的，则当前页面的URL中是不存在哈希值的，为了能够在后退时能够后退到该当前页面，该装置还可以包括：

URL记录单元，用于如果当前页面是采用常规的浏览器加载的方式加载的，则记录所述当前页面的URL，以便在监控到页面前进或后退到所述当前页面的操作请求，并发现所述当前页面的URL的哈希值为空之后，根据所述记录的URL加载所述当前页面。

另一方面，所述监控单元501可以包括：

第二监控子单元，用于监控从某页面前进或后退到目标页面的操作请求，根据浏览历史记录获取所述目标页面的URL的哈希值，并根据该URL的哈希值获取目标页面的资源地址。

其中，所述第二监控子单元具体可以用于：

根据浏览器原生的浏览历史记录获取所述目标页面的URL，并从该URL中获取哈希值。

在另一种实现方式下，该装置还可以包括：

第一自定义浏览历史记录生成单元，用于根据用户的访问先后顺序记录各个被访问页面在展现时的动画效果信息，生成自定义的浏览历史记录；

所述展现单元503具体用于从所述自定义的浏览历史记录获取所述目标页面在展现时的动画效果信息；根据所述Web服务器返回的资源数据，按照所述动画效果信息，在所述当前页面所在窗口中展现所述目标页面。

另外，该装置还可以包括：

第二自定义浏览历史记录生成单元，用于根据用户的访问先后顺序记录各个被访问页面的URL的哈希值，生成自定义的浏览历史记录；

所述第二监控子单元具体用于：

根据所述自定义的浏览历史记录获取所述目标页面的URL的哈希值。

所述目标页面的URL的哈希值中还包含有所述目标页面在展现时的动画效果信息，所述展现单元504具体用于：

根据所述Web服务器返回的资源数据，按照所述动画效果信息，在所述当前页面所在窗口中展现所述目标页面。

总之，在本申请实施例提供的页面切换装置中，可以监控到从当前页面向目标页面切换的操作请求之后，可以在获取到目标页面的资源地址之后，通过对URL中的哈希值进行修改，来触发浏览器的哈希值改变事件，浏览器就会自动在原生的访问历史中增加一条关于hash变化的记录，并且提供窗口句柄，这样我们的JS就可以从窗口句柄中获取到目标页面的资源地址，然后采用异步加载的方式请求目标页面的资源内容，然后在窗口中进行展现。由于在浏览器的访问历史中增加了关于hash变化的记录，相当于记录了各个页面与hash之间的对应关系，因此，在执行页面的前进或者后退操作时，就可以根据这种对应关系，前进或者后退到正确的页面。

通过以上的实施方式的描述可知，本领域的技术人员可以清楚地了解到本申请可借助软件加必需的通用硬件平台的方式来实现。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例或者实施例的某些部分所述的方法。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统或系统实施例而言，由于其基本相似于方法实施例，所以描述得比较简单，相关之处参见方法实施例的部分说明即可。以上所描述的系统及系统实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。

以上对本申请所提供的页面切换方法及装置，进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处。综上所述，本说明书内容不应理解为对本申请的限制。

Claims (13)

1.一种页面切换方法，其特征在于，包括：

监控将当前页面切换到目标页面的操作请求，并获取所述目标页面的资源地址；

通过对当前页面的统一资源定位符URL的哈希值进行修改，触发浏览器哈希值改变事件，以便浏览器在访问历史中记录所述哈希值的变化，并提供窗口句柄；其中，修改后的哈希值中包含有所述目标页面的资源地址信息；

从所述窗口句柄中获取所述目标页面的资源地址，并根据所述目标页面的资源地址，向对应的Web服务器发起异步加载请求；

根据所述Web服务器返回的资源数据，在所述当前页面所在窗口中展现所述目标页面。

2.根据权利要求1所述的方法，其特征在于，所述监控将当前页面切换到目标页面的操作请求，并获取所述目标页面的资源地址包括：

监控在当前页面中点击超链接的操作，获取所述超链接的属性值，从所述属性值中获取所述超链接对应的目标页面的资源地址。

3.根据权利要求2所述的方法，其特征在于，还包括：

从所述属性值中获取所述目标页面在展现时的动画效果信息；

所述根据所述Web服务器返回的资源数据，在所述当前页面所在窗口中展现所述目标页面包括：

根据所述Web服务器返回的资源数据，按照所述动画效果信息，在所述当前页面所在窗口中展现所述超链接对应的目标页面。

4.根据权利要求3所述的方法，其特征在于，还包括：

记录所述目标页面在展现时的动画效果信息，以用于在从某页面前进或者后退到所述目标页面时，根据所记录的动画效果信息，对所述目标页面进行展现。

5.根据权利要求3所述的方法，其特征在于，所述修改后的哈希值中还包含有所述目标页面在展现时的动画效果信息，以便在从某页面前进或者后退到所述目标页面时，在触发了浏览器的哈希值改变事件之后，从浏览器提供的窗口句柄中获取所述动画效果信息，并根据所述动画效果信息对所述目标页面进行展现。

6.根据权利要求2所述的方法，其特征在于，还包括：

记录所述目标页面的URL的哈希值，生成自定义的浏览历史记录，以便在从某页面前进或者后退到所述目标页面时，根据所述自定义的浏览历史记录获取所述目标页面的URL的哈希值，进行页面的前进或者后退操作。

7.根据权利要求2所述的方法，其特征在于，还包括：

如果当前页面是采用浏览器加载的方式加载的，则记录所述当前页面的URL，以便在监控到页面前进或后退到所述当前页面的操作请求，并发现所述当前页面的URL的哈希值为空之后，根据所述记录的URL加载所述当前页面。

8.根据权利要求1所述的方法，其特征在于，所述监控将当前页面切换到目标页面的操作请求，并获取所述目标页面的资源地址，包括：

监控从某页面前进或后退到目标页面的操作请求；根据浏览历史记录，获取所述目标页面的URL的哈希值；并根据该URL的哈希值，获取目标页面的资源地址。

9.根据权利要求8所述的方法，其特征在于，所述根据浏览历史记录获取所述目标页面的URL的哈希值包括：

根据浏览器的浏览历史记录，获取所述目标页面的URL，并从该URL中获取哈希值。

10.根据权利要求9所述的方法，其特征在于，还包括：

根据访问先后顺序，记录各个被访问页面在展现时的动画效果信息，生成自定义的浏览历史记录；

所述Web服务器返回的资源数据，在所述当前页面所在窗口中展现所述目标页面包括：

从所述自定义的浏览历史记录中获取所述目标页面在展现时的动画效果信息；

根据所述Web服务器返回的资源数据，按照所述动画效果效果信息，在所述当前页面所在窗口中展现所述目标页面。

11.根据权利要求8所述的方法，其特征在于，还包括：

根据用户的访问先后顺序，记录各个被访问页面的URL的哈希值，生成自定义的浏览历史记录；

所述根据浏览历史记录获取所述目标页面的URL的哈希值包括：

根据所述自定义的浏览历史记录，获取所述目标页面的URL的哈希值。

12.根据权利要求8、9或11任一项所述的方法，其特征在于，所述目标页面的URL的哈希值中还包含有所述目标页面在展现时的动画效果信息，所述根据所述Web服务器返回的资源数据，在所述当前页面所在窗口中展现所述目标页面包括：

根据所述Web服务器返回的资源数据，按照所述动画效果信息，在所述当前页面所在窗口中展现所述目标页面。

13.一种页面切换装置，其特征在于，包括：

监控单元，用于监控将当前页面切换到目标页面的操作请求，并获取所述目标页面的资源地址；

哈希值修改单元，用于通过对当前页面的统一资源定位符URL的哈希值进行修改，触发浏览器的哈希值改变事件，以便浏览器在原生的访问历史中记录所述哈希值的变化，并提供窗口句柄；其中，修改后的哈希值中包含有所述目标页面的资源地址信息；

异步加载请求单元，用于从所述窗口句柄中获取所述目标页面的资源地址，并根据所述目标页面的资源地址，向对应的Web服务器发起异步加载请求；

展现单元，用于根据所述Web服务器返回的资源数据，在所述当前页面所在窗口中展现所述目标页面。