一种网页页面的同步方法及装置、设备、存储介质制造方法及图纸

本申请实施例公开了一种网页页面的同步方法及装置、设备、存储介质，其中，该方法包括：在主页面上确定至少一个容器元素；获取基于所述主页面的DOM管理而设置的映射关系，所述映射关系用于表征所述主页面的每一容器元素与子页面中一个指定部分的属性之间的对应关系；所述指定部分的属性包括所述指定部分的页面元素和地址；基于所述映射关系中每一所述指定部分的页面元素和地址，将所述指定部分的DOM内容更新到对应的容器元素中；加载所述主页面，以在所述主页面上呈现至少一个子页面的指定部分。

【技术实现步骤摘要】
一种网页页面的同步方法及装置、设备、存储介质
本申请实施例涉及但不限于金融科技(Fintech)的信息技术，尤其涉及一种网页页面的同步方法及装置、设备、存储介质。
技术介绍
随着计算机技术的发展，越来越多的技术应用在金融领域，传统金融业正在逐步向金融科技(Fintech)转变，然而，由于金融行业的安全性、实时性要求，金融科技也对技术提出了更高的要求。然而，金融科技领域下，在网页页面的同步的场景中，需要通过主页面加载时调用子应用提供的加载接口，将子应用提供的内容加载到主页面，目前，需要对子应用进行改造，才能提供一组不带头部、导航等的功能页面，显然，这种加载方式繁琐、不智能。
技术实现思路
有鉴于此，本申请实施例为解决相关技术中存在的上述问题而提供一种网页页面的同步方法及装置、设备、存储介质。本申请实施例的技术方案是这样实现的：一方面，本申请实施例提供一种网页页面的同步方法，所述方法包括：在主页面上确定至少一个容器元素；获取基于所述主页面的DOM管理而设置的映射关系，所述映射关系用于表征所述主页面的每一容器元素与子页面中一个指定部分的属性之间的对应关系；所述指定部分的属性包括所述指定部分的页面元素和地址；基于所述映射关系中每一所述指定部分的页面元素和地址，将所述指定部分的DOM内容更新到对应的容器元素中；加载所述主页面，以在所述主页面上呈现至少一个子页面的指定部分。又一方面，本申请实施例提供一种网页页面的同步装置，所述装置包括：第一确定模块，用于在主页面上确定至少一个容器元素；获取模块，用于获取基于所述主页面的DOM管理而设置的映射关系，所述映射关系用于表征所述主页面的每一容器元素与子页面中一个指定部分的属性之间的对应关系；所述指定部分的属性包括所述指定部分的页面元素和地址；第一更新模块，用于基于所述映射关系中每一所述指定部分的页面元素和地址，将所述指定部分的DOM内容更新到对应的容器元素中；第一加载模块，用于加载所述主页面，以在所述主页面上呈现至少一个子页面的指定部分。再一方面，本申请实施例提供一种计算机设备，包括存储器和处理器，所述存储器存储有可在处理器上运行的计算机程序，所述处理器执行所述程序时实现上述方法中的步骤。还一方面，本申请实施例提供一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现上述方法中的步骤。本申请实施例提供的网页页面的同步方法，在主页面上确定至少一个容器元素，获取基于所述主页面的DOM管理而设置的映射关系，所述映射关系用于表征所述主页面的每一容器元素与子页面中一个指定部分的属性之间的对应关系；所述指定部分的属性包括所述指定部分的页面元素和地址；基于所述映射关系中每一所述指定部分的页面元素和地址，将所述指定部分的DOM内容更新到对应的容器元素中；加载所述主页面，以在所述主页面上呈现至少一个子页面的指定部分。这样，可以通过主页面上的容器元素确定出子页面中指定部分的页面元素和地址，将多个子应用页面的指定部分集成到主页面的指定位置处，能够将多个可独立开发和运行的子应用系统的前端页面整合到同一个主页面，避免了在整合过程中对子应用进行改造，更加便捷智能。附图说明图1为本申请实施例网页页面的同步方法的实现流程示意图；图2为本申请实施例网页页面的同步方法的实现流程示意图；图3A为本申请实施例网页页面的同步方法的实现流程示意图；图3B为本申请实施例网页页面的同步方法的实现流程示意图；图3C为本申请实施例网页页面的同步方法的实现流程示意图；图4A为本申请实施例的场景示意图；图4B为本申请实施例提供的一种网页页面的同步方法的DOM实现流程示意图；图4C为本申请实施例提供的一种网页页面的同步方法的CSS实现流程示意图；图4D为本申请实施例提供的一种网页页面的同步方法的事件管理实现流程示意图；图5为本申请实施例网页页面的同步装置的组成结构示意图；图6为本申请实施例中计算机设备的一种硬件实体示意图。具体实施方式为了使本申请的目的、技术方案和优点更加清楚，下面结合附图和实施例对本申请的技术方案进一步详细阐述，所描述的实施例不应视为对本申请的限制，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例，都属于本申请保护的范围。在以下的描述中，涉及到“一些实施例”，其描述了所有可能实施例的子集，但是可以理解，“一些实施例”可以是所有可能实施例的相同子集或不同子集，并且可以在不冲突的情况下相互结合。如果申请文件中出现“第一/第二”的类似描述则增加以下的说明，在以下的描述中，所涉及的术语“第一\第二\第三”仅仅是区别类似的对象，不代表针对对象的特定排序，可以理解地，“第一\第二\第三”在允许的情况下可以互换特定的顺序或先后次序，以使这里描述的本申请实施例能够以除了在这里图示或描述的以外的顺序实施。除非另有定义，本文所使用的所有的技术和科学术语与属于本申请的
的技术人员通常理解的含义相同。本文中所使用的术语只是为了描述本申请实施例的目的，不是旨在限制本申请。下面结合附图和实施例对本申请的技术方案进一步详细阐述。本申请实施例提供一种网页页面的同步方法，图1为本申请实施例网页页面的同步方法的实现流程示意图，如图1所示，该方法包括：步骤S101，在主页面上确定至少一个容器元素；在一些实施例中，可以应用在微前端的场景中，也可以应用在其他具有页面的场景中。在微前端的场景中，所述主页面可以为一个不包括其他应用的主应用页面，所述主应用页面中可以包括至少一个子应用的页面。在实施过程中，所述主应用页面可以完整的嵌套子应用的页面，也可以嵌套子应用页面中的部分内容。这里，所述容器元素代表一块区域，内部用于放置其他元素。例如，div元素，或者，span元素。在实施过程中，可以在所述容器元素中添加除主页面以外的其他子页面的页面元素。在一些实施例中，每一所述容器元素可以对应主页面上的一个区域。举例说明，如图4A所示，主页面中表单部分、曲线图部分和树结构图部分分别对应页面上的一个区域，每一区域都有一个容器元素。主页面中表单部分对应容器元素1；曲线图部分对应容器元素2；树结构图部分对应容器元素3。步骤S102，获取基于所述主页面的DOM管理而设置的映射关系，所述映射关系用于表征所述主页面的每一容器元素与子页面中一个指定部分的属性之间的对应关系；所述指定部分的属性包括所述指定部分的页面元素和地址；举例说明，所述主页面的容器元素与子页面的页面元素和地址之间的映射关系可以为：主页面的容器元素:{url:子应用页面地址，ele:子应用页面元素}。这里，所述DOM(DocumentObjectModel)为文档对象模型，是HTML和XML文档的编程接口。HTMLDOM定义了访问和操作H本文档来自技高网...

【技术保护点】
1.一种网页页面的同步方法，其特征在于，所述方法包括：/n在主页面上确定至少一个容器元素；/n获取基于所述主页面的DOM管理而设置的映射关系，所述映射关系用于表征所述主页面的每一容器元素与子页面中一个指定部分的属性之间的对应关系；所述指定部分的属性包括所述指定部分的页面元素和地址；/n基于所述映射关系中每一所述指定部分的页面元素和地址，将所述指定部分的DOM内容更新到对应的容器元素中；/n加载所述主页面，以在所述主页面上呈现至少一个子页面的指定部分。/n

【技术特征摘要】
1.一种网页页面的同步方法，其特征在于，所述方法包括：
在主页面上确定至少一个容器元素；
获取基于所述主页面的DOM管理而设置的映射关系，所述映射关系用于表征所述主页面的每一容器元素与子页面中一个指定部分的属性之间的对应关系；所述指定部分的属性包括所述指定部分的页面元素和地址；
基于所述映射关系中每一所述指定部分的页面元素和地址，将所述指定部分的DOM内容更新到对应的容器元素中；
加载所述主页面，以在所述主页面上呈现至少一个子页面的指定部分。


2.根据权利要求1所述的方法，其特征在于，所述主页面为微前端的主应用页面，所述子页面为所述微前端的子应用页面，至少两个所述指定部分位于相同的或不同的所述子页面上。


3.根据权利要求1所述的方法，其特征在于，所述方法还包括：
在所述主页面上为每一所述指定部分添加iframe元素；
基于所述映射关系中，每一所述指定部分的页面元素和地址配置所述iframe元素；
所述加载所述主页面，包括加载所述主页面中的每一所述iframe元素。


4.根据权利要求1所述的方法，其特征在于，所述基于所述映射关系中每一所述指定部分的页面元素和地址，将所述指定部分的DOM内容更新到对应的容器元素中，包括：
在首次或每次加载所述主页面的情况下，基于所述映射关系中每一所述指定部分的页面元素和地址，将所述指定部分的DOM内容全部复制到对应的容器元素中；
在除所述首次之后的其他加载所述主页面的情况下，基于所述映射关系中每一所述指定部分的页面元素和地址，将所述指定部分的DOM内容的增量部分更新到对应的容器元素中。


5.根据权利要求4所述的方法，其特征在于，所述基于所述映射关系中每一所述指定部分的页面元素和地址，将所述指定部分的DOM内容的增量部分更新到对应的容器元素中，包括：
基于所述映射关系中每一所述指定部分的页面元素和地址，监听每一所述指定部分的页面元素和属性的变化；
将每一所述指定部分的DOM内容的变化，与所述主页面上对应容器元素内的内容进行比较，得到所述DOM内容的增量部分；
将所述DOM内容的增量部分更新到所述主页面的容器元素中。


6.根据权利要求5所述的方法，其特征在于，所述方法还包括：
在每一所述指定部分的DOM内容同步的时候，检查是否有新的style标签或者style标签的内容有更改，得到CSS内容的增量部分；
将所述CSS内容的增量部分更新到所述主页面的容器元素中。


7.根据权利要求6所述的方法，其特征在于，在将所述CSS内容的增量部分更新到所述主页面的容器元...

【专利技术属性】
技术研发人员：张勇，林佳宇，朱红燕，莫林林，
申请(专利权)人：深圳前海微众银行股份有限公司，
类型：发明
国别省市：广东;44