CN112182442A - 页面处理方法、装置、电子设备及计算机可读存储介质 - Google Patents
页面处理方法、装置、电子设备及计算机可读存储介质 Download PDFInfo
- Publication number
- CN112182442A CN112182442A CN202011042035.3A CN202011042035A CN112182442A CN 112182442 A CN112182442 A CN 112182442A CN 202011042035 A CN202011042035 A CN 202011042035A CN 112182442 A CN112182442 A CN 112182442A
- Authority
- CN
- China
- Prior art keywords
- page
- sub
- loading
- parent
- child
- 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.)
- Pending
Links
- 238000003672 processing method Methods 0.000 title claims abstract description 20
- 238000000034 method Methods 0.000 claims abstract description 23
- 230000004044 response Effects 0.000 claims abstract description 18
- 238000012545 processing Methods 0.000 claims description 16
- 238000004590 computer program Methods 0.000 claims description 12
- 238000011161 development Methods 0.000 abstract description 15
- 238000005516 engineering process Methods 0.000 abstract description 15
- 230000003993 interaction Effects 0.000 description 9
- 230000002829 reductive effect Effects 0.000 description 9
- 238000010586 diagram Methods 0.000 description 5
- 230000005540 biological transmission Effects 0.000 description 4
- 238000005096 rolling process Methods 0.000 description 4
- 230000006870 function Effects 0.000 description 3
- 230000003287 optical effect Effects 0.000 description 3
- 238000002407 reforming Methods 0.000 description 3
- 230000003068 static effect Effects 0.000 description 3
- 238000012546 transfer Methods 0.000 description 3
- 238000005034 decoration Methods 0.000 description 2
- 230000000694 effects Effects 0.000 description 2
- 238000007667 floating Methods 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 230000036961 partial effect Effects 0.000 description 2
- 238000010276 construction Methods 0.000 description 1
- 235000019800 disodium phosphate Nutrition 0.000 description 1
- 230000002349 favourable effect Effects 0.000 description 1
- 230000000670 limiting effect Effects 0.000 description 1
- 230000002093 peripheral effect Effects 0.000 description 1
- 230000000717 retained effect Effects 0.000 description 1
- 230000001360 synchronised effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/955—Retrieval from the web using information identifiers, e.g. uniform resource locators [URL]
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本申请实施例提供了一种页面处理方法、装置、电子设备及计算机可读存储介质,涉及计算机网络技术领域。该方法包括:响应于针对网络应用的打开操作,加载父页面;基于所述网络应用的页面地址,通过所述父页面获取待加载的第一子页面;基于第一嵌套框架加载所述第一子页面,以使所述第一子页面嵌套于所述父页面中进行显示。本申请的实施能够在基于传统网络开发技术提供单页面网络应用体验的同时,解决单页面网络应用存在的首次加载慢的问题。
Description
技术领域
本申请涉及计算机网络技术领域,具体而言,本申请涉及一种页面处理方法、装置、电子设备及计算机可读存储介质。
背景技术
随着计算机网络的发展,人们对网络加载速度的要求也在不断提高。目前在前端开发中,可采用单页面网络应用(Single Page Web Application,SPA)来提高网页加载效率。单页面网络应用是一种通过加载单个Web页面,并在用户与网络应用交互时动态更新该页面的网络应用。具体地,浏览器或其他客户端一开始就会加载所有资源文件,之后所有操作都在这张Web页面上完成。即一旦页面加载完成,单页面网络应用就不再因为用户的操作而进行页面的重新加载或跳转,而是利用JavaScript动态的变换HTML的内容,从而实现与用户的交互。
单页面网络应用虽然能够在一定程度上提高用户的体验,但是由于单页面网络应用在首个页面加载时就一次性加载所有页面的资源,容易导致加载首页慢的问题。
发明内容
本申请提供了一种页面处理方法、装置、电子设备及计算机可读存储介质,可以基于传统Web技术提供类似单页面网络应用的用户体验,同时还可提高首页加载速度。所述技术方案包括:
第一方面,本申请实施例提供了一种页面处理方法,该方法包括:响应于针对网络应用的打开操作,加载父页面;基于所述网络应用的页面地址,通过所述父页面获取待加载的第一子页面;基于第一嵌套框架加载所述第一子页面,以使所述第一子页面嵌套于所述父页面中进行显示。
第二方面,本申请实施例提供了一种页面处理装置,该装置包括:父页面加载模块,用于响应于针对网络应用的打开操作,加载父页面;子页面获取模块,用于基于所述网络应用的页面地址,通过所述父页面获取待加载的第一子页面;子页面加载模块,用于基于第一嵌套框架加载所述第一子页面,以使所述第一子页面嵌套于所述父页面中进行显示。
第三方面,本申请实施例提供了一种电子设备,所述电子设备包括:一个或多个计算机程序,其中,所述一个或多个计算机程序被存储在所述存储器中并被配置为由所述一个或多个处理器执行,所述一个或多个计算机程序配置用于:执行如上述第一方面所述的方法。
第四方面,本申请实施例提供了一种计算机可读存储介质,其上存储有计算机程序,所述计算机程序被处理器调用执行时实现如上述第一方面所述的方法。
本申请实施例提供的一种页面处理方法、装置、电子设备及计算机可读存储介质,通过响应于针对网络应用的打开操作,加载父页面,然后基于网络应用的页面地址,通过父页面获取待加载的第一子页面,最后基于第一嵌套框架加载第一子页面,以使第一子页面嵌套于父页面中进行显示。由此,通过先加载本身不展示内容的父页面,然后通过嵌套框架技术,首次只获取第一子页面,并让第一子页面以嵌套于父页面的方式加载,从而可提供类似单页面网络应用的用户体验,同时由于首次只加载父页面和第一子页面,所需加载的数据量小,不影响首次页面的加载速度。
附图说明
为了更清楚地说明本申请实施例中的技术方案,下面将对本申请实施例描述中所需要使用的附图作简单地介绍。
图1示出了传统网络应用和单页面网络应用的交互示意图。
图2示出了本申请一个实施例提供的页面处理方法的流程示意图。
图3示出了本申请另一个实施例提供的页面处理方法的流程示意图。
图4示出了本申请一个示例性实施例提供的图3中步骤S230的详细流程示意图。
图5示出了本申请一个实施例提供的页面处理装置的模块框图。
图6示出了本申请实施例提供的电子设备的结构框图。
具体实施方式
下面详细描述本申请的实施例,所述实施例的示例在附图中示出,其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的,仅用于解释本申请,而不能解释为对本发明的限制。
本技术领域技术人员可以理解,除非特意声明,这里使用的单数形式“一”、“一个”、“所述”和“该”也可包括复数形式。应该进一步理解的是,本申请的说明书中使用的措辞“包括”是指存在所述特征、整数、步骤、操作、元件和/或组件,但是并不排除存在或添加一个或多个其他特征、整数、步骤、操作、元件、组件和/或它们的组。应该理解,当我们称元件被“连接”或“耦接”到另一元件时,它可以直接连接或耦接到其他元件,或者也可以存在中间元件。此外,这里使用的“连接”或“耦接”可以包括无线连接或无线耦接。这里使用的措辞“和/或”包括一个或更多个相关联的列出项的全部或任一单元和全部组合。
请参阅图1,其示出了传统网络应用和单页面网络应用的交互示意图。如图1所示,传统网络应用采用同步交互的形式,即用户向服务器发送统一资源定位符(UniformResource Locator,URL)请求,然后服务器再根据该请求返回超文本标记语言(HyperTextMarkup Language,HTML)响应(Response),如HTML页面。在这种交互形式下,每次接收到用户的URL请求都需要重新加载整个页面(即整页刷新),而整页刷新往往需要较长时间来等待服务器返回的响应,容易导致“白屏”现象,影响用户体验。
然而多数情况下,根据用户的URL请求,往往只需要更新页面的小部分数据,而页面上的大部分数据无需更新,如果此时仍采用上述同步交互的形式针对每次URL请求都进行整页刷新,实际上增加了用户等待时间,同时也因数据的重复传递而对服务器资源和网络带宽造成浪费。
而单页面网络应用采用异步交互的形式,通过异步JavaScript和XML(Asynchronous Javascript And XML,AJAX)的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。
目前,单页面网络应用在应用加载之后不会再有整页刷新,它将所有的活动局限于一个Web页面中,不会因用户的操作而进行页面的重新加载或跳转,而是利用JavaScipt动态的变换页面内容,从而实现用户界面(UserInterface)与用户的交互。因此,单页面网络应用可以一定程度地解决传统网络应用的加载效率问题。
具体地,当前的单页面网络应用主要基于以Vue/Angular/React为主的三大框架进行开发,这种实现方案的特点是,仅在页面初始化时加载所有的资源文件,如HTML、JavaScript、层叠样式表(Cascading Style Sheets,CSS)文件,一旦该页面加载完成,则后续基于该页面交互时,不需加载新的资源文件。
但是,发明人经研究发现,基于Vue/Angular/React框架开发的开发入门门槛较高,开发环境的搭建较复杂,因而对开发人员的技术要求较高,不利于广泛使用当前的实现方案来开发单页面网络应用;而且,对已有的普通Web页面,要将其改造成单页面网络应用,需要完全重新开发,后台服务端代码也可能需要做相应调整,故改造工作量较大,改造成本较高;再者,基于Vue/Angular/React框架开发的单页面网络应用,在首次需要加载所有页面的静态资源,容易导致首次页面加载慢,白屏时间过长的问题。
基于上述问题,本申请实施例提供了一种页面处理方法、装置、电子设备及计算机可读存储介质,可通过父页面基于嵌套框架的技术将网络应用中的界面以子页面加载,首次只加载一个页面即第一子页面,使得首次加载的数据量较小,不影响首次页面的加载速度,从而可基于传统Web技术在提供类似单页面网络应用的用户体验的同时,解决当前单页面网络应用的实现方案存在的首次页面加载慢的问题。
下面将通过具体实施例对本申请实施例提供的页面处理方法、装置、电子设备及计算机可读存储介质进行详细说明。
请参阅图2,图2示出了本申请一个实施例提供的页面处理方法的流程示意图,可应用于客户端,客户端可以是浏览器或其他具有加载、显示页面功能的应用程序(Application,APP)客户端。在应用时,用户可通过配置于电子设备上的客户端发起页面请求,其中,电子设备例如可以为台式电脑、平板电脑、笔记本电脑、手机、个人数字助理、可穿戴设备等,本申请对此不作限定。下面针对图1所示的流程进行详细的阐述,该页面处理方法可以包括以下步骤:
S110:响应于针对网络应用的打开操作,加载父页面。
其中,网络应用,也称Web应用,其是一种可以通过Web访问的应用程序,可以供上述客户端访问,通过客户端与服务器进行数据交互。网络应用可运行于上述客户端,用户可基于电子设备执行针对网络应用的打开操作,使得该网络应用的客户端可响应于针对网络应用的打开操作,加载父页面。
在一些实施方式中,打开操作包括但不限于用户基于电子设备输入的可触发跳转网络应用的触控操作,例如,电子设备基于客户端可显示用于打开网络应用的链接如商品链接、按钮如支付按钮等,当电子设备检测到对所述链接的链接、按钮等的触控操作时,可通知客户端,以使客户端检测到针对网络应用的打开操作。其中,页面请求根据网络应用的不同可以是任何场景下的页面请求,例如,页面请求可以是网页浏览请求、订单支付请求、第三方支付平台的转账请求等。
本申请实施例中,客户端响应于针对网络应用的打开操作,加载父页面。在一些实施方式中,父页面本身可以不展示网络应用的界面,即不包含任何内容,仅负责基于嵌套框架的形式加载子页面,以加载网络应用的页面。
需要说明的是,本申请实施例中的嵌套框架包括但不限于浮动框架(iframe),只要可实现页面之间的嵌套即可,在此不作限定。Iframe是HTML中的标签,其可用于创建包含另外一个文档的内联框架,即可用于创建文档中的文档。在网页显示中,其作用是在显示父页面的同时,浮动于父页面之外显示一个子页面。下面主要以嵌套框架为iframe为例进行说明。
客户端可通过父页面,基于iframe嵌套显示多个子页面,即每个iframe的地址可分别指向网络应用的各个页面的页面地址。
S120:基于网络应用的页面地址,通过父页面获取待加载的第一子页面。
网页应用的页面地址可以为网络应用的URL地址,客户端响应于针对网络应用的打开操作,可获取网络应用的URL地址,并基于URL地址向服务器请求待加载的页面。作为一种实施方式,可以通过页面地址中参数或配置确定待加载的第一子页面,并通过父页面获取该待加载的第一子页面。
另外,在一些实施例中,网络应用的页面地址中可能不包含可以用于确定第一子页面的参数或配置,则此时可将网络应用的登录页面作为待加载的第一子页面,从而可在页面地址没有相关参数或配置时,默认加载登录页面,而在有相关参数或配置时,加载该参数或配置所指示的页面。其中,登录页面可用于获取用户输入的帐户信息,帐户信息可包括但不限于帐号、密码等,在此不作限定。
S130:基于第一嵌套框架加载第一子页面,以使第一子页面嵌套于父页面中进行显示。
本申请实施例中,客户端可通过嵌套框架技术加载页面,客户端可创建第一嵌套框架,并基于第一嵌套框架加载第一子页面,以使第一子页面嵌套与父页面中进行显示。例如,以嵌套框架为iframe为例,客户端可通过父页面创建iframe,并基于iframe加载第一子页面。
由此,本实施例提供的页面处理方法,通过响应于针对网络应用的打开操作,首次仅加载父页面以及第一子页面,可无需首次加载所有页面的资源文件,使得首次加载的数据量小,不影响首次页面的加载速度。而且本实施例通过父页面基于嵌套框架技术来加载网络应用的子页面,则可让普通Web页面基于iframe加载子页面,基于传统Web技术提供类似单页面网络应用的用户体验,降低单页面开发技术难度,降低对开发人员技术能力的要求。
在一些实施例中,通过父页面加载子页面时,可以按需加载,在需要加载下一页面时,再向服务器请求相应页面的资源文件,从而可不必一次性加载所有页面的资源文件,利用传统Web应用开发相对于单页面网络应用的优势,保证较高的首次页面的加载速度,又基于嵌套框架显示网络应用子页面的方式实现单页面网络应用的用户体验,从而可基于传统Web技术开发单页面网络应用,降低单页面开发技术难度,进而降低对开发人员技术水平的要求。请参阅图3,其示出了本申请另一个实施例提供的页面处理方法的流程示意图,于本实施例中,该方法可包括:
S210:响应于作用在当前子页面的输入操作,通过当前子页面向父页面发送对应的页面加载消息。
其中,当前子页面为通过父页面在当前时刻所显示的子页面,其可以是第一子页面,也可以不是,取决于在当前时刻第一子页面是否在父页面中显示,若是,则当前子页面可为第一子页面。
用户与子页面进行交互时,可基于当前子页面执行输入操作,例如点击当前子页面上的按钮等,则客户端响应于作用在当前子页面的输入操作,可通过当前子页面向父页面发送对应的页面加载消息。
在一些实施方式中,子页面可基于HTML5的应用程序接口(ApplicationProgramming Interface,API)如postMessageAPI与父页面进行通信,则响应于作用在当前子页面的输入操作,当前子页面可通过HTML5的postMessageAPI与父页面通信,基于作用在当前子页面的输入操作,向父页面发送相应的页面加载消息,用于加载新的子页面。
在另一些实施方式中,子页面还可基于其它消息传输方式与父页面进行通信,例如,使用flash、或再创建一个嵌套框架如iframe等来进行消息传输,本实施例对此不作限定。
S220:根据接收到的页面加载消息,通过父页面向服务器发送与页面加载消息对应的页面加载请求,以使服务器针对页面加载请求返回第二子页面。
父页面接收到该页面加载消息,可解析该页面加载消息,并生成页面加载消息对应的页面加载请求,向服务器发送该页面加载请求。作为一种实施方式,具体地,可创建一个表单,根据对该页面加载消息解析得到的信息配置该表单,并将配置好的表单提交给服务器。其中,页面加载消息可包括需加载的第二子页面的请求方式、页面地址、参数等信息,在此不作限定。其中,表单可以为Form表单,即一种<form>标记开头,以</form>标记结尾的表单,在表单中可以定义处理URL地址等信息。并form表单的提交与重置可以通过HTML自带的表单按钮方式,或者使用JavaScript脚本的方式,在此不作限定。
客户端通过父页面向服务器发送与页面加载消息对应的页面加载请求后,服务器接收到该页面加载请求后,可根据页面加载请求可返回第二子页面,则客户端可获取该第二子页面。
S230:加载第二子页面。
客户端获取该第二子页面后,可通过父页面加载该第二子页面。
在一些实施方式中,步骤S230也可具体包括步骤S231至S232,以将第二子页面嵌套显示于父页面。具体地,请参阅图5,其示出了本申请一个示例性实施例提供的图3中步骤S230的详细流程示意图,于本实施例中,步骤S230可包括:
S231:基于父页面创建第二嵌套框架。
S232:基于第二嵌套框架加载第二子页面。
在一些实施例中,在父页面接收并解析页面加载消息后,可以基于父页面创建新的嵌套框架,记为第二嵌套框架,再基于第二嵌套框架加载第二子页面。
需要说明的是,本实施例对步骤S231与步骤S220的执行顺序不做限定,例如,可先创建第二嵌套框架,再向服务器发送页面加载请求;再如,也可先向服务器发送页面加载请求,再创建第二嵌套框架;又如,还可同时执行,即创建第二嵌套框架,并同时向服务器发送页面加载请求。
在一些实施例中,加载第二子页面之后,可通过父页面对第一子页面进行销毁处理,由于第一嵌套框架在第二嵌套框架之前创建,且第一子页面在第二子页面之前加载,由此,通过在加载第二子页面之后对第一子页面进行销毁处理,可在新的子页面加载之后,通过父页面自动将上一个加载的子页面销毁。从而可以减小对客户端乃至电子设备的内存的占用,提高客户端运行效率,减少页面加载的卡顿。
作为一种实施方式,通过父页面对第一子页面进行销毁处理时,可将第一嵌套框架连同基于第一嵌套框架加载的第一子页面一并销毁。
在一个示例中,若父页面依次加载子页面A、子页面B,则用户可以在加载子页面B后,对子页面A进行销毁处理,以减小当前未使用的子页面所占用的内存。
在另一些实施例中,加载第二子页面之后,也可保留之前加载的子页面,而不作销毁处理,以方便回退,使得当用户要回退至任一历史子页面时,可以无需重新加载该历史子页面,其中,历史子页面为通过父页面在历史时刻所显示的子页面。
在一些实施方式中,在用户需要回退至历史加载的子页面时,可基于当前子页面执行回退操作,例如,当前子页面上显示有可定向至历史加载的子页面的按钮,则当电子设备检测到用户作用于该按钮的触控操作时,可通知客户端,以使客户端判定检测到作用在当前子页面的回退操作。
进一步地,响应于作用在当前子页面的回退操作,可以通过当前子页面向父页面发送对应的回退消息,其中,回退消息包括回退页面信息。根据回退页面信息,可确定待回退的第三子页面,并将第三子页面嵌套显示于父页面。具体地,父页面接收并解析该回退页面信息,可确定待回退的第三子页面
作为一种实施方式,可通过父页面在历史加载的多个子页面中查找第三子页面,若在历史加载的多个子页面中可查找到第三子页面,则可以将第三子页面嵌套显示于父页面,使得父页面在当前时刻显示的子页面为第三子页面,由此可无需重新加载,提高页面显示效率。例如,客户端可将历史加载的子页面存储于子页面列表,则当检测到回退操作时,可从子页面列表中查找待回退的页面即第三子页面。
在一个示例中,若通过父页面依次加载了子页面A、子页面B、子页面C以及子页面D,则基于作用在子页面B的回退操作,可回退到子页面A,基于作用在子页面C的回退操作可回退到子页面A或子页面B,基于作用在子页面D的回退操作可回退到子页面A、子页面B或子页面C。
在一些实施方式中,当前子页面可基于postMessageAPI向父页面发送回退消息,当然也可通过其它的消息传输方式,向父页面发送回退消息。可以理解的是,子页面向父页面发送回退消息的方式与子页面向父页面发送页面加载消息的方式类似,可参考前述相应部分的描述,在此不再赘述。
另外,通过当前子页面向父页面发送对应的回退消息中出了包括回退页面信息外,还可包括通知消息,通知消息用于从当前子页面传递至待回退的子页面即第三子页面。则通过父页面接收到回退消息后,若解析到回退消息中包含通知消息,还可以通过父页面将通知消息发送至第三子页面,以使第三子页面执行通知消息对应的操作,本实施例不对操作的内容作限定。作为一种实施方式,父页面可基于postMessageAPI向第三子页面发送通知消息,当然也可通过其它的消息传输方式,在此不再赘述。
在一个示例中,若从子页面B回退到子页面A,需要给子页面A传递一个消息,例如数据已经更新,或用户选中了某项数据等,则这类消息可定义在通知消息中,在检测到作用在子页面B的回退操作时,可传递给父页面,并在父页面完成回退,从显示子页面B切换为显示子页面A时,可通过父页面将该通知消息传递给子页面A。
另外,在一些实施例中,将第三子页面嵌套显示于父页面之后,可以根据历史加载的多个子页面的加载时间,在该多个子页面中,通过父页面将加载时间晚于第三子页面的子页面的确定为目标子页面,并对目标子页面进行销毁处理。由此,在回退到第三子页面后,可将在第三子页面后面打开过的子页面销毁,减小对客户端乃至电子设备的内存的占用。
在一个示例中,若通过父页面依次加载了子页面A、子页面B、子页面C以及子页面D,并在当前时刻显示的为子页面D,则检测到作用在子页面D的回退操作,通过子页面D基于postMessageAPI向父页面发送回退消息,若父页面接收并解析该回退消息,确定待回退的子页面为子页面A时,则在回退到子页面A后,可通过父页面可自动将子页面A后面打开的子页面B、C、D销毁。
需要说明的是,本实施例中未详细描述的部分可参考前述实施例的相应部分,在此不再赘述。
由此,通过本实施例提供的页面处理方法,可在前述实施例的基础上,随用户操作,每打开一个新的子页面时,再加载新的子页面对应的资源文件,实现按需加载。并且,页面可使用传统Web技术开发,无需基于Vue/React/Angular三大框架,降低单页面开发技术难度,进而降低对开发人员技术能力的要求。并且,本实施例提高的页面处理方法,还可应用于将已有的Web页面改造成单页面网络应用,无需完全重新开发,只需要改造页面加载代码(用于加载子页面)、页面回退代码(用于回退子页面),不影响后端服务的情况下,改造代码的工作量小。从而为开发人员提供了一种通用的单页面开发方式,提高了开发效率,同时也节约了开发成本。
请参照图5,本申请一实施例提供的一种页面处理装置的模块框图,该页面处理装置500应用于可运行上述客户端的电子设备,电子设备可以为如手机、个人数字助理、平板电脑、笔记本电脑、计算机等,该页面处理装置500具体可以包括:父页面加载模块510、子页面获取模块520以及子页面加载模块530,其中:
父页面加载模块510,用于响应于针对网络应用的打开操作,加载父页面;
子页面获取模块520,用于基于所述网络应用的页面地址,通过所述父页面获取待加载的第一子页面;
子页面加载模块530,用于基于第一嵌套框架加载所述第一子页面,以使所述第一子页面嵌套于所述父页面中进行显示。
在一实施例中,页面处理装置500还可包括:加载消息发送模块、加载请求发送模块以及第二子页面加载模块,其中:
加载消息发送模块,用于响应于作用在当前子页面的输入操作,通过所述当前子页面向所述父页面发送对应的页面加载消息,所述当前子页面为通过所述父页面在当前时刻所显示的子页面;
加载请求发送模块,用于根据接收到的所述页面加载消息,通过所述父页面向服务器发送与所述页面加载消息对应的页面加载请求,以使所述服务器针对所述页面加载请求返回第二子页面;
第二子页面加载模块,用于加载所述第二子页面。
在一实施例中,第二子页面加载模块可包括:第二框架创建子模块以及第二页面加载子模块,其中:
第二框架创建子模块,用于加载基于所述父页面创建第二嵌套框架;
第二页面加载子模块,用于基于所述第二嵌套框架加载所述第二子页面。
在一实施例中,加载所述第二子页面之后,页面处理装置500还可包括:第一页面销毁模块,用于通过所述父页面对所述第一子页面进行销毁处理。
在一实施例中,页面处理装置500还可包括:回退消息发送模块、回退页面确定模块以及回退页面显示模块,其中:
回退消息发送模块,用于响应于作用在当前子页面的回退操作,通过所述当前子页面向所述父页面发送对应的回退消息,所述回退消息包括回退页面信息;
回退页面确定模块,用于根据所述回退页面信息,通过所述父页面确定待回退的第三子页面;
回退页面显示模块,用于将所述第三子页面嵌套显示于所述父页面。
在一实施例中,回退页面显示模块可包括:页面查找子模块以及页面显示子模块,其中:
页面查找子模块,用于通过所述父页面在历史加载的多个子页面中查找所述第三子页面;
页面显示子模块,用于若查找到,将所述第三子页面嵌套显示于所述父页面。
在一实施例中,将所述第三子页面嵌套显示于所述父页面之后,页面处理装置500还可包括:目标页面确定模块以及目标页面销毁模块,其中:
目标页面确定模块,用于根据所述多个子页面的加载时间,在所述多个子页面中,通过所述父页面将加载时间晚于所述第三子页面的子页面确定为目标子页面;
目标页面销毁模块,用于对所述目标子页面进行销毁处理。
在一实施例中,回退消息还包括通知消息,则页面处理装置500还可包括:消息通知模块,用于通过所述父页面将所述通知消息发送至所述第三子页面,以使所述第三子页面执行所述通知消息对应的操作。
本申请实施例中提供了一种电子设备,该电子设备可以运行上述客户端,该电子设备包括:存储器和处理器;至少一个程序,存储于存储器中,用于被处理器执行时,与现有技术相比可实现:通过响应于针对网络应用的打开操作,加载父页面,然后基于网络应用的页面地址,通过父页面获取待加载的第一子页面,最后基于第一嵌套框架加载第一子页面,以使第一子页面嵌套于父页面中进行显示。由此,通过先加载本身不展示内容的父页面,然后通过嵌套框架技术,首次只获取第一子页面,并让第一子页面以嵌套于父页面的方式加载,从而可提供类似单页面网络应用的用户体验,同时由于首次只加载父页面和第一子页面,所需加载的数据量小,不影响首次页面的加载速度。
在一个可选实施例中提供了一种电子设备,可运行上述客户端,如图6所示,图6所示的电子设备600包括:处理器601和存储器603。其中,处理器601和存储器603相连,如通过总线602相连。可选地,电子设备600还可以包括收发器604。需要说明的是,实际应用中收发器604不限于一个,该电子设备600的结构并不构成对本申请实施例的限定。
处理器601可以是CPU(Central Processing Unit,中央处理器),通用处理器,DSP(Digital Signal Processor,数据信号处理器),ASIC(Application SpecificIntegrated Circuit,专用集成电路),FPGA(FieldProgrammable Gate Array,现场可编程门阵列)或者其他可编程逻辑器件、晶体管逻辑器件、硬件部件或者其任意组合。其可以实现或执行结合本申请公开内容所描述的各种示例性的逻辑方框,模块和电路。处理器601也可以是实现计算功能的组合,例如包含一个或多个微处理器组合,DSP和微处理器的组合等。
总线602可包括一通路,在上述组件之间传送信息。总线602可以是PCI(Peripheral Component Interconnect,外设部件互连标准)总线或EISA(ExtendedIndustry Standard Architecture,扩展工业标准结构)总线等。总线602可以分为地址总线、数据总线、控制总线等。为便于表示,在图中仅用一条粗线表示,但并不表示仅有一根总线或一种类型的总线。
存储器603可以是ROM(Read Only Memory,只读存储器)或可存储静态信息和指令的其他类型的静态存储终端,RAM(Random Access Memory,随机存取存储器)或者可存储信息和指令的其他类型的动态存储终端,也可以是EEPROM(Electrically ErasableProgrammable Read Only Memory,电可擦可编程只读存储器)、CD-ROM(Compact DiscReadOnly Memory,只读光盘)或其他光盘存储、光碟存储(包括压缩光碟、激光碟、光碟、数字通用光碟、蓝光光碟等)、磁盘存储介质或者其他磁存储终端、或者能够用于携带或存储具有指令或数据结构形式的期望的程序代码并能够由计算机存取的任何其他介质,但不限于此。
存储器603用于存储执行本申请方案的计算机程序代码,并由处理器601来控制执行。处理器601用于执行存储器603中存储的计算机程序代码,以实现前述方法实施例所示的内容。
其中,电子设备包括但不限于:服务器、台式机、笔记本电脑等。
本申请实施例提供了一种计算机可读存储介质,该计算机可读存储介质上存储有计算机程序,当其在计算机上运行时,使得计算机可以执行前述方法实施例中相应内容。与现有技术相比,本申请实施例通过响应于针对网络应用的打开操作,加载父页面,然后基于网络应用的页面地址,通过父页面获取待加载的第一子页面,最后基于第一嵌套框架加载第一子页面,以使第一子页面嵌套于父页面中进行显示。由此,通过先加载本身不展示内容的父页面,然后通过嵌套框架技术,首次只获取第一子页面,并让第一子页面以嵌套于父页面的方式加载,从而可提供类似单页面网络应用的用户体验,同时由于首次只加载父页面和第一子页面,所需加载的数据量小,不影响首次页面的加载速度。
应该理解的是,虽然附图的流程图中的各个步骤按照箭头的指示依次显示,但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明,这些步骤的执行并没有严格的顺序限制,其可以以其他的顺序执行。而且,附图的流程图中的至少一部分步骤可以包括多个子步骤或者多个阶段,这些子步骤或者阶段并不必然是在同一时刻执行完成,而是可以在不同的时刻执行,其执行顺序也不必然是依次进行,而是可以与其他步骤或者其他步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。
以上所述仅是本发明的部分实施方式,应当指出,对于本技术领域的普通技术人员来说,在不脱离本发明原理的前提下,还可以做出若干改进和润饰,这些改进和润饰也应视为本发明的保护范围。
Claims (11)
1.一种页面处理方法,其特征在于,所述方法包括:
响应于针对网络应用的打开操作,加载父页面;
基于所述网络应用的页面地址,通过所述父页面获取待加载的第一子页面;
基于第一嵌套框架加载所述第一子页面,以使所述第一子页面嵌套于所述父页面中进行显示。
2.根据权利要求1所述的方法,其特征在于,所述方法还包括:
响应于作用在当前子页面的输入操作,通过所述当前子页面向所述父页面发送对应的页面加载消息,所述当前子页面为通过所述父页面在当前时刻所显示的子页面;
根据接收到的所述页面加载消息,通过所述父页面向服务器发送与所述页面加载消息对应的页面加载请求,以使所述服务器针对所述页面加载请求返回第二子页面;
加载所述第二子页面。
3.根据权利要求2所述的方法,其特征在于,所述加载所述第二子页面,包括:
基于所述父页面创建第二嵌套框架;
基于所述第二嵌套框架加载所述第二子页面。
4.根据权利要求2或3所述的方法,其特征在于,所述加载所述第二子页面之后,所述方法还包括:
通过所述父页面对所述第一子页面进行销毁处理。
5.根据权利要求1所述的方法,其特征在于,所述方法还包括:
响应于作用在当前子页面的回退操作,通过所述当前子页面向所述父页面发送对应的回退消息,所述回退消息包括回退页面信息;
根据所述回退页面信息,通过所述父页面确定待回退的第三子页面;
将所述第三子页面嵌套显示于所述父页面。
6.根据权利要求5所述的方法,其特征在于,所述将所述第三子页面嵌套显示于所述父页面,包括:
通过所述父页面在历史加载的多个子页面中查找所述第三子页面;
若查找到,将所述第三子页面嵌套显示于所述父页面。
7.根据权利要求6所述的方法,其特征在于,所述将所述第三子页面嵌套显示于所述父页面之后,所述方法还包括:
根据所述多个子页面的加载时间,在所述多个子页面中,通过所述父页面将加载时间晚于所述第三子页面的子页面确定为目标子页面;
对所述目标子页面进行销毁处理。
8.根据权利要求5所述的方法,其特征在于,所述回退消息还包括通知消息,所述方法还包括:
通过所述父页面将所述通知消息发送至所述第三子页面,以使所述第三子页面执行所述通知消息对应的操作。
9.一种页面处理装置,其特征在于,所述装置包括:
父页面加载模块,用于响应于针对网络应用的打开操作,加载父页面;
子页面获取模块,用于基于所述网络应用的页面地址,通过所述父页面获取待加载的第一子页面;
子页面加载模块,用于基于第一嵌套框架加载所述第一子页面,以使所述第一子页面嵌套于所述父页面中进行显示。
10.一种电子设备,其特征在于,包括:
一个或多个处理器;
存储器;
一个或多个计算机程序,其中,所述一个或多个计算机程序被存储在所述存储器中并被配置为由所述一个或多个处理器执行,所述一个或多个计算机程序配置用于:执行如权利要求1-8中任一项所述的页面处理方法。
11.一种计算机可读存储介质,其特征在于,所述计算机可读存储介质用于存储计算机程序,所述计算机程序被处理器调用执行如权利要求1-8中任一项所述的页面处理方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202011042035.3A CN112182442A (zh) | 2020-09-28 | 2020-09-28 | 页面处理方法、装置、电子设备及计算机可读存储介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202011042035.3A CN112182442A (zh) | 2020-09-28 | 2020-09-28 | 页面处理方法、装置、电子设备及计算机可读存储介质 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN112182442A true CN112182442A (zh) | 2021-01-05 |
Family
ID=73944507
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202011042035.3A Pending CN112182442A (zh) | 2020-09-28 | 2020-09-28 | 页面处理方法、装置、电子设备及计算机可读存储介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN112182442A (zh) |
Cited By (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN113238881A (zh) * | 2021-05-28 | 2021-08-10 | 北京达佳互联信息技术有限公司 | 一种页面通信的方法及装置 |
CN113312119A (zh) * | 2021-06-04 | 2021-08-27 | 广州博冠信息科技有限公司 | 信息同步方法及装置、计算机可读存储介质、电子设备 |
CN113378085A (zh) * | 2021-05-31 | 2021-09-10 | 游艺星际(北京)科技有限公司 | 页面加载方法、装置、终端及存储介质 |
CN114816564A (zh) * | 2022-04-01 | 2022-07-29 | 维沃移动通信有限公司 | 应用加载方法、装置和电子设备 |
Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN103699600A (zh) * | 2013-12-13 | 2014-04-02 | 北京奇虎科技有限公司 | 网页快照的数据处理方法和浏览器 |
US20170083489A1 (en) * | 2009-08-31 | 2017-03-23 | Ebay Inc. | System and method to provide a domain split display |
CN107168980A (zh) * | 2016-03-08 | 2017-09-15 | 阿里巴巴集团控股有限公司 | 页面显示方法及装置 |
CN108459888A (zh) * | 2018-01-08 | 2018-08-28 | 平安科技(深圳)有限公司 | 多页面切换方法、装置、终端设备及存储介质 |
-
2020
- 2020-09-28 CN CN202011042035.3A patent/CN112182442A/zh active Pending
Patent Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20170083489A1 (en) * | 2009-08-31 | 2017-03-23 | Ebay Inc. | System and method to provide a domain split display |
CN103699600A (zh) * | 2013-12-13 | 2014-04-02 | 北京奇虎科技有限公司 | 网页快照的数据处理方法和浏览器 |
CN107168980A (zh) * | 2016-03-08 | 2017-09-15 | 阿里巴巴集团控股有限公司 | 页面显示方法及装置 |
CN108459888A (zh) * | 2018-01-08 | 2018-08-28 | 平安科技(深圳)有限公司 | 多页面切换方法、装置、终端设备及存储介质 |
Cited By (7)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN113238881A (zh) * | 2021-05-28 | 2021-08-10 | 北京达佳互联信息技术有限公司 | 一种页面通信的方法及装置 |
CN113238881B (zh) * | 2021-05-28 | 2024-01-30 | 北京达佳互联信息技术有限公司 | 一种页面通信的方法及装置 |
CN113378085A (zh) * | 2021-05-31 | 2021-09-10 | 游艺星际(北京)科技有限公司 | 页面加载方法、装置、终端及存储介质 |
CN113378085B (zh) * | 2021-05-31 | 2023-11-14 | 游艺星际(北京)科技有限公司 | 页面加载方法、装置、终端及存储介质 |
CN113312119A (zh) * | 2021-06-04 | 2021-08-27 | 广州博冠信息科技有限公司 | 信息同步方法及装置、计算机可读存储介质、电子设备 |
CN113312119B (zh) * | 2021-06-04 | 2024-03-15 | 广州博冠信息科技有限公司 | 信息同步方法及装置、计算机可读存储介质、电子设备 |
CN114816564A (zh) * | 2022-04-01 | 2022-07-29 | 维沃移动通信有限公司 | 应用加载方法、装置和电子设备 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US20190251143A1 (en) | Web page rendering method and related device | |
US11144711B2 (en) | Webpage rendering method, device, electronic apparatus and storage medium | |
CN112182442A (zh) | 页面处理方法、装置、电子设备及计算机可读存储介质 | |
CN107368487B (zh) | 一种页面组件动态布局方法、装置及客户端 | |
CN106294658B (zh) | 网页快速展示方法和装置 | |
US8245125B1 (en) | Hybrid rendering for webpages | |
JP2019032883A (ja) | ウェブアプリケーションを実施する方法、装置、サーバ、及びシステム | |
CN109815430B (zh) | 请求处理方法、装置、数据处理服务器及可读存储介质 | |
US8914813B1 (en) | Interfaces to enable cross-browser extensions and applications thereof | |
US9009740B2 (en) | Invocation of additional processing using remote procedure calls | |
US20180131779A1 (en) | Recording And Triggering Web And Native Mobile Application Events With Mapped Data Fields | |
CN115309470B (zh) | 微件的加载方法、装置、设备以及存储介质 | |
US11930096B2 (en) | Systems and methods for rendering interactive web pages | |
US20140245124A1 (en) | System and method thereof for browser agnostic extension models | |
US20180013607A1 (en) | Component loading based on user interactions | |
CN111431767A (zh) | 多浏览器资源同步方法、装置、计算机设备和存储介质 | |
CN111079048A (zh) | 一种页面加载方法及装置 | |
CN113094612A (zh) | 客户端加载网页的方法、装置、电子设备及介质 | |
CN114647411A (zh) | 编程界面加载方法、装置、电子设备及存储介质 | |
CN110457632B (zh) | 网页加载的处理方法及装置 | |
CN108984247B (zh) | 一种信息展示方法及其终端设备和网络设备 | |
CN112672187A (zh) | 页面生成方法、装置及计算机设备 | |
US20140237133A1 (en) | Page download control method, system and program for ie core browser | |
CN111079050B (zh) | 页面信息获取方法、页面信息获取装置及计算机存储介质 | |
CN117331618A (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 | ||
RJ01 | Rejection of invention patent application after publication |
Application publication date: 20210105 |
|
RJ01 | Rejection of invention patent application after publication |