一种实现页面切换的方法和装置
【技术领域】
本发明涉及计算机应用技术领域,特别涉及一种实现页面切换的方法和装置。
【背景技术】
对于目前主流的web内核,在web页面的加载过程中,终端的web引擎会创建一个窗口,然后将web页面的页面内容渲染到窗口中。如果用户点击web页面上的链接,会加载新的web页面,一种页面切换方式是将新加载的web页面渲染到原来的窗口,另一种页面切换的方式是再创建一个窗口,将新加载的web页面渲染到新创建的窗口。
对于直接在原来的窗口渲染新加载的web页面的方式,需要先消除上一个web页面的渲染效果,会出现新的web页面尚未渲染完整时,窗口没有web页面可显示,使得页面切换中出现显示空白,一方面浪费终端上的显示资源,另一方面给用户带来较差的展示效果。
对于在新创建的窗口渲染新加载的web页面的方式,需要打开多个窗口,占据终端上的显示资源,显示给用户的内容比较繁杂,对于移动终端这种显示资源比较紧缺(屏幕通常较小)的情况尤其不适合。
【发明内容】
有鉴于此,本发明提供了一种实现页面切换的方法和装置,以便于更有效地利用终端的显示资源,提高用户体验。
具体技术方案如下:
本发明提供了一种实现页面切换的方法,创建的窗口包含N个全部重叠或部分重叠设置的画布,所述N为大于1的正整数;该方法包括:
从服务器端获取到要渲染的第一页面内容时,将获取的第一页面内容渲染到所述窗口中一个当前未显示的第一画布中;
如果所述窗口当前已经存在显示了第二页面内容的第二画布,则待所述渲染结束后,隐藏所述第二画布并显示所述第一画布。
根据本发明一优选实施方式,在开始web应用时,或者响应用户请求时,创建所述窗口。
根据本发明一优选实施方式,如果所述窗口当前尚未存在已显示了第二页面内容的第二画布,则设置当前渲染的第一画布为可见,其他画布为隐藏。
根据本发明一优选实施方式,该方法还包括:获取切换方式和/或动画信息;
按照所述切换方式中的隐藏方式和/或动画信息来隐藏画布,或者按照所述切换方式中的显示方式和/或动画信息来显示画布。
根据本发明一优选实施方式,所述获取切换方式和/或动画信息包括:
获取预先设置的切换方式和/或动画信息;或者,
从服务器端获取切换方式和/或动画信息。
根据本发明一优选实施方式,所述从服务器端获取切换方式和/或动画信息包括:
从服务器端获取随所述要渲染的页面内容一起发送的切换方式和/或动画信息。
根据本发明一优选实施方式,随所述要渲染的页面内容一起发送的切换方式和/或动画信息包括:
用于所述要渲染的页面内容所在画布的显示方式和/或动画信息以及隐藏方式和/或动画信息;或者,
用于所述要渲染的页面内容所在画布的显示方式和/或动画信息以及用于当前已显示的画布的隐藏方式和/或动画信息。
根据本发明一优选实施方式,创建的窗口包含N个全部重叠设置的画布包括:
所述创建的窗口包含N个画布,所述N个画布在x,y坐标的位置是一样的,在z轴上的位置存在偏移,其中x,y轴构成的平面是与屏幕平行的平面,z轴与屏幕垂直。
根据本发明一优选实施方式,所述服务器为云端服务器,所述窗口为卡片式桌面上的web引擎创建的窗口。
本发明还提供了一种实现页面切换的装置,该装置包括:
创建单元,用于创建包含N个全部重叠或者部分重叠设置的画布的窗口,所述N为大于1的正整数;
第一获取单元,用于从服务器端获取要渲染的第一页面内容;
渲染单元,用于将所述第一获取单元获取的第一页面内容渲染到所述窗口中一个当前未显示的第一画布中;
切换单元,用于如果所述窗口当前已经存在显示了第二页面内容的第二画布,则待所述渲染单元渲染结束后,隐藏所述第二画布并显示所述第一画布。
根据本发明一优选实施方式,所述创建单元在开始web应用时,或者响应用户请求时,创建所述窗口。
根据本发明一优选实施方式,所述切换单元,还用于如果所述窗口当前尚未存在已显示了第二页面内容的第二画布,则设置所述渲染单元当前渲染的第一画布为可见,其他画布为隐藏。
根据本发明一优选实施方式,该装置还包括:第二获取单元,用于获取切换方式和/或动画信息;
所述切换单元按照所述切换方式中的隐藏方式和/或动画信息来隐藏画布,或者按照所述切换方式中的显示方式和/或动画信息来显示画布。
根据本发明一优选实施方式,所述第二获取单元,具体用于获取预先设置的切换方式和/或动画信息,或者从服务器端获取切换方式和/或动画信息。
根据本发明一优选实施方式,所述第二获取单元从服务器端获取随所述要渲染的页面内容一起发送的切换方式和/或动画信息。
根据本发明一优选实施方式,随所述要渲染的页面内容一起发送的切换方式和/或动画信息包括:
用于所述要渲染的页面内容所在画布的显示方式和/或动画信息以及隐藏方式和/或动画信息;或者,
用于所述要渲染的页面内容所在画布的显示方式和/或动画信息以及用于当前已显示的画布的隐藏方式和/或动画信息。
根据本发明一优选实施方式,所述创建单元具体用于在创建的窗口中包含N个画布,所述N个画布在x,y坐标的位置是一样的,在z轴上的位置存在偏移,其中x,y轴构成的平面是与屏幕平行的平面,z轴与屏幕垂直。
根据本发明一优选实施方式,该装置设置于卡片式桌面上的web引擎中,所述服务器为云端服务器。
由以上技术方案可以看出,本发明通过在一个页面渲染窗口中重叠设置多个画布,将页面渲染到一个当前未显示的画布中,渲染结束后隐藏当前已显示的画布并显示新渲染的画布。这种方式使得页面内容能够充分利用终端屏幕的显示资源进行显示,不被多个窗口分割,当发生页面切换时,未渲染完成的页面内容不会被显示,只有渲染完成的画布才会替换已显示的画布,更有效地利用了终端的显示资源,提高了用户体验。
【附图说明】
图1为本发明实施例一提供的实现页面切换的方法流程图;
图2为本发明实施例一提供的页面渲染窗口的示意图;
图3为本发明实施例二提供的实现页面切换的方法流程图;
图4为本发明实施例三提供的装置结构图。
【具体实施方式】
为了使本发明的目的、技术方案和优点更加清楚,下面结合附图和具体实施例对本发明进行详细描述。
本发明的核心思想在于,在一个窗口中通过多视图的方式分别渲染页面切换前后的页面内容,并通过动画的方式实现不同视图之间的切换显示。下面结合实施例一和实施例二对本发明提供的方法进行详细描述。
实施例一、
图1为本发明实施例一提供的实现页面切换的方法流程图,如图1中所示,该流程可以具体包括以下步骤:
在步骤101中,在开始web应用时,web引擎创建一个包含N个画布的窗口(或称为页面渲染窗口),其中N为大于1的正整数,画布在窗口中重叠设置。所谓重叠设置指的是这些画布在x,y轴上坐标的位置是一致的,在z轴上坐标的位置存在偏移,x,y轴构成的平面是与终端屏幕平行的平面,z轴与终端屏幕垂直,如图2中所示,图2中以N取3为例。窗口内N个画布可以是全部重叠设置,也可以是部分重叠设置,如果部分重叠设置,则这些画布在x,y轴上坐标的位置部分相同。
另外,web引擎也可以在用户手动创建一个页面渲染窗口时,即响应用户建立窗口的操作来建立一个页面渲染窗口时,在该页面渲染窗口内布局N个画布。例如当用户在终端上操作请求建立一个页面渲染窗口时,web引擎创建一个包含N个画布的页面渲染窗口。
在步骤102中,当web引擎从服务器端获取到要渲染的页面内容时,将其渲染到其中一个当前未显示的画布中,并设置该画布为可见,其他画布为隐藏。
该步骤102是web引擎在当前页面渲染窗口渲染第一个页面内容时所执行的步骤,如果是该页面渲染窗口的第一个页面内容,则将其渲染到其中一个当前未显示的画布中,可以默认显示第一个画布,设置该画布为可见。这样该页面内容就能够显示在该画布中。
在本步骤中,web引擎可以在获取到要渲染的页面内容之后判断当前窗口是否已经有显示的画布,即是否是第一个渲染的页面内容,如果当前窗口没有已经显示的画布,则说明是第一个渲染的画布,可以直接设置该画布可见,也可以设置该画布在页面内容渲染结束后可见。
在本发明实施例中,画布可以通过View(视图)的方式实现,在这种优选实施方式下,可以通过设置View中的显示属性来设置可见与隐藏,例如在Andriod***中可以采用setVisibility(View.VISIBLE)来设置View正常显示,采用setVisibility(View.INVISIBLE)来设置View隐藏。
当然,本发明实施例并不限于这种可见与隐藏的实现方式,还可以采用诸如调整画布的层级的方式,即将要显示的画布的层级提高,放在最上面一层(即在z轴上距离屏幕的距离最近),将要隐藏的画布的层级降低,例如放在显示的画布之下(即在z轴上距离屏幕的距离相比较显示的画布较远)。
另外,在显示该画布时,可以采用预先设置的切换方式中的显示方式和动画信息来显示该画布的页面内容。预先设置的切换方式和动画信息将在后续步骤104中详述。
当用户点击页面中的链接发生页面切换时,在步骤103中,web引擎从服务器端获取到要渲染的页面内容时,将其渲染到其中一个当前未显示的画布中。
web引擎同样在获取到要渲染的页面内容之后判断当前窗口是否已经有显示的画布,在本步骤中判断出当前窗口有已经显示的画布,因此需要执行页面切换,即执行步骤104。
在步骤104中,待渲染结束后执行预先设置的切换方式和动画以隐藏当前显示的画布并显示新渲染的画布。
当web引擎从服务器端获取第二个页面内容时,将该第二个页面内容渲染到其中一个当前未显示的画布中,例如显示到第二个画布中,该画布是隐藏的,当该第二个页面内容渲染结束后,显示该新渲染的第二个画布,隐藏之前显示的第一个画布。在进行画布显示的切换时,可以预先设置好切换方式和动画,这里切换方式和动画是考虑到画布切换的过渡问题而设置的,包括显示方式和隐藏方式,显示方式是针对新渲染的画布的,隐藏方式是针对已经显示的画布的。
其中切换方式可以包括但不限于:立隐立现方式(即立即隐藏当前显示的画布并立即显示新渲染的画布)、渐隐渐现方式(即渐渐隐藏当前显示的画布并渐渐显示新渲染的画布)、立隐渐现方式(即立即隐藏当前显示的画布并渐渐显示新渲染的画布)、渐隐立现方式(即渐渐隐藏当前显示的画布并立即显示新渲染的画布)等等。
另外每一种切换方式都可以对应不同的动画,例如对于渐隐或渐现的动画可以通过设置透明度、移动方式、缩放、旋转等属性来实现。该部分动画可以通过执行相应算法实现,可以采用现有算法,在此不再详述。
在本实施例中,切换方式和动画都采用预先设置的方式,web引擎按照获取预先的设置执行切换即可。该设置可以固定设置,也可以由用户进行自定义设置,例如提供一个面向用户的接口,用户通过该接口进行切换方式和动画的设置,web引擎按照该用户的设置执行切换即可。
除了预先设置的方式之外,web引擎还可以从服务器端获取切换方式和动画,这种方式将在实施例二中进行描述。
当然,发生页面切换的方式并不限于本实施例中描述的用户在页面中点击链接的方式,也可以是诸如用户手动输入了新的网页地址,从而发起的新的页面请求等其他方式,只要当前窗口已经显示有画布,web引擎又发起了新的页面请求都可以按照本实施例中的方式,将新的页面内容显示在其中一个未显示的画布中,待渲染结束后替代当前显示的画布进行显示。
在后续过程中,原来显示后来被隐藏的画布又成为了当前未显示的画布,可以在后续页面切换过程中继续被使用。后续页面请求的处理过程与上述步骤103和步骤104中类似,不再赘述。
可见,本发明实施例中一个页面渲染窗口中建立多个画布,优选地,每个画布的大小都与页面渲染窗口一致。每次只有一个画布可见,其他画布隐藏,每次加载一个新的页面都在未显示的画布中渲染,渲染完成后,当前可见的画布被隐藏,替换为新渲染的画布显示。
实施例二、
图3为本发明实施例二提供的实现页面切换的方法流程图,如图3中所示,该流程可以具体包括以下步骤:
步骤301同步骤101,不再赘述。
在步骤302中,web引擎从服务器端获取要渲染的页面内容以及切换方式和动画信息。
在本实施例中,当web引擎向服务器端请求页面内容后,服务器端在返回给web引擎的http响应中携带要渲染的页面内容,同时也携带切换方式和动画信息。例如,可以在http消息头中增加字段来携带切换方式和动画信息,也可以在http消息内容中增加字段来携带切换方式和动画信息。
携带的切换方式和动画信息可以是本页面的显示方式和动画信息以及本页面的隐藏方式和动画信息,也可以是本页面的显示方式和动画信息以及当前已经显示页面的隐藏方式和动画信息。
在步骤303中,将获取的页面内容渲染到其中一个当前未显示的画布中,并设置该画布为可见,其他画布为隐藏。
同样,在本步骤中,web引擎在获取到要渲染的页面内容之后判断当前窗口是否已经有显示的画布,本步骤中当前窗口没有已经显示的画布,说明是第一个渲染的画布,可以直接设置该画布可见,也可以设置该画布在页面内容渲染结束后可见。
另外,在显示该画布时,可以采用获取的切换方式和动画信息中的显示方式和动画信息来显示该画布的页面内容。
当用户点击页面中的链接发生页面切换时,在步骤304中,web引擎从服务器端获取要渲染的页面内容以及切换方式和动画信息。
在步骤305中,将获取的页面内容渲染到其中一个当前未显示的画布中。
web引擎同样在获取到要渲染的页面内容之后判断当前窗口是否已经有显示的画布,在本步骤中判断出当前窗口有已经显示的画布,因此需要执行页面切换,即执行步骤306。
在步骤306中,待画布渲染结束后按照步骤304中获取的切换方式和动画信息,以隐藏当前显示的画布并显示新渲染的画布。
如果本实施例中获取的切换方式和动画信息是本页面的显示方式和动画信息以及本页面的隐藏方式和动画信息,则在本步骤中画布渲染结束后,按照步骤304中获取的切换方式中的显示方式显示新渲染的画布,按照步骤302中获取的切换方式和动画信息中的隐藏方式和动画信息隐藏当前显示的画布。
如果本实施例中获取的切换方式和动画信息是本页面的显示方式和动画信息以及当前已经显示页面的隐藏方式和动画信息,则在本步骤中画布渲染结束后,按照步骤304中获取的切换方式和动画信息中的隐藏方式和动画信息隐藏当前显示的画布,按照步骤304中获取的切换方式和动画信息中的显示方式和动画信息显示新渲染的画布。
需要说明的是,除了本实施例中描述的切换方式和动画信息与要渲染的页面内容一同从服务器端获取之外,web引擎还可以先从服务器端获取切换方式和动画信息,再从服务器端获取要渲染的页面内容,也可以先获取要渲染的页面内容,再从服务器端获取切换方式和动画信息。
上述实施例中以同时存在切换方式和动画信息为例进行描述,在实际使用过程中,也可以仅仅预设或者获取切换方式和动画信息中的一种,另一种采用默认的形式。
以上是对本发明所提供方法进行的描述,下面通过实施例三对本发明提供的装置进行详细描述。
实施例三、
图4为本发明实施例三提供的装置结构图,该装置可以设置与web引擎中,如图4中所示,该装置可以具体包括:创建单元01、第一获取单元02、渲染单元03和切换单元04,还可以进一步包括第二获取单元05。
其中创建单元01负责创建包含N个全部重叠或部分重叠设置的画布的页面渲染窗口,N为大于1的正整数。在开始web应用时,或者响应用户请求时,创建单元01创建页面渲染窗口。
第一获取单元02负责从服务器端获取要渲染的页面内容。渲染单元03将第一获取单元02获取的页面内容渲染到页面渲染窗口中一个当前未显示的画布中。
其中,第一获取单元02可以是用户手工输入url时,web引擎向服务器端发送web请求后,从服务器端获取要渲染的页面内容;也可以是用户点击页面上的链接时,web引擎向服务器端发送web请求后,从服务器端获取要渲染的页面内容。还可以是其他情形触发的web引擎向服务器端发送web请求。
如果页面渲染窗口当前尚未存在已显示的画布,则切换单元04设置渲染单元03当前渲染的画布为可见,其他画布为隐藏。这种情况是web引擎在当前页面渲染窗口渲染第一个页面内容时的情况。
如果页面渲染窗口当前已经存在显示的画布,则切换单元04待渲染单元03渲染结束后,隐藏当前已显示的画布并显示渲染单元新渲染的画布。这种情况是发生页面切换时对应的情况。
在发生页面切换时,为了实现切换的过渡问题,可以设置切换方式和/或动画信息。即第二获取单元05获取切换方式和/或动画信息,其中切换方式中包括隐藏方式和显示方式。切换单元04按照其中的隐藏方式和/或动画信息来隐藏画布,按照其中的显示方式和/或动画信息来显示画布。
上述涉及的切换方式可以包括但不限于:立隐立现方式、渐隐渐现方式、立隐渐现方式或渐隐渐现方式。另外每一种切换方式都可以对应不同的动画,例如对于渐隐或渐现的动画可以通过设置透明度、移动方式、缩放、旋转等属性来实现。该部分动画可以通过执行相应算法实现,可以采用现有算法,在此不再详述。
上述的切换方式和动画信息可以采用预先设置的方式,也可以从服务器端获取,即第二获取单元05可以获取预先设置的切换方式和/或动画信息,或者从服务器端获取切换方式和/或动画信息。上述预先设置可以是固定设置,也可以由用户进行自定义设置,例如提供一个面向用户的接口,用户通过该接口进行切换方式和动画的设置。
当采用从服务器端获取切换方式和/或动画信息时,优选地,第二获取单元05可以从服务器端获取随要渲染的页面内容一起发送的切换方式和/或动画信息。当web引擎向服务器端请求页面内容后,服务器端在返回给web引擎的http响应中携带要渲染的页面内容,同时也携带切换方式和/或动画信息。例如,可以在http消息头中增加字段来携带切换方式和/或动画信息,也可以在http消息内容中增加字段来携带切换方式和/或动画信息。
具体地,随要渲染的页面内容一起发送的切换方式和动画信息包括:用于要渲染的页面内容所在画布的显示方式和动画信息以及隐藏方式和动画信息;或者,用于要渲染的页面内容所在画布的显示方式和动画信息以及用于当前已显示的画布的隐藏方式和动画信息。
本发明实施例上述的方法和装置可以应用于但不限于以下几种应用场景:
例如,对于目前刚刚兴起的卡片式桌面,即在移动终端的桌面上存在多个卡片形式显示的web引擎,每个web引擎功能各自独立,分别与云端服务器进行交互,由云端服务器主动推送或者应请求发送页面内容。本发明实施例上述的方法就能够应用于各web引擎中。例如在卡片式桌面上存在一个web引擎负责加载天气信息,该web引擎创建的窗口包括两个画布,这两个画布完全重叠。默认情况下,云端服务器向该web引擎的窗口推送北京的天气,web引擎将北京的天气页面加载到第一画布上,设置第一画布为显示,第二画布为隐藏,第一画布渲染完毕后,用户就能够在窗口上看到北京的天气信息。当用户在该web引擎上进行地域的切换,例如用户点击南京这一地域的链接,那么该web引擎就向云端服务器请求并获取南京的天气页面,将该南京的天气页面加载到第二画布上。由于第二画布为隐藏,因此第二画布的渲染过程不会被用户看到。当第二画布渲染完毕后,显示第二画布并隐藏第一画布,这样南京的天气页面就在视觉上替代北京的天气页面进行显示。在第二画布到第一画布的切换显示过程中,可以采用逐渐隐藏第一画布且逐渐显示第二画布的切换方式和动画形式。
再例如,当用户打开手机浏览器,则手机浏览器自动创建一个包含两个画布的窗口,这两个画布完全重叠。当用户通过手机浏览器打开一个新闻页面时,将该新闻页面的内容加载到创建的窗口的其中一个画布上,暂且称为第一画布,并设置该第一画布为显示,第二画布为隐藏。该新闻页面的内容渲染完毕后,就在第一画布上显示该新闻页面的内容。当用户在浏览该新闻页面的过程中点击了该新闻页面上的一个链接,那么手机浏览器就向服务器发送请求来获取该链接对应的页面内容,假设该链接对应的也是一个新闻页面,那么手机浏览器就将新获得的新闻页面渲染在第二画布上,由于第二画布为隐藏,新获得的新闻页面在渲染过程中不会被用户看到。当新获得的新闻页面渲染完成后,显示第二画布隐藏第一画布,使得新获得的新闻页面在用户视觉上替代原来的新闻页面进行显示。在第二画布到第一画布的切换显示过程中,可以采用逐渐隐藏第一画布且逐渐显示第二画布的切换方式和动画形式。
再例如,当用户打开手机客户端,则手机客户端自动创建一个包含两个画布的窗口,这两个画布完全重叠。当用户通过客户端打开一个视频页面时,将该视频页面的内容加载到创建的窗口的第一画布上,并设置该第一画布为显示,第二画布为隐藏。该视频页面的内容渲染完毕后,就在第一画布上显示该视频页面的内容。当用户手动输入另一视频页面的地址时,客户端可以向服务器发送请求来获取该地址对应的视频页面内容,并将新获得的视频页面加载到第二画布上,由于第二画布为隐藏,因此第二画布的渲染过程同样不会被用户看到。当第二画布渲染完毕后,显示第二画布隐藏第一画布,使得新获得的视频页面在视觉上替代原来的视频页面进行显示。在第二画布到第一画布的切换显示过程中,可以采用逐渐隐藏第一画布且立即显示第二画布的切换方式和动画形式。
由以上描述可以看出,本发明提供的方法和装置具备以下优点:
1)本发明使得页面内容能够充分利用终端屏幕的显示资源进行显示,不被多个窗口分割;当发生页面切换时,未渲染完成的页面内容不会被显示,只有渲染完成的画布才会替换已显示的画布,更有效地利用了终端的显示资源,提高了用户体验。
2)本发明中能够对切换方式和动画进行定义,使得切换过程更加平滑和有趣,提高了用户体验。
在本发明所提供的几个实施例中,应该理解到,所揭露的装置和方法,可以通过其它的方式实现。例如,以上所描述的装置实施例仅仅是示意性的,例如,所述单元的划分,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式。
另外,在本发明各个实施例中的各功能单元可以集成在一个处理单元中,也可以是各个单元单独物理存在,也可以两个或两个以上单元集成在一个单元中。
上述以软件功能单元的形式实现的集成的单元,可以存储在一个计算机可读取存储介质中。上述软件功能单元存储在一个存储介质中,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)或处理器(processor)执行本发明各个实施例所述方法的部分步骤。而前述的存储介质包括:U盘、移动硬盘、只读存储器(Read-Only Memory,ROM)、随机存取存储器(Random Access Memory,RAM)、磁碟或者光盘等各种可以存储程序代码的介质。
以上所述仅为本发明的较佳实施例而已,并不用以限制本发明,凡在本发明的精神和原则之内,所做的任何修改、等同替换、改进等,均应包含在本发明保护的范围之内。