CN108459888B - 多页面切换方法、装置、终端设备及存储介质 - Google Patents
多页面切换方法、装置、终端设备及存储介质 Download PDFInfo
- Publication number
- CN108459888B CN108459888B CN201810014131.3A CN201810014131A CN108459888B CN 108459888 B CN108459888 B CN 108459888B CN 201810014131 A CN201810014131 A CN 201810014131A CN 108459888 B CN108459888 B CN 108459888B
- Authority
- CN
- China
- Prior art keywords
- page
- subpage frame
- data
- subpage
- current
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/448—Execution paradigms, e.g. implementations of programming paradigms
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本发明公开了一种多页面切换方法、装置、终端设备及存储介质。该多页面切换方法,包括:父页面获取页面跳转指令;父页面基于所述页面跳转指令调用子页面共有的JavaScript对象的页面交互方法函数,根据所述页面交互方法函数切换到与所述下一子页面ID相对应的下一子页面显示页面;父页面基于所述页面跳转指令,通过当前子页面获取当前子页面中转数据;父页面基于所述页面跳转指令调用子页面共有的JavaScript对象的加载数据方法函数,根据所述加载数据方法函数和所述当前子页面中转数据,获取所述下一子页面ID相对应的下一子页面数据。该多页面切换方法进行多页面切换时,可以达到多页面切换时页面加载时间短的切换效果。
Description
技术领域
本发明涉及应用程序开发领域,尤其涉及一种多页面切换方法、装置、终端设备及存储介质。
背景技术
在应用程序开发领域,应用程序页面的交互和页面数据的加载一般通过多页面应用实现。多页面应用中的各子页面开发相对独立,可支持多人同时开发,使其开发维护过程简单,但多页面应用在进行页面切换的前一段时间会出现空白,这是因为加载出页面需要时间。这使得多页面切换时加载页面时间较长,导致存在页面空白的问题。
发明内容
本发明实施例提供一种多页面切换方法、装置、终端设备及存储介质,以解决多页面切换时页面加载时间长,从而导致存在页面空白的问题。
第一方面,本发明实施例提供一种多页面切换方法,包括:
父页面获取页面跳转指令,所述页面跳转指令包括下一子页面ID;
父页面基于所述页面跳转指令调用子页面共有的JavaScript对象的页面交互方法函数,根据所述页面交互方法函数切换到与所述下一子页面ID相对应的下一子页面显示页面;
父页面基于所述页面跳转指令,通过当前子页面获取当前子页面中转数据;
父页面基于所述页面跳转指令调用子页面共有的JavaScript对象的加载数据方法函数,根据所述加载数据方法函数和所述当前子页面中转数据,获取所述下一子页面ID相对应的下一子页面数据,并将所述下一子页面数据加载在所述下一子页面显示页面。
第二方面,本发明实施例提供一种多页面切换装置,包括:
页面跳转指令获取模块,用于父页面获取页面跳转指令,所述页面跳转指令包括下一子页面ID;
页面切换模块,用于父页面基于所述页面跳转指令调用子页面共有的JavaScript对象的页面交互方法函数,根据所述页面交互方法函数切换到与所述下一子页面ID相对应的下一子页面显示页面;
中转数据获取模块,用于父页面基于所述页面跳转指令,通过当前子页面获取当前子页面中转数据;
数据加载模块,用于父页面基于所述页面跳转指令调用子页面共有的JavaScript对象的加载数据方法函数,根据所述加载数据方法函数和所述当前子页面中转数据,获取所述下一子页面ID相对应的下一子页面数据,并将所述下一子页面数据加载在所述下一子页面显示页面。
第三方面,本发明实施例提供一种终端设备,包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序,所述处理器执行所述计算机程序时实现所述多页面切换方法的步骤。
第四方面,本发明实施例提供一种计算机可读存储介质,所述计算机可读存储介质存储有计算机程序,所述计算机程序被处理器执行时实现所述多页面切换方法的步骤。
本发明实施例所提供的多页面切换方法、装置、终端设备及存储介质中,首先父页面获取页面跳转指令,页面跳转指令包括下一子页面ID,通过获取的页面跳转指令,能够有效达到页面切换、跳转的目的。然后父页面基于页面跳转指令调用子页面共有的JavaScript对象的页面交互方法函数,根据页面交互方法函数切换到与下一子页面ID相对应的下一子页面显示页面,通过父页面基于页面跳转指令调用子页面共有的JavaScript对象的页面交互方法函数,使得每次切换中父页面在调用子页面共有的JavaScript对象的页面交互方法函数时,实际上只花了一次调用该JavaScript对象的时间,有效实现了页面切换过程中页面间无空白衔接切换的效果。接着父页面基于页面跳转指令,通过当前子页面获取当前子页面中转数据,父页面通过子页面获取到子页面中转数据,实现了利用父页面进行数据中转的功能,通过父页面与子页面之间的沟通,提高了加载数据的效率。最后父页面基于页面跳转指令调用子页面共有的JavaScript对象的加载数据方法函数,根据加载数据方法函数和当前子页面中转数据,获取下一子页面ID相对应的下一子页面数据,并将下一子页面数据加载在下一子页面显示页面,通过父页面调用子页面共有的JavaScript对象的加载数据方法函数和当前子页面中转数据,实现了将下一子页面数据快速、完整加载的效果。
附图说明
为了更清楚地说明本发明实施例的技术方案,下面将对本发明实施例的描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本发明的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动性的前提下,还可以根据这些附图获得其他的附图。
图1是本发明实施例1中多页面切换方法的一流程图。
图2是图1中步骤S10之前的一具体流程图。
图3是图1中步骤S20的一具体流程图。
图4是图1中步骤S40的一具体流程图。
图5是本发明实施例2中多页面切换装置的一原理框图。
图6是本发明实施例4中终端设备的一示意图。
具体实施方式
下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例是本发明一部分实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例,都属于本发明保护的范围。
实施例1
图1示出本实施例中多页面切换方法的一流程图。该多页面切换方法可应用在安装有多页面应用程序的终端设备中,用于使应用程序在页面切换时无空白页面出现,实现页面快速切换的效果,提高页面切换效率。其中,该终端设备是可与用户进行交互的设备,包括但不限于智能手机和平板等设备。如图1所示,该多页面切换方法包括如下步骤:
S10:父页面获取页面跳转指令,页面跳转指令包括下一子页面ID。
其中,父页面是一个逻辑上的页面,在应用程序运行时,应用程序会加载父页面。页面跳转指令是指在应用程序中用于进行子页面间跳转的指令,该页面跳转指令包括下一子页面ID。下一子页面ID是指用于唯一标识该页面跳转指令逻辑指向的下一子页面的标识。下一子页面并不是指某一个固定、具体的子页面,而是根据页面跳转指令决定的逻辑指向的页面。若页面跳转指令跳转的下一子页面ID为“demo2”,则此时的下一子页面就是指该下一子页面ID为“demo2”的子页面,而不会是其他子页面ID为“demo1”或“demo3”等对应的子页面。
优选地,用户在终端设备上运行应用程序,应用程序运行后将加载父页面,父页面默认加载首页子页面。即在应用程序运行时第一个显示的页面是父页面默认加载的首页子页面。此时,我们所说的首页并不等同于父页面,准确来讲,首页子页面也是一个子页面,只不过是在应用程序初始加载时,父页面默认加载了其中一个子页面作为首页子页面。可以理解地,父页面是一个在首页子页面及其他子页面共同之上的页面,即多页面切换的过程中实际上都是在父页面下进行的,进行切换的页面是父页面下的各个子页面。通过应用程序运行时加载应用程序的父页面,为后续实现多页面无空白切换提供了运行的环境,做好了多页面无空白切换的前期准备。
本实施例中,父页面获取的页面跳转指令是子页面对应的获取按钮被点击时触发的,该页面跳转指令包含对应的下一子页面ID,用于跳转至下一子页面。应用程序随即执行该页面跳转指令,父页面根据页面跳转指令将当前子页面跳转到该下一子页面ID所对应的下一子页面。该当前子页面即页面跳转之前在终端设备屏幕显示的子页面,该当前子页面可以是首页子页面,可以是上一次跳转后显示的子页面。通过父页面获取的页面跳转指令,能够有效达到页面切换、跳转的目的。
在一具体实施方式中,下一子页面与页面跳转指令的获取按钮相关联。即iframe对应子页面的获取按钮与下一子页面ID是预先绑定好的,绑定的具体方式是根据该iframe在包含该iframe的页面上的逻辑位置进行绑定的。当用户点击iframe对应子页面的获取按钮时,应用程序会根据该获取按钮获取与其绑定的下一子页面ID,执行跳转由当前子页面跳转到下一子页面的指令。通述获取按钮的按钮位置与下一子页面ID之间的绑定,可以便捷、准确地根据获取按钮获取到下一子页面ID,并实现下一子页面的跳转。
在一具体实施方式中,如图2所示,在父页面获取页面跳转指令的步骤之前,该多页面切换方法还包括如下步骤:
S11:采用iframe标签在父页面创建至少两个子页面。
其中,iframe标签是HTML5(超文本标记语言(Hypertext Markup Language,HTML)的第五次重大修改)中标签的一种,该标签具体表达为<iframe>。iframe标签是框架表达的一种形式,iframe标签一般用来实现在页面中包含别的页面的功能,例如可以在应用程序的父页面加载各种不同子页面的内容,在子页面中加载、展示其他子页面的内容。iframe标签可以使得页面整体上变得美观,格局排版上更加有层次感,并能加载、展示页面中包含的其他页面的内容。
本实施例中,在应用程序开发过程中,通过应用程序嵌入的HTML5,采用HTML5的iframe标签在父页面创建出至少两个子页面。优选地,设置一子页面为应用程序运行时初始默认加载的首页,该首页即为首页子页面。在应用程序实际开发的过程中,子页面数量上可以为多个,实际开发的子页面数量根据应用程序的复杂程度决定,实际开发应用程序采用iframe标签在父页面中嵌入多个子页面,便于实现子页面间的跳转和切换功能。故在子页面较多的情况下,子页面间切换的效率就显得尤其重要。
S12:基于iframe标签,每个子页面默认设置为加载子页面结构和子页面渲染。
HTML5的iframe标签拥有很多属性,通过这些属性可以设置和调整iframe标签对应的子页面在父页面上的展示方式。例如iframe标签包括:name:内嵌帧名称,frameborder:内嵌帧边框,scrolling:是否出现滚动条(“auto”为自动,“yes”为显示,“no”为不显示),src:内嵌入文件的地址,style:内嵌文档的样式(如设置文档背景等)。如要实现页面上的超链接指向某一个嵌入的页面,则需要给这个iframe命名。方法是<iframename=**>,例如将该嵌入的页面命名为aa,写入<iframe width=420 height=330 name=aa frameborder=0 src=http://www.cctv.com></iframe>,然后,网页上的超链接语句应该写为:<a href=URL target=aa>,即可实现页面上的超链接指向某一个页面命名为aa的嵌入的页面。
本实施例中,根据子页面的子页面结构、子页面渲染和子页面数据加载的实际情况,通过采用iframe标签的src属性,将对应的iframe默认设置为该iframe只加载子页面结构和子页面渲染,但是不加载子页面数据,只有当跳转到该iframe对应的子页面上才会加载该子页面的子页面数据。具体地,每一子页面包括子页面显示页面和子页面数据,子页面结构和子页面渲染都属于子页面显示页面包含的内容。通过iframe的默认设置,可以使得子页面只显示简单的子页面结构和子页面渲染,而不加载子页面数据,能够提高子页面加载的速度,有助于页面间实现页面无空白快速跳转的效果。
S20:父页面基于页面跳转指令调用子页面共有的JavaScript对象的页面交互方法函数,根据页面交互方法函数切换到与下一子页面ID相对应的下一子页面显示页面。
其中,JavaScript中的所有事物都是对象,如字符串、数字、数组和日期等等。在JavaScript中,对象是拥有属性和方法的数据。子页面共有的JavaScript对象是指将各个子页面间具有相同功能的JavaScript对象提取出来,并统一封装的JavaScript对象。子页面共有的JavaScript对象的页面交互方法函数是指子页面间进行页面交互时采用的相同的页面交互方法函数,该页面交互方法函数统一封装到子页面共有的JavaScript对象中。其中,下一子页面包括下一子页面显示页面和下一子页面数据。下一子页面显示页面是指下一子页面在逻辑上的用于显示的页面,下一子页面数据是指下一子页面加载的所有数据。
本实施例中,根据获取的页面跳转指令,父页面调用预先封装好的子页面共有的JavaScript对象的页面交互方法函数,再根据该页面交互方法函数,依照下一子页面ID对应的下一子页面,从当前子页面切换到下一子页面显示页面。在调用子页面共有的JavaScript对象的页面交互方法函数时,只是实现切换到下一子页面显示页面的操作,其原因在于,该页面交互方法函数只负责页面交互,而不负责页面数据加载。通过调用子页面共有的JavaScript对象的页面交互方法函数,可以使得页面切换时更加流畅,多次引用子页面共有的JavaScript对象的页面交互方法函数实际只花费一次的加载时间,避免了每次页面跳转时都要重新调用页面交互方法函数。将子页面间功能相同的页面交互方法函数封装到子页面共有的JavaScript对象中,根据页面跳转指令,父页面调用预先封装好的子页面共有的JavaScript对象,在多次页面跳转的过程中,由于应用程序有缓存功能,各个子页面多次引用一个相同的JavaScript对象实际只花费一次的加载时间,大大提高了页面切换的效率,缩短了页面切换时的等待时间。
在一具体实施方式中,如图3所示,步骤S20中,父页面基于页面跳转指令调用子页面共有的JavaScript对象的页面交互方法函数,根据页面交互方法函数切换到与下一子页面ID相对应的下一子页面显示页面,具体包括如下步骤:
S21:通过下一子页面ID获取相对应的下一子页面显示页面,根据页面交互方法函数将下一子页面显示页面预先设置在屏幕外任一侧。
本实施例中,应用程序根据下一子页面ID获取相对应的下一子页面显示页面,根据页面交互方法函数预先将下一子页面显示页面定位在屏幕外任一侧,其中,这里的屏幕是指终端设备的显示屏幕,即用户能够看到的实际界面。屏幕外任一侧是指用户看不到的在屏幕外侧的逻辑界面,该逻辑界面可以是在屏幕的上侧、左侧、右侧、下侧或其他位置。例如,可根据页面交互方法函数中的转场方法(如changePage方法函数)将下一子页面显示页面预先设置在屏幕的右侧。
S22:根据页面交互方法函数,令当前子页面向屏幕外移动,同时将下一子页面显示页面移动到当前子页面在屏幕原本的位置,以实现页面交互的过程。
本实施例中,根据页面交互方法函数,令当前子页面(包括当前子页面显示页面和当前子页面数据)向屏幕外移动,同时根据页面交互方法函数令下一子页面显示页面移动到当前子页面在屏幕原本的位置,实现页面交互的过程。具体地,在令当前子页面向屏幕外任一侧移动时,可以沿相同方向同时将下一子页面显示页面移动到当前子页面在屏幕原本的位置,以避免两个页面出现重叠。例如,根据页面交互方法函数中的animate方法函数,将当前子页面向屏幕左侧移动,同时也将下一子页面显示页面向左侧移动,两者移动的速率相同,且当下一子页面显示页面移动到屏幕位置时结束该移动动作。通过上述页面交互方法函数,能够实现多页面交互(即切换)的过程。由于该页面交互方法函数是通过子页面共有的JavaScript对象调用的,则在多次页面切换的过程中,由于应用程序有缓存功能,各个子页面多次引用一个页面交互方法函数实际只花费一次的加载时间,大大提高了页面切换的效率,缩短了页面切换时的等待时间。
需要说明的是,页面切换是页面跳转的一部分,在页面跳转时,还包括加载下一子页面的子页面数据。在一个具体实施方式中,页面跳转时页面动作性的切换和页面数据的加载是同时进行的,以上步骤S20是为了重点突出页面交互(切换)的过程,以下步骤S30-S40则是重点突出页面数据加载的过程,两者之间并无前后顺序关系。
S30:父页面基于页面跳转指令,通过当前子页面获取当前子页面中转数据。
当前子页面即页面跳转之前在终端设备屏幕显示的子页面。每一子页面中包含中转数据,其中,中转数据是指页面跳转时从当前子页面跳转到下一子页面过程中起承接作用的数据。当面子页面中转数据是指当前子页面所包含的中转数据。例如,该中转数据具体可以是机构等级、机构代码和数据维度等等。
本实施例中,根据获取的页面跳转指令,父页面通过当前子页面获取当前子页面中转数据,并将该当前子页面中转数据保存在父页面中,以在页面跳转过程中父页面根据当前子页面中转数据跳转到下一子页面,加载下一子页面数据。父页面通过当前子页面获取到当前子页面中转数据,实现了利用父页面进行数据中转的功能,通过父页面与子页面之间的沟通,提高了加载数据的效率。
在一具体实施方式中,当前子页面包括当前子页面中转数据,当前子页面中转数据保存在当前子页面的JavaScript对象中。
在该具体实施方式中,步骤S30具体包括如下步骤:父页面通过当前子页面的JavaScript对象获取当前子页面中转数据。
每一子页面都有子页面的JavaScript对象,父页面有父页面的JavaScript对象,在步骤S20中提及的子页面共有的JavaScript对象是指将每一子页面的JavaScript对象共有的、相同的方法函数统一封装成一个JavaScript对象,将该JavaScript对象称为子页面共有的JavaScript对象。当前子页面中转数据是页面跳转时起承接作用的数据,因为页面间的跳转有多种情况,且用户的实际需求不同,因此当前子页面中转数据不是子页面间共有的部分,需要单独进行获取。本实施例中,当前子页面包括当前子页面中转数据,并且当前子页面将当前子页面中转数据保存在当前子页面的JavaScript对象中,以使父页面能够通过当前子页面的JavaScript对象直接获取当前子页面中转数据。
进一步地,在父页面通过当前子页面的JavaScript对象获取当前子页面中转数据的步骤之后,还包括如下步骤:父页面将当前子页面中转数据保存在父页面的JavaScript对象中。
本实施例中,父页面根据获取的页面跳转指令,执行获取当前子页面中转数据的动作,具体为父页面通过当前子页面的JavaScript对象,获取该当前子页面中转数据,并将该当前子页面中转数据保存在父页面的JavaScript对象中。例如,当前子页面为车险日报,且页面通过机构等级、机构代码等当前子页面中转数据进行页面跳转时,在车险日报这个当前子页面中从全国的数据看到东南区的数据,并再次点击看到广东的数据时,每次动作都会把当前子页面的机构代码和机构等级保存到当前子页面的JavaScript对象中,父页面再通过当前子页面的JavaScript对象将机构代码和机构等级保存到父页面的JavaScript对象中。
S40:基于页面跳转指令,父页面调用子页面共有的JavaScript对象的加载数据方法函数,根据加载数据方法函数和当前子页面中转数据,加载下一子页面ID相对应的下一子页面数据。
子页面共有的JavaScript对象的加载数据方法函数是指不同子页面间具有相同功能的加载数据方法函数。加载数据方法函数相比较页面交互方法函数,因为页面间的切换动作比较固定(例如根据页面之间的顺序逻辑关系,有向左侧滑动或向上滑动等切换动作),故页面交互方法函数可以包括绝大多数页面间相同的切换动作;而页面间数据的加载是有一定的差异的,可能只存在一部分加载数据是相同的,因此还需要借助当前子页面中转数据来确定最终加载的数据。如果两个子页面间没有共有的加载数据方法函数,则该共有的加载数据方法函数允许为空,实际上页面跳转过程只借助当前子页面中转数据实现数据的加载。
本实施例中,根据获取的页面跳转指令,父页面调用子页面共有的JavaScript对象的加载数据方法函数,并且获取当前子页面中转数据,通过加载数据方法函数和当前子页面中转数据加载下一子页面数据,通过调用子页面共有的JavaScript对象的加载数据方法函数实际上只花费一次调用该JavaScript对象的加载数据方法函数的时间,通过父页面实现数据的中转能够直接获取跳转所需的数据,加快数据加载的速度,实现从当前子页面向下一子页面跳转时快速加载数据的效果。
在一具体实施方式中,如图4所示,步骤S40中,基于页面跳转指令,父页面调用子页面共有的JavaScript对象的加载数据方法函数,根据加载数据方法函数和当前子页面中转数据,加载下一子页面ID相对应的下一子页面数据,具体包括如下步骤:
S41:根据加载数据方法函数获取下一子页面数据中的子页面共有数据。
下一子页面数据是指下一子页面中加载的所有数据,包括子页面共有数据和子页面非共有数据。本实施例中,在页面跳转过程中,父页面将调用子页面共有的JavaScript对象的加载数据方法函数,并根据该加载数据方法函数加载下一子页面数据中的子页面共有数据。例如可以是车险日报子页面和车险详情子页面中关于车险部分的共有数据。
S42:根据当前子页面中转数据,调用与当前子页面中转数据相对应的加载数据方法函数,获取下一子页面数据中的子页面非共有数据。
其中,与当前子页面中转数据相对应的加载数据方法函数与步骤S41中的加载数据方法函数都是指加载数据所需的方法函数,但是,两者具体加载的数据和具体采用的加载数据方法函数是不相同的。如步骤S41是指与下一子页面数据中的子页面共有数据相对应的加载数据方法函数;而本步骤是指与当前子页面中转数据相对应的加载数据方法函数。
本实施例中,在页面跳转过程中,父页面根据获取的当前子页面中转数据,调用与该子页面中转数据对应的加载数据方法函数,加载下一子页面数据中的子页面非共有数据。
例如,当页面是通过机构等级、机构代码等当前子页面中转数据进行页面跳转时,在车险日报当前子页面从全国的数据看到东南区的数据,并再次点击看到广东的数据时,每次动作都会把当前子页面的机构代码和机构等级保存到当前子页面的JavaScript对象中,父页面再通过当前子页面将机构代码和机构等级保存到父页面的JavaScript对象中。当在该车险日报子页面需要查看广东某一机构车险日报的详情时,因为车险日报和车险详情是不同的子页面,所以在页面跳转时需要根据父页面的JavaScript对象中保存的当前子页面中转数据(在这里具体是指车险日报的机构代码和机构等级,即广东的某一机构),请求该当前子页面中转数据对应的车险详情子页面中广东的某一机构的详情数据。通过广东车险日报子页面的当前子页面中转数据,实现从广东车险日报子页面跳转到广东车险详情子页面的功能。
本实施例所提供的多页面切换方法中,首先父页面获取页面跳转指令,页面跳转指令包括下一子页面ID,通过获取的页面跳转指令,能够有效达到页面切换、跳转的目的,能够准确实现页面跳转的结果。接着父页面基于页面跳转指令调用子页面共有的JavaScript对象的页面交互方法函数,根据页面交互方法函数切换到与下一子页面ID相对应的下一子页面显示页面,通过父页面基于页面跳转指令调用子页面共有的JavaScript对象的页面交互方法函数,使得每次切换中父页面在调用子页面共有的JavaScript对象的页面交互方法函数时,实际上只花了一次调用该JavaScript对象的时间,有效实现了页面切换过程中页面间无空白衔接切换的效果,大大提高了页面切换的效率,缩短了页面切换时的等待时间。然后父页面通过页面跳转指令获取到子页面中转数据,实现了利用父页面进行数据中转的功能,通过父页面与子页面之间的沟通,有效提高加载数据的效率。最后父页面基于页面跳转指令调用子页面共有的JavaScript对象的加载数据方法函数,根据加载数据方法函数和当前子页面中转数据,获取下一子页面ID相对应的下一子页面数据,并将下一子页面数据加载在下一子页面显示页面,通过父页面实现数据的中转能够直接获取跳转所需的数据,加快数据加载的速度,实现从当前子页面向下一子页面跳转时快速加载数据的效果。
应理解,上述实施例中各步骤的序号的大小并不意味着执行顺序的先后,各过程的执行顺序应以其功能和内在逻辑确定,而不应对本发明实施例的实施过程构成任何限定。
实施例2
图5示出与实施例1中多页面切换方法一一对应的业多页面切换装置的原理框图。如图5所示,该多页面切换装置包括页面跳转指令获取模块10、页面切换模块20、中转数据获取模块30和数据加载模块40。其中,页面跳转指令获取模块10、页面切换模块20、中转数据获取模块30和数据加载模块40的实现功能与实施例1中多页面切换方法对应的步骤一一对应,为避免赘述,本实施例不一一详述。
页面跳转指令获取模块10,用于父页面获取页面跳转指令,页面跳转指令包括下一子页面ID。
页面切换模块20,用于父页面基于页面跳转指令调用子页面共有的JavaScript对象的页面交互方法函数,根据页面交互方法函数切换到与下一子页面ID相对应的下一子页面显示页面。
中转数据获取模块30,用于父页面基于页面跳转指令,通过当前子页面获取当前子页面中转数据。
数据加载模块40,用于父页面基于页面跳转指令调用子页面共有的JavaScript对象的加载数据方法函数,根据加载数据方法函数和当前子页面中转数据,获取下一子页面ID相对应的下一子页面数据,并将下一子页面数据加载在下一子页面显示页面。
优选地,页面切换模块20包括定位单元21和移动单元22。
定位单元21,用于通过下一子页面ID获取相对应的下一子页面显示页面,根据页面交互方法函数将下一子页面显示页面预先定位在屏幕外任一侧。
移动单元22,用于根据页面交互方法函数,令当前子页面沿远离下一子页面显示页面所在的位置向屏幕外移动,将下一子页面显示页面移动到当前子页面在屏幕原本的位置。
优选地,当前子页面包括当前子页面中转数据,当前子页面中转数据保存在当前子页面的JavaScript对象中。
中转数据获取模块30,用于父页面通过所述当前子页面的JavaScript对象获取所述当前子页面中转数据。
优选地,多页面切换装置还包括中转数据保存模块50,用于父页面将当前子页面中转数据保存在父页面的JavaScript对象中。
优选地,下一子页面ID与页面跳转指令的获取按钮相关联。
优选地,数据加载模块40包括共有数据获取单元41和非共有数据获取单元42。
共有数据获取单元41,用于根据子页面共有的JavaScript对象相对应的加载数据方法函数获取下一子页面数据中的子页面共有数据。
非共有数据获取单元42,用于根据当前子页面中转数据,调用与当前子页面中转数据相对应的加载数据方法函数,获取下一子页面数据中的子页面非共有数据。
优选地,多页面切换装置还包括子页面设置模块60,子页面设置模块60包括子页面创建单元61和子页面默认设置单元62。
子页面创建单元61,用于采用iframe标签在父页面创建至少两个子页面。
子页面默认设置单元62,用于基于iframe标签,每个子页面默认设置为加载子页面结构和子页面渲染。
本实施例所提供的多页面切换装置中,页面跳转指令获取模块10用于父页面获取页面跳转指令,页面跳转指令包括下一子页面ID,通过获取的页面跳转指令,能够有效达到页面切换、跳转的目的,能够准确实现页面跳转的结果。页面切换模块20用于父页面基于页面跳转指令调用子页面共有的JavaScript对象的页面交互方法函数,根据页面交互方法函数切换到与下一子页面ID相对应的下一子页面显示页面,通过父页面基于页面跳转指令调用子页面共有的JavaScript对象的页面交互方法函数,使得每次切换中父页面在调用子页面共有的JavaScript对象的页面交互方法函数时,实际上只花了一次调用该JavaScript对象的时间,有效实现了页面切换过程中页面间无空白衔接切换的效果,大大提高了页面切换的效率,缩短了页面切换时的等待时间。中转数据获取模块30用于父页面基于页面跳转指令,通过当前子页面获取当前子页面中转数据,通过父页面与子页面之间的沟通,有效提高加载数据的效率。数据加载模块40用于父页面基于页面跳转指令调用子页面共有的JavaScript对象的加载数据方法函数,根据加载数据方法函数和当前子页面中转数据,获取下一子页面ID相对应的下一子页面数据,并将下一子页面数据加载在下一子页面显示页面,通过父页面实现数据的中转能够直接获取跳转所需的数据,加快数据加载的速度,实现从当前子页面向下一子页面跳转时快速加载数据的效果。
实施例3
本实施例提供一计算机可读存储介质,该计算机可读存储介质上存储有计算机程序,该计算机程序被处理器执行时实现实施例1中多页面切换方法,为避免重复,这里不再赘述。或者,该计算机程序被处理器执行时实现实施例2中多页面切换装置中各模块/单元的功能,为避免重复,这里不再赘述。
实施例4
图6是本实施例中终端设备的示意图。如图6所示,终端设备70包括处理器71、存储器72以及存储在存储器72中并可在处理器71上运行的计算机程序73。处理器71执行计算机程序73时实现实施例1中多页面切换方法的各个步骤,例如图1所示的步骤S10、S20、S30和S40。或者,处理器71执行计算机程序73时实现实施例2中多页面切换装置各模块/单元的功能,如图5所示页面跳转指令获取模块10、页面切换模块20、中转数据获取模块30和数据加载模块40的功能。
示例性的,计算机程序73可以被分割成一个或多个模块/单元,一个或者多个模块/单元被存储在存储器72中,并由处理器71执行,以完成本发明。一个或多个模块/单元可以是能够完成特定功能的一系列计算机程序指令段,该指令段用于描述计算机程序73在终端设备70中的执行过程。例如,计算机程序70可被分割成实施例2中的页面跳转指令获取模块10、页面切换模块20、中转数据获取模块30和数据加载模块40,各模块的具体功能如实施例2所示,为避免重复,此处不一一赘述。
终端设备70可以是桌上型计算机、笔记本、掌上电脑及云端服务器等计算设备。终端设备可包括,但不仅限于,处理器71、存储器72。本领域技术人员可以理解,图6仅仅是终端设备70的示例,并不构成对终端设备70的限定,可以包括比图示更多或更少的部件,或者组合某些部件,或者不同的部件,例如终端设备还可以包括输入输出设备、网络接入设备、总线等。
所称处理器71可以是中央处理单元(Central Processing Unit,CPU),还可以是其他通用处理器、数字信号处理器(Digital Signal Processor,DSP)、专用集成电路(Application Specific Integrated Circuit,ASIC)、现场可编程门陈列(Field-Programmable Gate Array,FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。
存储器72可以是终端设备70的内部存储单元,例如终端设备70的硬盘或内存。存储器72也可以是终端设备70的外部存储设备,例如终端设备70上配备的插接式硬盘,智能存储卡(Smart Media Card,SMC),安全数字(SecureDigital,SD)卡,闪存卡(Flash Card)等。进一步地,存储器72还可以既包括终端设备70的内部存储单元也包括外部存储设备。存储器72用于存储计算机程序以及终端设备所需的其他程序和数据。存储器72还可以用于暂时地存储已经输出或者将要输出的数据。
所属领域的技术人员可以清楚地了解到,为了描述的方便和简洁,仅以上述各功能单元、模块的划分进行举例说明,实际应用中,可以根据需要而将上述功能分配由不同的功能单元、模块完成,即将所述装置的内部结构划分成不同的功能单元或模块,以完成以上描述的全部或者部分功能。
另外,在本发明各个实施例中的各功能单元可以集成在一个处理单元中,也可以是各个单元单独物理存在,也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现,也可以采用软件功能单元的形式实现。
所述集成的模块/单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时,可以存储在一个计算机可读取存储介质中。基于这样的理解,本发明实现上述实施例方法中的全部或部分流程,也可以通过计算机程序来指令相关的硬件来完成,所述的计算机程序可存储于一计算机可读存储介质中,该计算机程序在被处理器执行时,可实现上述各个方法实施例的步骤。其中,所述计算机程序包括计算机程序代码,所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读介质可以包括:能够携带所述计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(ROM,Read-OnlyMemory)、随机存取存储器(RAM,Random Access Memory)、电载波信号、电信信号以及软件分发介质等。需要说明的是,所述计算机可读介质包含的内容可以根据司法管辖区内立法和专利实践的要求进行适当的增减,例如在某些司法管辖区,根据立法和专利实践,计算机可读介质不包括是电载波信号和电信信号。
以上实施例仅用以说明本发明的技术方案,而非对其限制;尽管参照前述实施例对本发明进行了详细的说明,本领域的普通技术人员应当理解:其依然可以对前述各实施例所记载的技术方案进行修改,或者对其中部分技术特征进行等同替换;而这些修改或者替换,并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围,均应包含在本发明的保护范围之内。
Claims (10)
1.一种多页面切换方法,其特征在于,包括:
父页面获取页面跳转指令,所述页面跳转指令包括下一子页面ID;
父页面基于所述页面跳转指令调用子页面共有的JavaScript对象的页面交互方法函数,根据所述页面交互方法函数切换到与所述下一子页面ID相对应的下一子页面显示页面;
父页面基于所述页面跳转指令,通过当前子页面获取当前子页面中转数据;
父页面基于所述页面跳转指令调用子页面共有的JavaScript对象的加载数据方法函数,根据所述加载数据方法函数和所述当前子页面中转数据,获取所述下一子页面ID相对应的下一子页面数据,并将所述下一子页面数据加载在所述下一子页面显示页面;
所述子页面共有的JavaScript对象是指将各个子页面具有相同功能的JavaScript对象提取出来,并统一封装的JavaScript对象。
2.根据权利要求1所述的多页面切换方法,其特征在于,在所述父页面获取页面跳转指令的步骤之前,所述多页面切换方法还包括:
采用iframe标签在父页面创建至少两个子页面;
基于所述iframe标签,每个所述子页面默认设置为加载子页面结构和子页面渲染。
3.根据权利要求1所述的多页面切换方法,其特征在于,所述根据所述页面交互方法函数切换到与所述下一子页面ID相对应的下一子页面显示页面,包括:
通过所述下一子页面ID获取相对应的所述下一子页面显示页面,根据所述页面交互方法函数将所述下一子页面显示页面预先定位在屏幕外任一侧;
根据所述页面交互方法函数,令当前子页面沿远离所述下一子页面显示页面所在的位置向屏幕外移动,将所述下一子页面显示页面移动到所述当前子页面在屏幕原本的位置。
4.根据权利要求1所述的多页面切换方法,其特征在于,所述当前子页面包括所述当前子页面中转数据,所述当前子页面中转数据保存在所述当前子页面的JavaScript对象中;
所述父页面通过当前子页面获取当前子页面中转数据,包括:
所述父页面通过所述当前子页面的JavaScript对象获取所述当前子页面中转数据。
5.根据权利要求4所述的多页面切换方法,其特征在于,在所述父页面通过所述当前子页面的JavaScript对象获取所述当前子页面中转数据的步骤之后,还包括:
父页面将所述当前子页面中转数据保存在所述父页面的JavaScript对象中。
6.根据权利要求1所述的多页面切换方法,其特征在于,所述根据所述加载数据方法函数和所述当前子页面中转数据,获取所述下一子页面ID相对应的下一子页面数据,包括:
根据所述子页面共有的JavaScript对象相对应的加载数据方法函数获取所述下一子页面数据中的子页面共有数据;
根据所述当前子页面中转数据,调用与所述当前子页面中转数据相对应的加载数据方法函数,获取所述下一子页面数据中的子页面非共有数据。
7.根据权利要求1所述的多页面切换方法,其特征在于,所述下一子页面ID与所述页面跳转指令的获取按钮相关联。
8.一种页面切换装置,其特征在于,包括:
页面跳转指令获取模块,用于父页面获取页面跳转指令,所述页面跳转指令包括下一子页面ID;
页面切换模块,用于父页面基于所述页面跳转指令调用子页面共有的JavaScript对象的页面交互方法函数,根据所述页面交互方法函数切换到与所述下一子页面ID相对应的下一子页面显示页面;
中转数据获取模块,用于父页面基于所述页面跳转指令,通过当前子页面获取当前子页面中转数据;
数据加载模块,用于父页面基于所述页面跳转指令调用子页面共有的JavaScript对象的加载数据方法函数,根据所述加载数据方法函数和所述当前子页面中转数据,获取所述下一子页面ID相对应的下一子页面数据,并将所述下一子页面数据加载在所述下一子页面显示页面;
所述子页面共有的JavaScript对象是指将各个子页面具有相同功能的JavaScript对象提取出来,并统一封装的JavaScript对象。
9.一种终端设备,包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序,其特征在于,所述处理器执行所述计算机程序时实现如权利要求1至7任一项所述多页面切换方法的步骤。
10.一种计算机可读存储介质,所述计算机可读存储介质存储有计算机程序,其特征在于,所述计算机程序被处理器执行时实现如权利要求1至7任一项所述多页面切换方法的步骤。
Priority Applications (2)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201810014131.3A CN108459888B (zh) | 2018-01-08 | 2018-01-08 | 多页面切换方法、装置、终端设备及存储介质 |
PCT/CN2018/077335 WO2019134237A1 (zh) | 2018-01-08 | 2018-02-27 | 多页面切换方法、装置、终端设备及存储介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201810014131.3A CN108459888B (zh) | 2018-01-08 | 2018-01-08 | 多页面切换方法、装置、终端设备及存储介质 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN108459888A CN108459888A (zh) | 2018-08-28 |
CN108459888B true CN108459888B (zh) | 2019-10-08 |
Family
ID=63220524
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201810014131.3A Active CN108459888B (zh) | 2018-01-08 | 2018-01-08 | 多页面切换方法、装置、终端设备及存储介质 |
Country Status (2)
Country | Link |
---|---|
CN (1) | CN108459888B (zh) |
WO (1) | WO2019134237A1 (zh) |
Families Citing this family (8)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN109542296A (zh) * | 2018-11-30 | 2019-03-29 | 北京字节跳动网络技术有限公司 | 一种标题的切换方法、装置、电子设备及可读介质 |
CN110119296B (zh) * | 2019-04-30 | 2021-09-14 | 华为技术有限公司 | 切换父页面和子页面的方法、相关装置 |
CN112988531B (zh) * | 2019-12-18 | 2022-08-12 | ***通信集团浙江有限公司 | 应用软件的易用性评估方法、装置及计算设备 |
CN111324340B (zh) * | 2020-02-20 | 2021-07-20 | 腾讯科技(深圳)有限公司 | 基于网页副本的交互方法、装置、存储介质和计算机设备 |
CN112068837B (zh) * | 2020-09-10 | 2023-07-18 | 浪潮软件科技有限公司 | 一种终端页面调转及数据保持的方法 |
CN112182442A (zh) * | 2020-09-28 | 2021-01-05 | 湖南亚信软件有限公司 | 页面处理方法、装置、电子设备及计算机可读存储介质 |
CN113312119B (zh) * | 2021-06-04 | 2024-03-15 | 广州博冠信息科技有限公司 | 信息同步方法及装置、计算机可读存储介质、电子设备 |
CN114816564A (zh) * | 2022-04-01 | 2022-07-29 | 维沃移动通信有限公司 | 应用加载方法、装置和电子设备 |
Citations (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN104572263A (zh) * | 2014-12-30 | 2015-04-29 | 腾讯科技(深圳)有限公司 | 一种页面数据交互方法、相关装置及*** |
CN107480148A (zh) * | 2016-06-07 | 2017-12-15 | 广州市动景计算机科技有限公司 | 控制网页跳转的方法及装置及用户终端 |
Family Cites Families (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US6360234B2 (en) * | 1997-08-14 | 2002-03-19 | Virage, Inc. | Video cataloger system with synchronized encoders |
CN103856540A (zh) * | 2012-12-06 | 2014-06-11 | 腾讯科技(深圳)有限公司 | 响应处理方法及响应处理装置 |
CN105989083B (zh) * | 2015-02-11 | 2020-01-14 | 阿里巴巴集团控股有限公司 | 切换访问环境的方法及装置 |
-
2018
- 2018-01-08 CN CN201810014131.3A patent/CN108459888B/zh active Active
- 2018-02-27 WO PCT/CN2018/077335 patent/WO2019134237A1/zh active Application Filing
Patent Citations (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN104572263A (zh) * | 2014-12-30 | 2015-04-29 | 腾讯科技(深圳)有限公司 | 一种页面数据交互方法、相关装置及*** |
CN107480148A (zh) * | 2016-06-07 | 2017-12-15 | 广州市动景计算机科技有限公司 | 控制网页跳转的方法及装置及用户终端 |
Also Published As
Publication number | Publication date |
---|---|
CN108459888A (zh) | 2018-08-28 |
WO2019134237A1 (zh) | 2019-07-11 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN108459888B (zh) | 多页面切换方法、装置、终端设备及存储介质 | |
CN110309451B (zh) | 一种web预加载页面的生成方法及装置 | |
US9916388B2 (en) | Simplified website creation, configuration, and customization system | |
CN111639289A (zh) | 一种网页加载方法及装置 | |
CN107766532A (zh) | 一种前端Node.js自动化正静态方法 | |
CN105786513A (zh) | 基于Html5的混合移动应用开发方法 | |
CN104346403A (zh) | 浏览器页面显示方法、装置、浏览器及终端 | |
CN106933640B (zh) | 在移动终端的浏览器内加载Web页面的方法及*** | |
CN106294372A (zh) | 应用程序页面快速访问方法及应用其的移动终端 | |
DE102016001467A1 (de) | Verfahren zum intelligenten Laden von Webreferenzen im Voraus basierend auf einer Vorhersage des Benutzerverhaltens | |
CN105095280A (zh) | 一种浏览器缓存方法和装置 | |
CN103853417A (zh) | 网络动态图片的滚动分页显示方法和装置 | |
CN107045546B (zh) | 一种网页处理方法、装置及智能终端 | |
US9679075B1 (en) | Efficient delivery of animated image files | |
CN112035186A (zh) | H5页面的预加载及跳转方法、装置、设备及介质 | |
CN107943478A (zh) | 一种网页应用程序的开发及加载方法、装置、终端和介质 | |
CN110780868A (zh) | 基于组件化模板的网站开发方法、装置、设备和存储介质 | |
EP3852032A1 (en) | Machine first approach for identifying accessibility, non-compliances, remediation techniques and fixing at run-time | |
CN106681792A (zh) | 浏览器内核的切换方法及其装置、电子设备 | |
CN108279942A (zh) | 展示智能终端应用启动页的方法及装置 | |
CN111399831A (zh) | 页面的展示方法和装置、存储介质、电子装置 | |
CN108595697A (zh) | 网页集成方法、装置及*** | |
CN110096322A (zh) | 适配终端屏幕的方法及装置、存储介质、电子装置 | |
US20180084075A1 (en) | Request cache to improve web applications performance | |
CN111444453A (zh) | 页面回传数据处理方法及其装置 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
GR01 | Patent grant | ||
GR01 | Patent grant |