CN112597412A - 一种页面加载方法及装置 - Google Patents

Abstract

本申请公开了一种页面加载方法，当用户在门户页面触发请求访问第一业务的第一操作时，终端设备响应于所述第一操作，获取所述第一业务对应的软件程序以及程序隔离器。其中，所述第一业务对应的软件程序，以超文本标记语言HTML页面中的div元素作为应用容器。当用户请求访问所述第一业务时，所述终端设备获取的所述第一业务对应的软件程序是以div元素作为应用容器的、只是含有所述第一业务、不包括所述门户页面对应的软件程序。所述终端设备在获取所述第一业务对应的软件程序以及所述程序隔离器后，根据获取到的所述软件程序以及所述程序隔离器，在门户页面上显示所述第一业务对应的第一页面。

Description

一种页面加载方法及装置

技术领域

本申请涉及超文本标记语言(Hyper Text Markup Language，HTML)技术领域，特别是涉及一种页面加载方法及装置。

背景技术

当前，在一个浏览器页面的前端架构中，通常会设置一个统一的门户页面，通过这一个统一的门户页面，用户可以访问其他子页面。门户页面是一种提供软件程序和信息单点访问的Web站点，它对提供给用户的复杂多样的信息和服务进行提炼，简化为一个满足用户需求和利益的单一界面，是用于集成其他子应用、内容和流程的用户界面架构。针对门户页面和其他子页面显示在同一个浏览器页面的情况，开发者通常会将门户页面和其他子页面的软件程序在同一个工程中集中开发、测试、部署，这种设置通常会使得产品发布流程繁琐，造成系统不稳定等问题。

为避免将门户页面和其他子页面的软件程序写在同一个工程中，开发者采用HTML页面中的iFrame元素作为应用容器，将各个子页面的软件程序写入iFrame容器中，使得各个子页面的软件程序与门户页面对应的软件程序相互隔离。但是，根据iFrame容器的规则，写入iFrame容器的是某一HTML页面的完整的软件程序，即，在一个iFrame容器中，除包含某一子页面的软件程序外，还会存在门户页面对应的软件程序，这就使得门户页面对应的软件程序重复出现在各个iFrame容器中，造成软件程序臃肿，从而占用更大内存与带宽，影响前端应用的运行性能。

因此，急需一种方案，可以解决上述问题。

发明内容

本申请所要解决的技术问题是，提供一种页面加载方法，以解决采用HTML页面中的iFrame元素作为应用容器，将HTML页面的完整的软件程序写入iFrame容器中时带来的，软件程序臃肿，内存及带宽占用过大，前端应用运行性能不好的问题。

第一方面，本申请实施例提供了一种页面加载方法，所述方法包括：

响应于用户在门户页面触发的第一操作，获取第一业务对应的软件程序以及程序隔离器，所述第一操作用于请求访问所述第一业务；

根据获取到的所述软件程序和所述程序隔离器，在所述门户页面上显示所述第一业务对应的第一页面；其中：

所述第一业务对应的软件程序，以超文本标记语言HTML页面中的div元素作为应用容器，所述程序隔离器用于隔离所述第一业务对应的软件程序和所述门户页面对应的软件程序。

可选的，所述程序隔离器包括：

脚本隔离器，和/或，样式隔离器；其中：

所述脚本隔离器用于隔离由JavaScript编写的软件程序，所述样式隔离器用于隔离由层叠样式表CSS编写的软件程序。

可选的，所述脚本隔离器包括全局变量代理，所述全局变量代理用于获取对所述全局变量的修改操作，并根据所述修改操作对所述全局变量的备份变量进行修改，修改后的所述备份变量的值用于加载所述第一页面；其中：

所述全局变量为加载所述门户页面和所述第一页面均需设置的变量。

可选的，所述脚本隔离器包括全局变量快照，在所述门户页面上显示所述第一业务对应的第一页面，包括：

对所述门户页面对应的软件程序中的全局变量的值进行修改，以在所述门户页面上显示所述第一业务对应的第一页面；

所述方法还包括：

在退出所述第一页面之后，利用所述全局变量快照对所述门户页面对应的软件程序中的所述全局变量的值进行恢复，恢复后的所述全局变量的值等于所述全局变量快照；

其中：

所述全局变量为加载所述门户页面和所述第一页面均需设置的变量。

可选的，所述样式隔离器使用影子文档结构模型DOM作为子应用容器。

第二方面，本申请实施例提供了一种页面加载装置，所述装置包括：

获取模块，用于：响应于用户在门户页面触发的第一操作，获取第一业务对应的软件程序以及程序隔离器，所述第一操作用于请求访问所述第一业务；

显示模块，用于：根据获取到的所述软件程序和所述程序隔离器，在所述门户页面上显示所述第一业务对应的第一页面；

其中：

所述第一业务对应的软件程序，以超文本标记语言HTML页面中的div元素作为应用容器，所述程序隔离器用于隔离所述第一业务对应的软件程序和所述门户页面对应的软件程序。

可选的，所述程序隔离器包括：

脚本隔离器，和/或，样式隔离器；其中：

所述脚本隔离器用于隔离由JavaScript编写的软件程序，所述样式隔离器用于隔离由层叠样式表CSS编写的软件程序。

可选的，所述脚本隔离器包括全局变量代理，所述全局变量代理用于获取对所述全局变量的修改操作，并根据所述修改操作对所述全局变量的备份变量进行修改，修改后的所述备份变量的值用于加载所述第一页面；其中：

所述全局变量为加载所述门户页面和所述第一页面均需设置的变量。

可选的，所述脚本隔离器包括全局变量快照，所述显示模块，用于：

对所述门户页面对应的软件程序中的全局变量的值进行修改，以在所述门户页面上显示所述第一业务对应的第一页面；

所述装置还包括：

恢复模块，用于：在退出所述第一页面之后，利用所述全局变量快照对所述门户页面对应的软件程序中的所述全局变量的值进行恢复，恢复后的所述全局变量的值等于所述全局变量快照；

其中：

所述全局变量为加载所述门户页面和所述第一页面均需设置的变量。

可选的，所述样式隔离器使用影子文档结构模型DOM作为子应用容器。

与现有技术相比，本申请实施例具有以下优点：

本申请实施例提供了一种页面加载方法，当用户在门户页面触发请求访问第一业务的第一操作时，终端设备响应于所述第一操作，获取所述第一业务对应的软件程序以及程序隔离器。其中，所述第一业务对应的软件程序，以HTML页面中的div元素作为应用容器。根据div容器的规则，写入div容器的可以是某一子应用的软件程序，因此，在将HTML页面的子应用的软件程序写入div容器时，可以只将所述HTML页面的某一子应用的软件程序写入所述div容器，而不将所述HTML页面的门户页面对应的软件程序写入所述div容器。换言之，当用户请求访问所述第一业务时，所述终端设备获取的所述第一业务对应的软件程序是以div元素作为应用容器的、只是含有所述第一业务、不包括所述门户页面对应的软件程序。为了避免所述第一业务对应的软件程序污染所述门户页面对应的软件程序，可以采用所述程序隔离器来隔离所述第一业务对应的软件程序和所述门户页面对应的软件程序。所述终端设备在获取所述第一业务对应的软件程序以及所述程序隔离器后，根据获取到的所述软件程序以及所述程序隔离器，在门户页面上显示所述第一业务对应的第一页面。由此可见，通过采用HTML页面中的div元素作为应用容器，只将所述HTML页面的某一子应用的软件程序写入所述div容器，而不将所述HTML页面的门户页面对应的软件程序写入所述div容器，同时采用程序隔离器防止所述第一业务对应的软件程序污染所述门户页面对应的软件程序，可以解决采用HTML页面中的iFrame元素作为应用容器时，将HTML页面的完整的软件程序写入iFrame容器中带来的，软件程序臃肿，内存及带宽占用过大，前端应用运行性能不好的问题。

附图说明

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

图1为本申请实施例中一种页面加载方法的流程示意图；

图2为本申请实施例中一种页面加载装置的结构示意图。

具体实施方式

为了使本技术领域的人员更好地理解本申请方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

本申请的发明人经过研究发现，当前，为避免将门户页面和其他子页面的软件程序写在同一个工程中，开发者通常采用HTML页面中的iFrame元素作为应用容器，将各个子页面的软件程序写入iFrame容器中，使得各个子页面的软件程序与门户页面对应的软件程序相互隔离。但是，根据iFrame容器的规则，写入iFrame容器的是某一HTML页面的完整的软件程序，即，在一个iFrame容器中，除包含某一子页面的软件程序外，还会存在门户页面对应的软件程序，这就使得门户页面对应的软件程序重复出现在各个iFrame容器中，造成软件程序臃肿，从而占用更大内存与带宽，影响前端应用的运行性能。

为了解决上述问题，在本申请实施例中，当用户在门户页面触发请求访问第一业务的第一操作时，终端设备响应于所述第一操作，获取所述第一业务对应的软件程序以及程序隔离器。其中，所述第一业务对应的软件程序，以HTML页面中的div元素作为应用容器。根据div容器的规则，写入div容器的可以是某一子应用的软件程序，因此，在将HTML页面的子应用的软件程序写入div容器时，可以只将所述HTML页面的某一子应用的软件程序写入所述div容器，而不将所述HTML页面的门户页面对应的软件程序写入所述div容器。换言之，当用户请求访问所述第一业务时，所述终端设备获取的所述第一业务对应的软件程序是以div元素作为应用容器的、只是含有所述第一业务、不包括所述门户页面对应的软件程序。为了避免所述第一业务对应的软件程序污染所述门户页面对应的软件程序，可以采用所述程序隔离器来隔离所述第一业务对应的软件程序和所述门户页面对应的软件程序。所述终端设备在获取所述第一业务对应的软件程序以及所述程序隔离器后，根据获取到的所述软件程序以及所述程序隔离器，在门户页面上显示所述第一业务对应的第一页面。由此可见，通过采用HTML页面中的div元素作为应用容器，只将所述HTML页面的某一子应用的软件程序写入所述div容器，而不将所述HTML页面的门户页面对应的软件程序写入所述div容器，同时采用程序隔离器防止所述第一业务对应的软件程序污染所述门户页面对应的软件程序，可以解决采用HTML页面中的iFrame元素作为应用容器时，将HTML页面的完整的软件程序写入iFrame容器中带来的，软件程序臃肿，内存及带宽占用过大，前端应用运行性能不好的问题。

下面结合附图，详细说明本申请的各种非限制性实施方式。

示例性方法

参见图1，示出了本申请实施例中一种页面加载方法的流程示意图。图1所示的方法，在一种实现方式中，可以由终端设备执行。

在本实施例中，图1所示的方法例如可以通过以下步骤S101-S102实现。

S101：响应于用户在门户页面触发的第一操作，获取第一业务对应的软件程序以及程序隔离器，所述第一操作用于请求访问所述第一业务；其中，所述第一业务对应的软件程序，以HTML页面中的div元素作为应用容器，所述程序隔离器用于隔离所述第一业务对应的软件程序和所述门户页面对应的软件程序。

在本实施例中，当用户在门户页面触发请求访问第一业务的第一操作时，终端设备响应于所述第一操作，获取所述第一业务对应的软件程序以及程序隔离器。其中，所述第一业务对应的软件程序，以HTML页面中的div元素作为应用容器。

可以理解的是，根据div容器的规则，写入div容器的可以是某一子应用的软件程序，因此，在将HTML页面的子应用的软件程序写入div容器时，可以只将所述HTML页面的某一子应用的软件程序写入所述div容器，而不将所述HTML页面的门户页面对应的软件程序写入所述div容器。换言之，当用户请求访问所述第一业务时，所述终端设备获取的所述第一业务对应的软件程序是以div元素作为应用容器的、只是含有所述第一业务、不包括所述门户页面对应的软件程序。

为了避免所述第一业务对应的软件程序污染所述门户页面对应的软件程序，可以采用所述程序隔离器来隔离所述第一业务对应的软件程序和所述门户页面对应的软件程序。在一个示例中，所述程序隔离器包括脚本隔离器，和/或，样式隔离器。所述脚本隔离器用于隔离由JavaScript(通常缩写为JS)编写的软件程序，所述样式隔离器用于隔离由层叠样式表(Cascading Style Sheets，CSS)编写的软件程序。

通过采用HTML页面中的div元素作为应用容器，只将所述HTML页面的某一子应用的软件程序写入所述div容器，而不将所述HTML页面的门户页面对应的软件程序写入所述div容器，同时采用程序隔离器防止所述第一业务对应的软件程序污染所述门户页面对应的软件程序，可以解决采用HTML页面中的iFrame元素作为应用容器时，将HTML页面的完整的软件程序写入iFrame容器中带来的，软件程序臃肿，内存及带宽占用过大，前端应用运行性能不好的问题。

在采用所述程序隔离器来隔离所述第一业务对应的软件程序和所述门户页面对应的软件程序时，可以理解的是，对于所述门户页面对应的软件程序中的全局变量，所述第一业务对应的软件程序也需要设置。其中，所述全局变量为加载所述门户页面和所述第一页面均需设置的变量。例如，假设在所述门户页面对应的软件程序中，设置了“字体颜色”这一全局变量为“a”，所述第一业务可能也会设置“字体颜色”这一变量的具体值。由于所述第一业务对应的软件程序中，不包括所述门户页面对应的软件程序，也就不包括所述门户页面对应的软件程序中的变量，例如“字体颜色”这一变量“a”。当所述第一业务对应的软件程序需要使用变量“a”时，可以设置变量“a”与所述门户页面对应的软件程序中的变量“a”相同，也可以设置变量“a”与所述门户页面对应的软件程序中的变量“a”不同。为了使得所述第一业务对应的软件程序中使用的全局变量，例如变量“a”，不会影响所述门户页面对应的软件程序中设置的变量“a”，当所述程序隔离器为所述脚本隔离器时，可以设置所述脚本隔离器包括全局变量代理或全局变量快照；当所述程序隔离器为所述样式隔离器时，可以设置所述样式隔离器使用影子文档结构模型(Shadow Document Object Model，shadow-dom)作为子应用容器。

当所述程序隔离器为所述脚本隔离器，所述脚本隔离器包括所述全局变量代理时，所述全局变量代理用于获取对所述全局变量的修改操作，并根据所述修改操作对所述全局变量的备份变量进行修改，修改后的所述备份变量的值用于加载所述第一页面。例如，设置“字体颜色”为全局变量“a”，变量“a”在所述门户页面对应的软件程序中的值为“红色”。若想要将所述第一页面的字体颜色设置为黄色，此时，所述第一业务对应的软件程序调用所述变量“a”，并将所述变量“a”的值修改为“黄色”，为避免将所述门户应用对应的软件程序中的变量“a”修改为黄色，可以通过所述全局变量代理获取对所述变量“a”的修改操作，即获取“将红色修改为黄色”这一修改操作，根据所述修改操作对所述变量“a”的备份变量进行修改，修改后的所述变量“a”的备份变量的值为“黄色”，所述变量“a”的备份变量的值用于加载所述第一页面，使得所述第一页面的字体颜色显示为黄色。

当所述程序隔离器为所述脚本隔离器，所述脚本隔离器包括所述全局变量快照时，可以对所述门户页面对应的软件程序中的全局变量的值进行修改，进而在所述门户页面上显示所述第一业务对应的第一页面。在退出所述第一页面之后，利用所述全局变量快照对所述门户页面对应的软件程序中的所述全局变量的值进行恢复，恢复后的所述全局变量的值等于所述全局变量快照。换言之，在对所述门户页面对应的软件程序中的全局变量的值进行修改前，所述全局变量快照保存了当前门户页面对应的软件程序中的所述全局变量的值，因此，可以直接对所述门户页面对应的软件程序中的全局变量的值进行修改，进而在所述门户页面上显示所述第一业务对应的第一页面。在退出所述第一页面之后，利用所述全局变量快照对所述门户页面对应的软件程序中的所述全局变量的值进行恢复，从而使恢复后的所述全局变量的值等于所述全局变量快照。通过这一方法，不会影响所述门户页面对应的软件程序中设置的全局变量的具体值。

当所述程序隔离器为所述样式隔离器，所述样式隔离器使用shadow-dom作为子应用容器时，所述样式隔离器实现隔离所述第一业务对应的软件程序和所述门户页面对应的软件程序的步骤如下：首先，所述样式隔离器生成一个shadow-dom元素，在其中添加所述第一业务的动态脚本和样式资源，之后，在所述样式隔离器中加载所述第一业务的样式。在所述第一业务即将被销毁时，所述样式隔离器销毁其中的shadow-dom元素。

S102：根据获取到的所述软件程序和所述程序隔离器，在所述门户页面上显示所述第一业务对应的第一页面。

在本实施例中，所述终端设备在获取所述第一业务对应的软件程序以及所述程序隔离器后，根据获取到的所述软件程序以及所述程序隔离器，在门户页面上显示所述第一业务对应的第一页面。

示例性设备

基于以上实施例提供的方法，本申请实施例还提供了一种装置，以下结合附图介绍该装置。

参见图2，示出了本申请实施例中一种页面加载装置的结构示意图。应用于终端设备，所述装置例如可以具体包括：

获取模块201：用于响应于用户在门户页面触发的第一操作，获取第一业务对应的软件程序以及程序隔离器，所述第一操作用于请求访问所述第一业务；

其中：

所述第一业务对应的软件程序，以超文本标记语言HTML页面中的div元素作为应用容器，所述程序隔离器用于隔离所述第一业务对应的软件程序和所述门户页面对应的软件程序；

显示模块202：用于根据获取到的所述软件程序和所述程序隔离器，在所述门户页面上显示所述第一业务对应的第一页面；

通过这一装置，可以解决采用HTML页面中的iFrame元素作为应用容器时，将HTML页面的完整的软件程序写入iFrame容器中带来的，软件程序臃肿，内存及带宽占用过大，前端应用运行性能不好的问题。

在一种实现方式中，所述程序隔离器包括：

脚本隔离器，和/或，样式隔离器；其中：

所述脚本隔离器用于隔离由JavaScript编写的软件程序，所述样式隔离器用于隔离由层叠样式表CSS编写的软件程序。

在一种实现方式中，所述脚本隔离器包括全局变量代理，所述全局变量代理用于获取对所述全局变量的修改操作，并根据所述修改操作对所述全局变量的备份变量进行修改，修改后的所述备份变量的值用于加载所述第一页面；其中：

所述全局变量为加载所述门户页面和所述第一页面均需设置的变量。

在一种实现方式中，所述脚本隔离器包括全局变量快照，所述显示模块，用于：

对所述门户页面对应的软件程序中的全局变量的值进行修改，以在所述门户页面上显示所述第一业务对应的第一页面；

所述装置还包括：

恢复模块，用于：在退出所述第一页面之后，利用所述全局变量快照对所述门户页面对应的软件程序中的所述全局变量的值进行恢复，恢复后的所述全局变量的值等于所述全局变量快照；

其中：

所述全局变量为加载所述门户页面和所述第一页面均需设置的变量。

在一种实现方式中，所述样式隔离器使用影子文档结构模型DOM作为子应用容器。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本申请的其它实施方案。本申请旨在涵盖本申请的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本申请的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本申请的真正范围和精神由下面的权利要求指出。

应当理解的是，本申请并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本申请的范围仅由所附的权利要求来限制

以上所述仅为本申请的较佳实施例，并不用以限制本申请，凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。

Claims (10)

1.一种页面加载方法，其特征在于，所述方法包括：

响应于用户在门户页面触发的第一操作，获取第一业务对应的软件程序以及程序隔离器，所述第一操作用于请求访问所述第一业务；

根据获取到的所述软件程序和所述程序隔离器，在所述门户页面上显示所述第一业务对应的第一页面；其中：

所述第一业务对应的软件程序，以超文本标记语言HTML页面中的div元素作为应用容器，所述程序隔离器用于隔离所述第一业务对应的软件程序和所述门户页面对应的软件程序。

2.根据权利要求1所述的方法，其特征在于，所述程序隔离器包括：

脚本隔离器，和/或，样式隔离器；其中：

所述脚本隔离器用于隔离由JavaScript编写的软件程序，所述样式隔离器用于隔离由层叠样式表CSS编写的软件程序。

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

所述脚本隔离器包括全局变量代理，所述全局变量代理用于获取对所述全局变量的修改操作，并根据所述修改操作对所述全局变量的备份变量进行修改，修改后的所述备份变量的值用于加载所述第一页面；其中：

所述全局变量为加载所述门户页面和所述第一页面均需设置的变量。

4.根据权利要求2所述的方法，其特征在于，所述脚本隔离器包括全局变量快照，在所述门户页面上显示所述第一业务对应的第一页面，包括：

对所述门户页面对应的软件程序中的全局变量的值进行修改，以在所述门户页面上显示所述第一业务对应的第一页面；

所述方法还包括：

在退出所述第一页面之后，利用所述全局变量快照对所述门户页面对应的软件程序中的所述全局变量的值进行恢复，恢复后的所述全局变量的值等于所述全局变量快照；

其中：

所述全局变量为加载所述门户页面和所述第一页面均需设置的变量。

5.根据权利要求2所述的方法，其特征在于，所述样式隔离器使用影子文档结构模型DOM作为子应用容器。

6.一种页面加载装置，其特征在于，所述装置包括：

获取模块，用于：响应于用户在门户页面触发的第一操作，获取第一业务对应的软件程序以及程序隔离器，所述第一操作用于请求访问所述第一业务；

显示模块，用于：根据获取到的所述软件程序和所述程序隔离器，在所述门户页面上显示所述第一业务对应的第一页面；

其中：

所述第一业务对应的软件程序，以超文本标记语言HTML页面中的div元素作为应用容器，所述程序隔离器用于隔离所述第一业务对应的软件程序和所述门户页面对应的软件程序。

7.根据权利要求6所述的装置，其特征在于，所述程序隔离器包括：

脚本隔离器，和/或，样式隔离器；其中：

所述脚本隔离器用于隔离由JavaScript编写的软件程序，所述样式隔离器用于隔离由层叠样式表CSS编写的软件程序。

8.根据权利要求7所述的装置，其特征在于，

所述脚本隔离器包括全局变量代理，所述全局变量代理用于获取对所述全局变量的修改操作，并根据所述修改操作对所述全局变量的备份变量进行修改，修改后的所述备份变量的值用于加载所述第一页面；其中：

所述全局变量为加载所述门户页面和所述第一页面均需设置的变量。

9.根据权利要求7所述的装置，其特征在于，所述脚本隔离器包括全局变量快照，所述显示模块，用于：

对所述门户页面对应的软件程序中的全局变量的值进行修改，以在所述门户页面上显示所述第一业务对应的第一页面；

所述装置还包括：

恢复模块，用于：在退出所述第一页面之后，利用所述全局变量快照对所述门户页面对应的软件程序中的所述全局变量的值进行恢复，恢复后的所述全局变量的值等于所述全局变量快照；

其中：

所述全局变量为加载所述门户页面和所述第一页面均需设置的变量。

10.根据权利要求7所述的装置，其特征在于，所述样式隔离器使用影子文档结构模型DOM作为子应用容器。

Images