[发明专利]网页实时预览编辑方法、装置、设备及存储介质

说明书

本申请公开一种网页实时预览编辑方法、装置、设备及存储介质，所述方法包括如下步骤：在网页编辑端创建空白模板，将从远程服务器获取的已发布网页的HTML源码插入到所述空白模板中；监听到所述空白模板完成所述HTML源码的插入后，实例化该空白模板以在网页编辑端预览相应的可编辑网页；接收作用于所述可编辑网页的编辑数据，将所述编辑数据储存于全局变量中；响应于所述全局变量的数据更新，刷新所述可编辑网页的预览效果。本申请适于为大型的网页专题开发工程提供高效编辑解决方案，能更好地实现代码隔离和管理。

技术领域

本申请属于互联网技术领域，具体涉及一种网页实时预览编辑方法，还涉及前述方法相应的装置、电子设备以及非易失性存储介质。

背景技术

随着互联网应用和技术的全面深化发展，起来越多的线上应用都基于网页来实现，HTML5的普及，更使基于网页的各种终端应用程序和网站得以蓬勃发展。基于网页的应用，需要提供关于网页的制作配置环境。大型的互联网平台，尤其是一些门户网站、直播网站等，其涉及要开发、运营、维护的页面繁多，开发和编辑时间往往也比较紧迫，而设计要求各异，开发人员工作压力必然巨大。面对这种现状，为网页开发和运维提供更为高效的编辑机制显得更为迫切。

为解决上述问题，业内采用可视化搭建的解决方案，使得网站运营开发人员可以实时预览网页的每一步编辑结果，发现问题时再重新编辑，以提高运营维护网页的效率。

可视化搭建相关的解决方案常见如下两种：

其一，通过在HTML源码中嵌入iframe标签的方式，嵌套一个远程专题发布页，并通过postMessage或url传参的方式进行数据传递；其二，通过将专题发布页与专题编辑端部署在同一个工程，将专题发布页当作专题编辑端一个子模块进行展示，因同在一个工程上，专题发布页与专题编辑端之间为父子模块关系，即而父子模块之间进行数据传递比较方便。但以上两个方案均具有一定的缺陷，例如，均需重新编辑代码或重新触控控件或插件，使得每次对网页进行少量更新，也需重新编辑代码或触控控件或插件，增加了不必要的工作量，降低了工作效率，不利于大规模的更新网页。同时，前一方案复杂度较高实现较为繁琐，后一方案不利于代码分离及管理。

发明内容

本申请的首要目的旨在提供一种便于运营和维护的网页实时预览编辑方法。

作为本申请的另一目的，基于前述的网页实时预览编辑方法而提供与之相适应的一种网页实时预览编辑装置。

作为本申请的又一目的，基于前述网页实时预览编辑方法而提供与之相适应的电子设备。

作为本申请的又一目的，提供一种适于存储所述网页实时预览编辑方法实现的计算机程序的非易失性存储介质。

为满足本申请的各个目的，本申请采用如下技术方法：

适应本申请的首要目的而提供一种网页实时预览编辑方法，包括如下步骤：

在网页编辑端创建空白模板，将从远程服务器获取的已发布网页的HTML源码插入到所述空白模板中；

监听到所述空白模板完成所述HTML源码的插入后，实例化该空白模板以在网页编辑端预览相应的可编辑网页；

接收作用于所述可编辑网页的编辑数据，将所述编辑数据储存于全局变量中；

响应于所述全局变量的数据更新，刷新所述可编辑网页的预览效果。

在一个实施例中，被插入到所述空白模板中的HTML源码，仅包括其可执行代码和/或样式代码。

进一步的，所述编辑数据包括所述可编辑网页中的一个或多个布局元素的定义数据。

优选的，为所述空白模板创建与所述已发布网页的发布端相同的根元素ID,以便根据该根元素ID将所述编辑后的可编辑网页的编辑数据同步到所述发布端供发布。