WO2022127449A1 - 一种网页页面的同步方法及装置、设备、存储介质 - Google Patents

一种网页页面的同步方法及装置、设备、存储介质 Download PDF

Info

Publication number
WO2022127449A1
WO2022127449A1 PCT/CN2021/129637 CN2021129637W WO2022127449A1 WO 2022127449 A1 WO2022127449 A1 WO 2022127449A1 CN 2021129637 W CN2021129637 W CN 2021129637W WO 2022127449 A1 WO2022127449 A1 WO 2022127449A1
Authority
WO
WIPO (PCT)
Prior art keywords
page
sub
main
specified
content
Prior art date
Application number
PCT/CN2021/129637
Other languages
English (en)
French (fr)
Inventor
张勇
林佳宇
朱红燕
莫林林
Original Assignee
深圳前海微众银行股份有限公司
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by 深圳前海微众银行股份有限公司 filed Critical 深圳前海微众银行股份有限公司
Publication of WO2022127449A1 publication Critical patent/WO2022127449A1/zh

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/20—Software design
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
    • G06F16/23—Updating
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
    • G06F16/27—Replication, distribution or synchronisation of data between databases or within a distributed database system; Distributed database system architectures therefor
    • 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]
    • G06F16/9566—URL specific, e.g. using aliases, detecting broken or misspelled links
    • 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/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G06F16/986—Document structures and storage, e.g. HTML extensions
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/12—Use of codes for handling textual entities
    • G06F40/14—Tree-structured documents

Abstract

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

Description

一种网页页面的同步方法及装置、设备、存储介质
相关申请的交叉引用
本发明基于申请号为202011497200.4、申请日为2020年12月17日的中国专利申请提出，并要求该中国专利申请的优先权，该中国专利申请的全部内容在此以引入方式并入本发明。
技术领域
本申请实施例涉及但不限于金融科技(Fintech)的信息技术，尤其涉及一种网页页面的同步方法及装置、设备、存储介质。
背景技术
随着计算机技术的发展，越来越多的技术应用在金融领域，传统金融业正在逐步向金融科技(Fintech)转变，然而，由于金融行业的安全性、实时性要求，金融科技也对技术提出了更高的要求。然而，金融科技领域下，在网页页面的同步的场景中，需要通过主页面加载时调用子应用提供的加载接口，将子应用提供的内容加载到主页面，目前，需要对子应用进行改造，才能提供一组不带头部、导航等的功能页面，显然，这种加载方式繁琐、不智能。
发明内容
有鉴于此，本申请实施例为解决相关技术中存在的上述问题而提供一种网页页面的同步方法及装置、设备、存储介质。
本申请实施例的技术方案是这样实现的：
一方面，本申请实施例提供一种网页页面的同步方法，所述方法包括：
在主页面上确定至少一个容器元素；
获取基于所述主页面的DOM管理而设置的映射关系，所述映射关系用于表征所述主页面的每一容器元素与子页面中一个指定部分的属性之间的对应关系；所述指定部分的属性包括所述指定部分的页面元素和地址；
基于所述映射关系中每一所述指定部分的页面元素和地址，将所述指定部分的DOM内容更新到对应的容器元素中；
加载所述主页面，以在所述主页面上呈现至少一个子页面的指定部分。
又一方面，本申请实施例提供一种网页页面的同步装置，所述装置包括：
第一确定模块，配置为在主页面上确定至少一个容器元素；
获取模块，配置为获取基于所述主页面的DOM管理而设置的映射关系，所述映射关系用于表征所述主页面的每一容器元素与子页面中一个指定部分的属性之间的对应关系；所述指定部分的属性包括所述指定部分的页面元素和地址；
第一更新模块，配置为基于所述映射关系中每一所述指定部分的页面元素和地址，将所述指定部分的DOM内容更新到对应的容器元素中；
第一加载模块，配置为加载所述主页面，以在所述主页面上呈现至少一个子页面的指定部分。
再一方面，本申请实施例提供一种计算机设备，包括存储器和处理器，所述存储器 存储有可在处理器上运行的计算机程序，所述处理器执行所述程序时实现上述方法中的步骤。
还一方面，本申请实施例提供一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现上述方法中的步骤。
本申请实施例提供的网页页面的同步方法，在主页面上确定至少一个容器元素，获取基于所述主页面的文档对象模型(Document Object Model，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为文档对象模型，是超文本标记语言(Hyper Text Markup Language)，HTML和XML文档的编程接口。HTML DOM定义了访问和操作HTML文档的标准方法。DOM以树结构表达HTML文档。
这里，所述指定部分为子页面中需要显示在主页面中的内容。例如，如图4A所示需要将子应用页面A中表单部分、子应用页面B中曲线图部分和子应用页面C中树结构图部分集成到主页面，对于子应用页面A而言，所述指定部分为表单部分；对于子应用页面B而言，所述指定部分为曲线图部分；对于子应用页面C而言，所述指定部分为树结构图部分。
在实施过程中，通过映射关系可以确定每一容器元素与子页面中一个指定部分的属性之间的对应关系，所述指定部分的属性包括所述指定部分的页面元素和地址。举例说明，如图4A所示，通过映射关系可以确定容器元素1对应的子应用页面A中表单部分的页面元素和地址；通过映射关系可以确定容器元素2对应的子应用页面B中曲线图部分的页面元素和地址；通过映射关系可以确定容器元素3对应的子应用页面C中树结构图部分的页面元素和地址。
步骤S103，基于所述映射关系中每一所述指定部分的页面元素和地址，将所述指定部分的DOM内容更新到对应的容器元素中；
举例说明，如图4A所示，通过映射关系可以确定主页面中表单部分、曲线图部分和树结构图部分的页面元素和地址，根据所示页面元素和地址将表单部分、曲线图部分和树结构图部分的DOM内容更新到主页面的容器元素中。
步骤S104，加载所述主页面，以在所述主页面上呈现至少一个子页面的指定部分。
在实施过程中，在加载所述主页面的情况下，根据所示主页面的容器元素中配置的页面元素和地址，对所述主页面中的每一子页面的指定部分进行加载，以在所述主页面上呈现至少一个子页面的指定部分。
举例说明，如图4A所示，根据所示页面元素和地址将表单部分、曲线图部分和树结构图部分的DOM内容更新到主页面的容器元素中，将子应用页面A中表单部分、子应用页面B中曲线图部分和子应用页面C中树结构图部分集成到主应用页面中。
在本申请实施例中，在主页面上确定至少一个容器元素，获取基于所述主页面的DOM管理而设置的映射关系，所述映射关系用于表征所述主页面的每一容器元素与子页面中一个指定部分的属性之间的对应关系；所述指定部分的属性包括所述指定部分的页面元素和地址；基于所述映射关系中每一所述指定部分的页面元素和地址，将所述指定部分的DOM内容更新到对应的容器元素中；加载所述主页面，以在所述主页面上呈现至少一个子页面的指定部分。这样，可以通过主页面上的容器元素确定出子页面中指定部分的页面元素和地址，将多个子应用页面的指定部分集成到主页面的指定位置处，能够将多个可独立开发和运行的子应用系统的前端页面整合到同一个主页面，避免了在整合过程中对子应用进行改造。
本申请实施例提供一种网页页面的同步方法，图2为本申请实施例网页页面的同步方法的实现流程示意图，如图2所示，该方法包括：
步骤S201，在主页面上确定至少一个容器元素；
步骤S202，获取基于所述主页面的DOM管理而设置的映射关系，所述映射关系用于表征所述主页面的每一容器元素与子页面中一个指定部分的属性之间的对应关系；所述指定部分的属性包括所述指定部分的页面元素和地址；
步骤S203，基于所述映射关系中每一所述指定部分的页面元素和地址，将所述指定部分的DOM内容更新到对应的容器元素中；
步骤S204，在所述主页面上为每一所述指定部分添加iframe元素；
这里，所述iframe是HTML标签，作用是文档中的文档，或者浮动的框架(FRAME)。iframe元素会创建包含另外一个文档的内联框架(即行内框架)。
这里，所述指定部分可以为子页面中的指定页面元素，每一子页面中的所述指定部分与子页面一一对应。
这里，所述iframe元素可以用于加载完整的子页面，加载完成后，根据所述映射关系将所述子页面中的指定部分内容同步到主页面的容器元素中。
步骤S205，基于所述映射关系中，每一所述指定部分的页面元素和地址配置所述iframe元素；
步骤S206，加载所述主页面，并同步加载所述主页面中的每一所述iframe元素，以在所述主页面上呈现至少一个子页面的指定部分。
在实施过程中，加载主页面可以根据所述映射关系，在所述主页面中对每一个子页面的iframe元素配置指定部分的页面元素和地址，以在加载所述主页面的过程中同步加载所述子页面。
在一些实施例中，所述主页面为微前端的主应用页面，所述子页面为所述微前端的子应用页面，至少两个所述指定部分位于相同的或不同的所述子页面上。
这里，所述微前端(Micro Front-end)主要是把微服务的概念引入到了前端，让前端的多个模块或者应用解耦，做到让前端的子模块独立仓储，独立运行，独立部署。
这里，所述子应用页面和所述主应用页面属于不同的应用。这里，一个子应用页面可以包括至少一个用于整合到主应用页面的指定部分。
在本申请实施例中，一方面，所述主页面为微前端的主应用页面，所述子页面为所述微前端的子应用页面，至少两个所述指定部分位于相同的或不同的所述子页面上。这样，通过将多个子应用页面的至少两个指定部分集成到主页面上，能够将多个可独立开发和运行的子应用系统的前端页面整合到同一个主页面。另一方面，通过在所述主页面上为每一所述指定部分添加iframe元素；基于所述映射关系中，每一所述指定部分的页面元素和地址配置所述iframe元素；这样，能够通过添加不可见的iframe元素，并根据所述映射关系指定部分的页面元素和地址配置所述iframe元素，将子应用中指定的部分整合到主页面中。如此，减少了数据传输的数量，提高了网页加载的速度。
本申请实施例提供一种网页页面的同步方法，图3A为本申请实施例网页页面的同步方法的实现流程示意图，如图3A所示，该方法包括：
步骤S310，在主页面上确定至少一个容器元素；
步骤S320，获取基于所述主页面的DOM管理而设置的映射关系，所述映射关系用于表征所述主页面的每一容器元素与子页面中一个指定部分的属性之间的对应关系；所述指定部分的属性包括所述指定部分的页面元素和地址；
步骤S330，在每次加载所述主页面的情况下，基于所述映射关系中每一所述指定部分的页面元素和地址，将所述指定部分的DOM内容全部复制到对应的容器元素中；
在实施过程中，在每次加载主页面的情况下，可以将所述指定部分的DOM内容全部复制到对应的容器元素中，实现DOM内容的全量加载。
步骤S340，加载所述主页面，以在所述主页面上呈现至少一个子页面的指定部分。
在一些实施例中，步骤S330的替换方式可以通过步骤A1和步骤A2来实现：
步骤A1，在首次加载所述主页面的情况下，基于所述映射关系中每一所述指定部分的页面元素和地址，将所述指定部分的DOM内容全部复制到对应的容器元素中；
步骤A2，在除所述首次之后的其他加载所述主页面的情况下，基于所述映射关系中每一所述指定部分的页面元素和地址，将所述指定部分的DOM内容的增量部分更新到对应的容器元素中。
这里，所述增量为子页面元素与主页面元素中不同的DOM内容。
在实施过程中，将DOM内容进行全量加载之后，每次加载所述主页面的情况下，只需要将DOM内容的增量部分更新到对应的容器元素中，即可实现对所述主页面的加载。
举例说明，如图4A，在映射关系中的对应子页面元素有新增记录的情况下，根据映射关系中表单的页面元素和地址，将新增记录更新到表单所在子页面对应的容器元素 中。
在一些实施例中，所述步骤A2中，在除所述首次之后的其他加载所述主页面的情况下，基于所述映射关系中每一所述指定部分的页面元素和地址，将所述指定部分的DOM内容的增量部分更新到对应的容器元素中，包括：
步骤A21，基于所述映射关系中每一所述指定部分的页面元素和地址，监听每一所述指定部分的页面元素和属性的变化；
步骤A22，将每一所述指定部分的DOM内容的变化，与所述主页面上对应容器元素内的内容进行比较，得到所述DOM内容的增量部分；
步骤A23，将所述DOM内容的增量部分更新到所述主页面的容器元素中。
在一些实施例中，可以不与所述主页面上对应容器元素内的内容进行比较，直接进行全量更新。
在一些实施例中，在所述比较结果为子页面元素被删除的情况下，更新的过程为：在主页面直接删除子页面元素。
在一些实施例中，在所述比较结果为子页面元素属性等内容被修改过的情况下，在所述主页面的容器元素中对所子页面元素进行同步修改。
在一些实施例中，在所述比较结果为新增元素的情况下，将所述新增的元素在所述主页面的容器元素中进行添加。
本申请实施例提供一种网页页面的同步方法，图3B为本申请实施例网页页面的同步方法的实现流程示意图，如图3B所示，该方法包括：
步骤S31，在主页面上确定至少一个容器元素；
步骤S32，获取基于所述主页面的DOM管理而设置的映射关系，所述映射关系用于表征所述主页面的每一容器元素与子页面中一个指定部分的属性之间的对应关系；所述指定部分的属性包括所述指定部分的页面元素和地址；
步骤S33，在首次加载所述主页面的情况下，基于所述映射关系中每一所述指定部分的页面元素和地址，将所述指定部分的DOM内容全部复制到对应的容器元素中；
步骤S34，在除所述首次之后的其他加载所述主页面的情况下，基于所述映射关系中每一所述指定部分的页面元素和地址，监听每一所述指定部分的页面元素和属性的变化；
步骤S35，将每一所述指定部分的DOM内容的变化，与所述主页面上对应容器元素内的内容进行比较，得到所述DOM内容的增量部分；
步骤S36，将所述DOM内容的增量部分更新到所述主页面的容器元素中；
步骤S37，在每一所述指定部分的DOM内容同步的情况下，检查是否有新的style标签或者style标签的内容有更改，得到CSS内容的增量部分；
这里，CSS(Cascading Style Sheets)：层叠样式表，样式定义如何显示或表现HTML元素。所述CSS分为两种：一种为：以style标签和CSS文件的形式，嵌入DOM的<head>标签中的CSS样式；另一种为DOM的页面元素中的CSS样式。
步骤S38，将所述CSS内容的增量部分更新到所述主页面的容器元素中；
步骤S39，加载所述主页面，以在所述主页面上呈现至少一个子页面的指定部分。
在一些实施例中，页面元素中的CSS内容的增量可以通过DOM增量更新的方式进行同步。在另一些实施例中，可以将style标签和CSS文件形式的增量单向同步封装到 主应用页面中。
在一些实施例中，在将所述CSS内容的增量部分更新到所述主页面的容器元素中之前，所述方法还包括：
步骤C，对每一所述指定部分新建唯一的作用域ID；所述步骤S38，将所述CSS内容的增量部分更新到所述主页面的容器元素中，包括：将带有所述作用域ID的增量部分更新到所述主页面的容器元素。
在一些实施例中，不同子应用的子页面中可能会有相同的ID，无法保证作用域ID的唯一性，可能会由于作用域ID的不唯一造成冲突。因此，可以为每个子应用新建一个唯一的作用域ID，由此，可以保证将不同子页面中的目标元素在全量同步以及增量同步到主页面的情况下，有唯一的作用域ID。这样，可以在将CSS样式单向同步封装到主页面的过程中，例如，将样式标签(style标签)和CSS文件单向同步封装到主页面的过程中，保持样式同步的同时，避免不同子应用之间使用相同的ID样式导致的污染。
举例说明，唯一的作用域ID为sub-3，将sub-3当作一个属性插入到容器元素中，插入后容器元素增加作用域ID属性，例如<div sub-3></div>，然后，子页面的所有CSS样式的最外层将包裹上[sub-3]，例如，[sub-3]{子页面的CSS样式}。
在本申请实施例中，对每一所述指定部分新建唯一的作用域ID；将带有所述作用域ID的增量部分更新到所述主页面的容器元素。这样，能够在将CSS样式单向同步封装到主页面的过程中，保持样式同步的同时避免不同子应用之间的使用相同的ID样式导致的样式污染。
本申请实施例提供一种网页页面的同步方法，图3C为本申请实施例网页页面的同步方法的实现流程示意图，如图3C所示，该方法包括：
步骤S301，在主页面上确定至少一个容器元素；
步骤S302，在所述主页面上，监听每一所述容器元素内触发的用户事件操作；
这里，所述用户事件操作可以为鼠标、键盘等用户事件操作。
步骤S303，获取基于所述主页面的DOM管理而设置的映射关系，所述映射关系用于表征所述主页面的每一容器元素与子页面中一个指定部分的属性之间的对应关系；所述指定部分的属性包括所述指定部分的页面元素和地址；
步骤S304，基于所述映射关系中每一所述指定部分的页面元素和地址，将所述指定部分的DOM内容更新到对应的容器元素中；
步骤S305，基于映射关系，将所述用户事件操作传递到对应的目标子页面的指定部分；
在实施过程中，通过所述映射关系可以确定用户事件操作的目标子页面，将所述用户事件操作传递到对应的目标子页面的指定部分。
步骤S306，监听所述目标子页面的指定部分中DOM内容的变化；
在实施过程中，目标子页面的指定部分同步触发所述用户事件操作，引起所述目标子页面的指定部分中DOM内容的变化。
在一些实施例中，可以运用观察器MutationObserver进行监听。
这里，MutationObserver为Web API接口，提供了监视对DOM树所做更改的能力。这里，所述API(Application Programming Interface)为应用程序接口，是一些预先定义 的函数，或指软件系统不同组成部分衔接的约定。
所述观察器一方面，监听容器元素内子页面元素和所述子页面元素的属性的变化；另一方面检测<head>标签中CSS样式的变化。
步骤S307，将更新后的DOM内容更新到对应的容器元素中；
步骤S308，加载所述主页面，以在所述主页面上呈现至少一个子页面的指定部分。
在一些实施例中，所述步骤S305，基于映射关系，将所述用户事件操作传递到对应的目标子页面的指定部分，包括：
步骤S3051，基于映射关系，确定所述用户事件操作的目标子页面；
步骤S3052，获得所述用户事件操作的适配器，其中，所述适配器用于将主页面上触发的用户事件操作传递到目标子页面的指定部分，所述适配器中配置的内容至少包括以下之一：所述用户事件操作的类型、所述目标子页面中指定部分的目标元素和所述目标元素的DOM树路径；
这里，所述适配器用于将主页面用户事件操作同步到子页面。使用同一个适配器可以将每一个主页面的事件均适配到子页面。
举例说明，如图4A所示，在主页面的表单界面的input元素中输入一个内容，子不会有对应的输入，通过建立适配器可以解决这一问题。适配器可以在主页面输入内容的同时，将输入内容同步给子页面。
步骤S3053，根据所述适配器中配置的所述目标元素的DOM树路径在所述指定部分中查找所述目标元素；
这里，所述DOM树路径在主页面中可以为目标元素相对于主页面中子页面的容器元素的相对路径。例如，子页面为表单，目标元素为input框，所DOM树路径为input元素相对于表单的容器元素的相对路径。根据表单的容器元素位置和所述相对路径可以确定出子页面中input元素的相对位置。
步骤S3054，根据所述适配器中配置的用户事件操作的类型，对所述目标元素触发所述用户事件操作，以将所述用户事件操作传递到对应的目标子页面的指定部分。
举例说明，触发的用户事件操作类型：input输入的内容→键盘事件，对应的，在子页面的指定部分的目标元素中触发一个键盘事件，进行内容输入；触发的用户事件操作类型：点击回车→内容变化事件，对应的，在子页面的指定部分的目标元素中对一个的input框中触发一个内容变化事件。
在一些实施例中，所述适配器中配置的内容还包括预设格式的参数，所述方法还包括：将所述适配器中配置的预设格式的参数传递到所述目标子页面的指定部分。
这里，所述预设格式的参数可以为主页面获得的数据，也可以为能够获取子页面指定部分执行结果的方法。所述约定格式的额外参数可以存储在适配器中，在将主页面的用户事件操作同步给目标子页面的指定部分过程中，通过适配器将所述约定格式的额外参数同步给目标子页面的指定部分。
举例说明，所述约定格式的额外参数可以为一个回调函数。所述回调函数用于在主页面将执行方法给目标子页面的指定部分，目标子页面的指定部分执行对应方法，执行对应方法的过程中需要调用后台，获取数据，主页面不会等待目标子页面的指定部分进行逻辑处理，可以在执行完成后，通过回调函数通知主页面该方法已经执行完成。
举例说明，所述约定格式的额外参数可以为主页面获得的用户信息，例如，用户的 用户名和密码。目标子页面的指定部分接收所述用户名和密码，在指定部分执行用户身份验证方法，将执行结果放到子页面的DOM中，通过DOM的同步过程，将执行结果同步给主页面，完成主页面和目标子页面的指定部分之间的通讯。
在本申请实施例中，一方面，将所述适配器中配置的预设格式的参数传递到所述目标子页面的指定部分，这样，能够通过预设格式的参数在主页面和目标子页面的指定部分之间的实现通讯；另一方面，根据所述适配器中配置的用户事件操作的类型，对所述目标元素触发所述用户事件操作，以将所述用户事件操作传递到对应的目标子页面的指定部分，这样，能够使用适配器将主页面用户事件操作同步到目标子页面的指定部分，实现主页面与子应用之间对应内容的同步机制，提供了不同应用的网页页面之间的扩展协同的技术框架。
相关技术中，在网页开发领域，实现微前端有两种方式(1)iframe嵌套方式：通过在主应用页面添加iframe标签，通过src字段指定子应用的地址，直接嵌套展示其他子应用的页面。(2)组合式应用路由分发方式：对每个子应用进行独立的构建和部署，根据主应用的要求提供用于进行加载、启动和卸载等调用功能的接口，在运行的过程中，由主应用来进行路由管理应用加载，启动，卸载，通讯机制。举例说明，在方式(1)中主应用页面加载的情况下，调用子应用提供的加载接口，将子应用提供的内容加载到主应用页面；在方式(2)中主应用页面路由跳转的情况下，需要先调用子应用提供的卸载接口，把子应用卸载掉，然后再进行新的路由。可以看出，相关技术中，实现的效果是把多个前端技术栈实现的前端页面整合到一个页面中运行，形成一个复合单页应用。
由此可见，相关技术中存在以下缺点：对于方式(1)，存在的缺点为子应用需要改造，提供一组不带头部、导航等的功能页面；iframe嵌入的显示区大小不易控制，存在一定局限性；iframe的样式显示、兼容性等具有局限性(比如无法显示全局模态框)。对于方式(2)，存在的缺点为需要改造每个子应用，提供相同的加载、卸载、构建方式；用到的公共库需统一管理，不然会造成冲突。
为解决上述问题，本申请提供一种网页页面的同步方法，以微前端应用场景为例，子页面与主页面属于不同的应用，所述方法通过将多个子应用页面的指定部分集成嵌套到主应用页面的指定位置(包括DOM内容和样式)，实现了将多个可独立开发和运行的应用系统的前端界面整合到同一个URL地址的页面。
图4A为本申请实施例的场景示意图，如图4A所示，以微前端应用场景为例，子页面与主页面属于不同的应用，通过本申请提供的一种网页页面的同步方法可以将子应用页面A中表单部分、子应用页面B中曲线图部分和子应用页面C中树结构图部分集成到主应用页面，并放到主应用页面指定位置。
本申请实施例提供的一种网页页面的同步方法，将要集成的所述子应用页面指定部分分为DOM、CSS和Event三部分，其中，通过所述DOM部分监听子应用页面指定部分的DOM变化，将所述变化内容同步到主应用页面；通过CSS将子应用页面的样式内容单向同步分装到主应用页面；通过Event将主应用页面对应部分的事件响应映射到子应用同步触发。其中，Event表示事件对象，代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
以微前端应用场景为例，子页面与主页面属于不同的应用，图4B为本申请实施例 提供的一种网页页面的同步方法的DOM实现流程示意图，如图4B所示，该方法包括：
步骤S401，建立映射关系；
这里，所述映射关系为主应用页面与子应用页面之间的映射关系。
在一些实施例中，在主应用页面添加子应用页面元素与子应用页面地址和要展示到主应用页面的容器元素的映射关系。
映射关系的格式如下：
{主应用页面的容器元素:{
url:子应用页面地址，
ele:子应用页面元素
}}
步骤S402，加载主应用页面；
在一些实施例中，加载主应用页面可以根据所述映射关系，在所述主应用页面中对每一个子应用页面，添加一个内联框架元素(iframe元素)，并配置子应用页面的地址，以根据所述地址加载子应用页面。
步骤S403，加载子应用页面；
步骤S404，首次目标元素全量同步；
这里，所述目标元素为所述映射关系中的子应用页面元素。
在一些实施例中，在主应用页面中对子应用页面进行第一次加载的情况下，根据所述映射关系，将子应用页面元素全量同步到主应用页面的容器元素内。
在一些实施例中，子应用页面加载后，可以运用观察器MutationObserver进行监听。一方面，监听容器元素内子应用页面元素和所述子应用页面元素的属性的变化；另一方面检测<head>标签中CSS样式的变化。
由于在监听到页面元素发生变化的情况下，会调用JavaScript的方法，而观察器MutationObserver监听不到JavaScript引起的输入变化，因此，需要对用户可输入内容的页面元素添加监听，例如，对input元素添加监听。
步骤S405，监听变化，增量同步。
在一些实施例中，所述监听变化可以通过建定时器，定时检查子应用对应的页面元素和页面元素属性的变化。
这里，所述增量为子应用页面元素与当前主应用页面元素中不同的内容。
在一些实施例中，在主页面监听到用户事件操作后，事件管理将用户事件操作映射到子应用页面，子应用页面触发同步的用户事件操作，JavaScript中的执行方法将会被执行，为了仅同步子页面元素，将JavaScript中的执行方法在事件管理过程中执行，需要清除<script>标签。在清除<script>标签，监听到子应用页面发生的变化后，将子应用页面元素与当前主应用页面元素部分进行对比，将不同的内容在主应用页面上同步更新。
在一些实施例中，可以将子应用页面元素与当前主应用页面元素部分进行对比，直接进行全量更新。
在一些实施例中，在所述对比结果为子应用页面元素被删除的情况下，通过更新的过程为：在主应用页面直接删除子应用页面元素。
在一些实施例中，在所述对比结果为子应用页面元素属性等内容被修改过的情况下，在所述主应用页面的容器元素中对所子应用页面元素进行同步修改。
在一些实施例中，在所述对比结果为新增元素的情况下，将所述新增的元素在所述主应用页面的容器元素中进行添加。
举例说明，复选框(CheckBox)、文本输入框(Input)等一些属性在HTML的属性(attribute)中没有，或者，最新的属性值只存在于DOM属性的元素。
以微前端应用场景为例，子页面与主页面属于不同的应用，图4C为本申请实施例提供的一种网页页面的同步方法的CSS实现流程示意图，如图4C所示，该方法包括：
步骤S410，首次将子应用页面42中的目标元素CSS全量同步到主应用页面41；
这里，所述CSS分为两种：一种为：以html标签形式嵌入DOM中；另一种为：在DOM的html标签上面的带有CSS内容。
这里，所述目标元素为每一子页面中被指定同步到主应用页面的元素。
在一些实施例中，不同子应用页面中可能会有相同的ID，无法保证作用域ID的唯一性，可能会由于作用域ID的不唯一造成冲突。因此，可以为每个子应用新建一个唯一的作用域ID，由此，可以保证将不同子应用页面42中的目标元素在全量同步以及增量同步到主应用页面的情况下，有唯一的作用域ID。这样，可以在将CSS样式单向同步封装到主应用页面的过程中，例如，将样式标签(style标签)和CSS文件单向同步封装到主应用页面的过程中，保持样式同步的同时，避免不同子应用之间的使用相同的ID样式导致的污染。
举例说明，唯一的作用域ID为sub-3，将sub-3当作一个属性插入到容器元素中，插入后容器元素增加作用域ID属性，例如<div sub-3></div>，然后，子页面的所有CSS样式的最外层将包裹上[sub-3]，例如，[sub-3]{子页面的CSS样式}。
步骤S420，在DOM同步的同时，将子应用页面42中CSS的增量同步到主应用页面41。
在一些实施例中，在每一次DOM同步的情况下，都会检查是否有新的style标签或者style标签的内容有更改，并同步更新。
以微前端应用场景为例，子页面与主页面属于不同的应用，图4D为本申请实施例提供的一种网页页面的同步方法的事件管理实现流程示意图，如图4D所示，该方法包括：
步骤S41，监听主应用页面的用户事件操作；
这里，所述用户事件操作可以为鼠标、键盘等用户的用户事件操作。
步骤S42，对所述用户事件操作建立适配器；
这里，所述适配器用于将主应用页面用户事件操作同步到子应用页面。使用同一个适配器可以将每一个主应用页面的事件均适配到子应用页面。
举例说明，如图4A所示，在主应用页面的表单界面的input元素中输入一个内容，子应用不会有对应的输入，通过建立适配器可以解决这一问题。适配器可以在主页面输入内容的同时，将输入内容同步给子页面。
这里，所述适配器可以用于记录触发的事件类型、目标元素和目标元素相对于主应用页面的容器元素的位置。这里目标元素相对于主应用页面的容器元素的位置可以为DOM树路径。这里，所述DOM树路径在主页面中可以为目标元素相对于主应用页面中子应用页面的容器元素的相对路径。例如，子应用页面为表单，目标元素为input框，所DOM树路径为input元素相对于表单的容器元素的相对路径。根据表单的容器元素 位置和所述相对路径可以确定出子应用页面中input元素的相对位置。
在一些实施例中，在所述步骤S42，对所述用户事件操作建立适配器之后，所述方法还包括：步骤S43，根据所述适配器，在所述子应用页面中触发所述用户事件操作。
在一些实施例中，所述步骤S43，根据所述适配器，在所述子应用页面中触发所述用户事件操作，包括：
根据主应用页面与子应用页面的映射关系，确定所述主应用页面中触发所述时间操作的子应用页面；根据所述适配器中存储的DOM树路径在所述子应用页面中确定目标元素；对所述目标元素触发所述适配器中存储的事件类型。
举例说明，触发的用户事件操作类型：input输入的内容→键盘事件，对应的，在子页面中触发一个键盘事件，进行内容输入；触发的用户事件操作类型：点击回车→内容变化事件，对应的，在子页面中对一个的input框中触发一个内容变化事件。
在一些实施例中，在子应用页面同步触发事件的情况下，可以带上约定格式的额外参数，传递给子应用，其中，所述约定格式的额外参数可以为主应用页面获得的数据，也可以为能够获取子应用页面执行结果的方法。
这里，所述约定格式的额外参数可以存储在适配器中，在将主应用页面的用户事件操作同步给子应用页面的过程中，通过适配器将所述约定格式的额外参数同步给子应用页面。
举例说明，所述约定格式的额外参数可以为一个回调函数。所述回调函数用于在主页面将执行方法给子页面，子页面执行对应方法，子页面执行对应方法的过程中需要调用后台，获取数据，主页面不会等待子页面进行逻辑处理，子页面可以在执行完成后，通过回调函数通知主页面该方法已经执行完成。
举例说明，所述约定格式的额外参数可以为主应用页面获得的用户信息，例如，用户的用户名和密码。子应用页面接收所述用户名和密码，在子应用页面执行用户身份验证方法，将执行结果放到子应用页面的DOM中，通过DOM的同步过程，将执行结果同步给主应用页面，完成主应用页面和子应用页面之间的通讯。
在一些实施例中，在第一次加载子应用页面的情况下，将主应用页面提供的API注入到子应用页面中。例如，展示全屏弹窗、全局参数的读取方法和参数回传方法等。这样，子应用就可以跨越iframe的局限，操作当前子应用页面元素以外的内容，跟主应用页面进行通讯。
基于前述的实施例，本申请实施例提供一种网页页面的同步装置，该装置包括所包括的各模块、以及各模块所包括的各子模块、以及各子模块所包括的各单元，可以通过计算机设备中的处理器来实现；当然也可通过具体的逻辑电路实现；在实施的过程中，处理器可以为中央处理器(CPU)、微处理器(MPU)、数字信号处理器(DSP)或现场可编程门阵列(FPGA)等。
图5为本申请实施例网页页面的同步装置的组成结构示意图，如图5所示，所述装置500包括第一确定模块501、获取模块502、第一更新模块503和第一加载模块504，其中：
第一确定模块501，配置为在主页面上确定至少一个容器元素；
获取模块502，配置为获取基于所述主页面的DOM管理而设置的映射关系，所述映射关系用于表征所述主页面的每一容器元素与子页面中一个指定部分的属性之间的 对应关系；所述指定部分的属性包括所述指定部分的页面元素和地址；
第一更新模块503，配置为基于所述映射关系中每一所述指定部分的页面元素和地址，将所述指定部分的DOM内容更新到对应的容器元素中；
第一加载模块504，配置为加载所述主页面，以在所述主页面上呈现至少一个子页面的指定部分。
在一些实施例中，所述装置500还包括添加模块、配置模块和第二加载模块，其中：添加模块，配置为在所述主页面上为每一所述指定部分添加iframe元素；配置模块，配置为基于所述映射关系中，每一所述指定部分的页面元素和地址配置所述iframe元素；第二加载模块，配置为所述加载所述主页面，包括加载所述主页面中的每一所述iframe元素。
在一些实施例中，所述第一更新模块503包括复制子模块和更新子模块，其中：复制子模块，配置为在首次或每次加载所述主页面的情况下，基于所述映射关系中每一所述指定部分的页面元素和地址，将所述指定部分的DOM内容全部复制到对应的容器元素中；更新子模块，配置为在除所述首次之后的其他加载所述主页面的情况下，基于所述映射关系中每一所述指定部分的页面元素和地址，将所述指定部分的DOM内容的增量部分更新到对应的容器元素中。
在一些实施例中，所述更新子模块包括监听单元、比较单元和更新单元，其中：监听单元，配置为基于所述映射关系中每一所述指定部分的页面元素和地址，监听每一所述指定部分的页面元素和属性的变化；比较单元，配置为将每一所述指定部分的DOM内容的变化，与所述主页面上对应容器元素内的内容进行比较，得到所述DOM内容的增量部分；更新单元，配置为将所述DOM内容的增量部分更新到所述主页面的容器元素中。
在一些实施例中，所述装置500还包括检查模块和第二更新模块，其中：检查模块，配置为在每一所述指定部分的DOM内容同步的情况下，检查是否有新的style标签或者style标签的内容有更改，得到CSS内容的增量部分；第二更新模块，配置为将所述CSS内容的增量部分更新到所述主页面的容器元素中。
在一些实施例中，所述装置500还包括第一监听模块、第一传递模块、第二监听模块和第三更新模块，其中：第一监听模块，配置为在所述主页面上，监听每一所述容器元素内触发的用户事件操作；第一传递模块，配置为基于映射关系，将所述用户事件操作传递到对应的目标子页面的指定部分；第二监听模块，配置为监听所述目标子页面的指定部分中DOM内容的变化；第三更新模块，配置为将更新后的DOM内容更新到对应的容器元素中。
在一些实施例中，所述装置500还包括新建模块，其中：新建模块，配置为对每一所述指定部分新建唯一的作用域ID；所述第二更新模块还配置为将带有所述作用域ID的增量部分更新到所述主页面的容器元素。
在一些实施例中，所述第一传递模块包括确定子模块、获得子模块、查找子模块和触发子模块，其中：确定子模块，配置为基于映射关系，确定所述用户事件操作的目标子页面；获得子模块，配置为获得所述用户事件操作的适配器，其中，所述适配器配置为将主页面上触发的用户事件操作传递到目标子页面的指定部分，所述适配器中配置的内容至少包括以下之一：所述用户事件操作的类型、所述目标子页面中指定部分的目标 元素和所述目标元素的DOM树路径；查找子模块，配置为根据所述适配器中配置的所述目标元素的DOM树路径在所述指定部分中查找所述目标元素；触发子模块，配置为根据所述适配器中配置的用户事件操作的类型，对所述目标元素触发所述用户事件操作，以将所述用户事件操作传递到对应的目标子页面的指定部分。
在一些实施例中，所述适配器中配置的内容还包括预设格式的参数，所述装置500还包括第二传递模块，其中：第二传递模块，配置为将所述适配器中配置的预设格式的参数传递到所述目标子页面的指定部分。
以上装置实施例的描述，与上述方法实施例的描述是类似的，具有同方法实施例相似的有益效果。对于本申请装置实施例中未披露的技术细节，请参照本申请方法实施例的描述而理解。
需要说明的是，本申请实施例中，如果以软件功能模块的形式实现上述的网页页面的同步方法，并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请实施例的技术方案本质上或者说对相关技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机、服务器等)执行本申请各个实施例所述方法的全部或部分。而前述的存储介质包括：U盘、移动硬盘、只读存储器(Read Only Memory，ROM)、磁碟或者光盘等各种可以存储程序代码的介质。这样，本申请实施例不限制于任何特定的硬件和软件结合。
对应地，本申请实施例提供一种计算机设备，包括存储器和处理器所述存储器存储有可在处理器上运行的计算机程序，所述处理器执行所述程序时实现上述方法中的步骤。
对应地，本申请实施例提供一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现上述方法中的步骤。
这里需要指出的是：以上存储介质和设备实施例的描述，与上述方法实施例的描述是类似的，具有同方法实施例相似的有益效果。对于本申请存储介质和设备实施例中未披露的技术细节，请参照本申请方法实施例的描述而理解。
需要说明的是，图6为本申请实施例中计算机设备的一种硬件实体示意图，如图6所示，该计算机设备600的硬件实体包括：处理器601、通信接口602和存储器603，其中
处理器601通常控制计算机设备600的总体操作。
通信接口602可以使计算机设备通过网络与其他终端或服务器通信。
存储器603配置为存储由处理器601可执行的指令和应用，还可以缓存待处理器601以及计算机设备600中各模块待处理或已经处理的数据(例如，图像数据、音频数据、语音通信数据和视频通信数据)，可以通过闪存(FLASH)或随机访问存储器(Random Access Memory，RAM)实现。
应理解，说明书通篇中提到的“一个实施例”或“一实施例”意味着与实施例有关的特定特征、结构或特性包括在本申请的至少一个实施例中。因此，在整个说明书各处出现的“在一个实施例中”或“在一实施例中”未必一定指相同的实施例。此外，这些特定的特征、结构或特性可以任意适合的方式结合在一个或多个实施例中。应理解，在本申请的各种实施例中，上述各过程的序号的大小并不意味着执行顺序的先后，各过程 的执行顺序应以其功能和内在逻辑确定，而不应对本申请实施例的实施过程构成任何限定。上述本申请实施例序号用于描述，不代表实施例的优劣。
需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。
在本申请所提供的几个实施例中，应该理解到，所揭露的设备和方法，可以通过其它的方式实现。以上所描述的设备实施例是示意性的，例如，所述单元的划分，为一种逻辑功能划分，实际实现可以有另外的划分方式，如：多个单元或组件可以结合，或可以集成到另一个系统，或一些特征可以忽略，或不执行。另外，所显示或讨论的各组成部分相互之间的耦合、或直接耦合、或通信连接可以是通过一些接口，设备或单元的间接耦合或通信连接，可以是电性的、机械的或其它形式的。
上述作为分离部件说明的单元可以是、或也可以不是物理上分开的，作为单元显示的部件可以是、或也可以不是物理单元；既可以位于一个地方，也可以分布到多个网络单元上；可以根据实际的需要选择其中的部分或全部单元来实现本实施例方案的目的。
另外，在本申请各实施例中的各功能单元可以全部集成在一个处理单元中，也可以是各单元分别单独作为一个单元，也可以两个或两个以上单元集成在一个单元中；上述集成的单元既可以采用硬件的形式实现，也可以采用硬件加软件功能单元的形式实现。
本领域普通技术人员可以理解：实现上述方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成，前述的程序可以存储于计算机可读取存储介质中，该程序在执行时，执行包括上述方法实施例的步骤；而前述的存储介质包括：移动存储设备、只读存储器(Read Only Memory，ROM)、磁碟或者光盘等各种可以存储程序代码的介质。
或者，本申请上述集成的单元如果以软件功能模块的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请实施例的技术方案本质上或者说对相关技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机、服务器等)执行本申请各个实施例所述方法的全部或部分。而前述的存储介质包括：移动存储设备、ROM、磁碟或者光盘等各种可以存储程序代码的介质。
以上所述，仅为本申请的实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应以所述权利要求的保护范围为准。
工业实用性
本实施例中，通过主页面上的容器元素确定出子页面中指定部分的页面元素和地址，将多个子应用页面的指定部分集成到主页面的指定位置处，能够将多个可独立开发和运行的子应用系统的前端页面整合到同一个主页面，避免了在整合过程中对子应用进行改造，更加便捷智能。

Claims (13)

  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内容的增量部分更新到所述主页面的容器元素中之前，所述方法还包括：
    对每一所述指定部分新建唯一的作用域ID；
    所述将所述CSS内容的增量部分更新到所述主页面的容器元素中，包括：将带有所述作用域ID的增量部分更新到所述主页面的容器元素。
  8. 根据权利要求1至7任一项所述的方法，其中，所述方法还包括：
    在所述主页面上，监听每一所述容器元素内触发的用户事件操作；
    基于映射关系，将所述用户事件操作传递到对应的目标子页面的指定部分；
    监听所述目标子页面的指定部分中DOM内容的变化；
    将更新后的DOM内容更新到对应的容器元素中。
  9. 根据权利要求8所述的方法，其中，所述基于映射关系，将所述用户事件操作传递到对应的目标子页面的指定部分，包括：
    基于映射关系，确定所述用户事件操作的目标子页面；
    获得所述用户事件操作的适配器，其中，所述适配器用于将主页面上触发的用户事件操作传递到目标子页面的指定部分，所述适配器中配置的内容至少包括以下之一：所述用户事件操作的类型、所述目标子页面中指定部分的目标元素和所述目标元素的DOM树路径；
    根据所述适配器中配置的所述目标元素的DOM树路径在所述指定部分中查找所述目标元素；
    根据所述适配器中配置的用户事件操作的类型，对所述目标元素触发所述用户事件操作，以将所述用户事件操作传递到对应的目标子页面的指定部分。
  10. 根据权利要求9所述的方法，其中，所述适配器中配置的内容还包括预设格式的参数，所述方法还包括：
    将所述适配器中配置的预设格式的参数传递到所述目标子页面的指定部分。
  11. 一种网页页面的同步装置，所述装置包括：
    第一确定模块，配置为在主页面上确定至少一个容器元素；
    获取模块，配置为获取基于所述主页面的DOM管理而设置的映射关系，所述映射关系用于表征所述主页面的每一容器元素与子页面中一个指定部分的属性之间的对应关系；所述指定部分的属性包括所述指定部分的页面元素和地址；
    第一更新模块，配置为基于所述映射关系中每一所述指定部分的页面元素和地址，将所述指定部分的DOM内容更新到对应的容器元素中；
    第一加载模块，配置为加载所述主页面，以在所述主页面上呈现至少一个子页面的指定部分。
  12. 一种计算机设备，包括存储器和处理器，所述存储器存储有可在处理器上运行的计算机程序，所述处理器执行所述程序时实现权利要求1至10任一项所述方法中的步骤。
  13. 一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现权利要求1至10任一项所述方法中的步骤。
PCT/CN2021/129637 2020-12-17 2021-11-09 一种网页页面的同步方法及装置、设备、存储介质 WO2022127449A1 (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN202011497200.4 2020-12-17
CN202011497200.4A CN112612449A (zh) 2020-12-17 2020-12-17 一种网页页面的同步方法及装置、设备、存储介质

Publications (1)

Publication Number Publication Date
WO2022127449A1 true WO2022127449A1 (zh) 2022-06-23

Family

ID=75240911

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2021/129637 WO2022127449A1 (zh) 2020-12-17 2021-11-09 一种网页页面的同步方法及装置、设备、存储介质

Country Status (2)

Country Link
CN (1) CN112612449A (zh)
WO (1) WO2022127449A1 (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115729592A (zh) * 2022-11-21 2023-03-03 上海秉匠信息科技有限公司 一种页面更新的方法、装置、电子设备及介质

Families Citing this family (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112612449A (zh) * 2020-12-17 2021-04-06 深圳前海微众银行股份有限公司 一种网页页面的同步方法及装置、设备、存储介质
CN113220273A (zh) * 2021-05-20 2021-08-06 南方电网数字电网研究院有限公司 微前端应用资源处理方法、装置、设备和介质
CN113377375A (zh) * 2021-06-30 2021-09-10 杭州群核信息技术有限公司 页面处理的方法
CN113504927A (zh) * 2021-07-26 2021-10-15 平安普惠企业管理有限公司 用户信息更新的方法、装置、设备及存储介质
CN115033335B (zh) * 2022-08-11 2023-01-10 青岛中正合力软件有限公司 一种应用于网页同屏的显示处理方法

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101777048A (zh) * 2009-01-14 2010-07-14 国际商业机器公司 解决web应用复合中UI样式冲突的方法和装置
US20130073946A1 (en) * 2011-09-21 2013-03-21 Mstar Semiconductor, Inc. Method and apparatus for loading webpage content of webkit browser
CN104573066A (zh) * 2015-01-26 2015-04-29 中国工商银行股份有限公司 页面复用方法及装置
CN108459845A (zh) * 2018-03-14 2018-08-28 北京思特奇信息技术股份有限公司 一种监控标签属性的埋点方法及装置
CN112612449A (zh) * 2020-12-17 2021-04-06 深圳前海微众银行股份有限公司 一种网页页面的同步方法及装置、设备、存储介质

Family Cites Families (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105824900A (zh) * 2016-03-14 2016-08-03 传线网络科技（上海）有限公司 一种基于react-native的页面展示系统
CN107450992B (zh) * 2017-07-31 2020-05-12 武汉斗鱼网络科技有限公司 标题栏与弹框栏同步通信的方法、存储介质、设备及系统
CN110109665A (zh) * 2018-10-18 2019-08-09 神思旭辉医疗信息技术有限责任公司 一种基于容器封装的前端ui系统及方法
CN111090823B (zh) * 2019-12-23 2024-02-09 广州市百果园信息技术有限公司 一种页面应用的集成系统以及应用访问方法、装置和设备
CN111274510A (zh) * 2020-01-15 2020-06-12 平安银行股份有限公司 页面渲染方法、装置、设备及可读存储介质
CN111897532A (zh) * 2020-07-27 2020-11-06 上海宏路数据技术股份有限公司 页面元素监听方法、电子设备和介质

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101777048A (zh) * 2009-01-14 2010-07-14 国际商业机器公司 解决web应用复合中UI样式冲突的方法和装置
US20130073946A1 (en) * 2011-09-21 2013-03-21 Mstar Semiconductor, Inc. Method and apparatus for loading webpage content of webkit browser
CN104573066A (zh) * 2015-01-26 2015-04-29 中国工商银行股份有限公司 页面复用方法及装置
CN108459845A (zh) * 2018-03-14 2018-08-28 北京思特奇信息技术股份有限公司 一种监控标签属性的埋点方法及装置
CN112612449A (zh) * 2020-12-17 2021-04-06 深圳前海微众银行股份有限公司 一种网页页面的同步方法及装置、设备、存储介质

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115729592A (zh) * 2022-11-21 2023-03-03 上海秉匠信息科技有限公司 一种页面更新的方法、装置、电子设备及介质

Also Published As

Publication number Publication date
CN112612449A (zh) 2021-04-06

Similar Documents

Publication Publication Date Title
WO2022127449A1 (zh) 一种网页页面的同步方法及装置、设备、存储介质
US11200044B2 (en) Providing access to a hybrid application offline
EP3593254B1 (en) Editing a database during preview of a virtual web page
KR101323037B1 (ko) 생산성 제품군 애플리케이션 및 호스팅된 사용자인터페이스를 위한 인터페이스들
US20190364107A1 (en) Server-side selective synchronization
US9417933B2 (en) Enabling access to rich data by intercepting paste operations
CN102455913B (zh) 显示模板的定制
AU2020203219B2 (en) Sharing unmanaged content using a content management system
KR101623223B1 (ko) 하나의 인터넷 호스팅 시스템 집합에 의해 제공되는 다수의 병렬 사용자 경험
US9785452B2 (en) Framework for dependency management and automatic file load in a network environment
US20080243874A1 (en) Lightweight Schema Definition
US20150222664A1 (en) Conflict resolution in extension induced modifications to web requests and web page content
US7844574B2 (en) Systems, methods and computer program products for automatic network-based persistent XML storage and management
US20120311375A1 (en) Redirecting requests to secondary location during temporary outage
US10198449B2 (en) Creating unique content item identifiers
US11301538B1 (en) Data management in multi-application web pages
EP3321796A1 (en) Multi-platform interface framework
JP2011022856A (ja) Ｗｅｂアプリケーションの連携方法、連携装置、および連携プログラム

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 21905378

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

32PN Ep: public notification in the ep bulletin as address of the adressee cannot be established

Free format text: NOTING OF LOSS OF RIGHTS PURSUANT TO RULE 112(1) EPC (EPO FORM 1205A DATED 021023)

122 Ep: pct application non-entry in european phase

Ref document number: 21905378

Country of ref document: EP

Kind code of ref document: A1