[发明专利]一种网页页面的同步方法及装置、设备、存储介质

权利要求书

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内容更新到对应的容器元素中。