CN114254229A - 网页渲染方法及装置 - Google Patents

网页渲染方法及装置 Download PDF

Info

Publication number
CN114254229A
CN114254229A CN202111582464.4A CN202111582464A CN114254229A CN 114254229 A CN114254229 A CN 114254229A CN 202111582464 A CN202111582464 A CN 202111582464A CN 114254229 A CN114254229 A CN 114254229A
Authority
CN
China
Prior art keywords
window
plug
target
rendering
webpage
Prior art date
Legal status (The legal status 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 status listed.)
Pending
Application number
CN202111582464.4A
Other languages
English (en)
Inventor
田亮
华鹏
杨东
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Shengming Technology Co ltd
Secworld Information Technology Beijing Co Ltd
Original Assignee
Beijing Shengming Technology Co ltd
Secworld Information Technology Beijing Co Ltd
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 Beijing Shengming Technology Co ltd, Secworld Information Technology Beijing Co Ltd filed Critical Beijing Shengming Technology Co ltd
Priority to CN202111582464.4A priority Critical patent/CN114254229A/zh
Publication of CN114254229A publication Critical patent/CN114254229A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • 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/957—Browsing optimisation, e.g. caching or content distillation
    • 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
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/445—Program loading or initiating
    • G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
    • G06F9/44526—Plug-ins; Add-ons

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Data Mining & Analysis (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本申请公开一种网页渲染方法及装置，涉及浏览器技术领域。本申请的方法包括：获取目标网页对应的网页文件和CSS文件，其中，所述目标网页为需要加载目标插件对应的插件窗口的网页；根据所述网页文件和所述CSS文件生成所述目标网页对应的渲染树，其中，所述渲染树中包含所述插件窗口对应的插件窗口元素和插件窗口元素对应的样式属性信息；获取所述插件窗口对应的第一图像，并根据所述第一图像对所述渲染树中的插件窗口元素进行修改处理，其中，所述插件窗口对应的第一图像包含所述插件窗口被加载渲染后，所述插件窗口显示的内容；根据经过修改处理后的所述渲染树对所述目标网页进行渲染处理，并输出显示渲染后的所述目标网页。

Description

网页渲染方法及装置
技术领域
本申请涉及浏览器技术领域，尤其涉及一种网页渲染方法及装置。
背景技术
浏览器是用来检索、展示及传递Web信息资源的应用程序。其中，浏览器厂商为了丰富浏览器的功能，通常会针对需要增加的功能为浏览器开发相应的插件。
然而，插件对应的插件窗口与CSS(层叠样式表，Cascading Style Sheets)样式不兼容，使得无法通过CSS样式限定插件窗口的透明度，从而导致插件窗口会遮挡住网页中的其他元素，影响网页的正常显示，进而会降低用户的用户体验。
发明内容
本申请实施例提供一种网页渲染方法及装置，主要目的在于当待渲染的网页(即目标网页)为需要加载目标插件对应的插件窗口的网页时，避免目标插件对应的插件窗口遮挡住目标网页内的其他元素，从而正常显示目标网页。
为解决上述技术问题，本申请实施例提供如下技术方案：
第一方面，本申请提供了一种网页渲染方法，所述方法包括：
获取目标网页对应的网页文件和CSS文件，其中，所述目标网页为需要加载目标插件对应的插件窗口的网页；
根据所述网页文件和所述CSS文件生成所述目标网页对应的渲染树，其中，所述渲染树中包含所述插件窗口对应的插件窗口元素和插件窗口元素对应的样式属性信息；
获取所述插件窗口对应的第一图像，并根据所述第一图像对所述渲染树中的插件窗口元素进行修改处理，其中，所述插件窗口对应的第一图像包含所述插件窗口被加载渲染后，所述插件窗口显示的内容；
根据经过修改处理后的所述渲染树对所述目标网页进行渲染处理，并输出显示渲染后的所述目标网页。
可选的，所述获取所述插件窗口对应的第一图像，包括：
向目标终端设备发送运行命令，以便所述目标终端设备在根据所述运行命令运行所述目标插件、所述目标插件加载渲染所述插件窗口后，根据所述插件窗口对应的窗口ID，在所述目标插件处获取所述第一图像；
接收所述目标终端设备反馈的所述第一图像。
可选的，所述获取所述插件窗口对应的第一图像，包括：
在后台运行所述目标插件，以便所述目标插件加载渲染所述插件窗口；
根据所述插件窗口对应的窗口ID，在所述目标插件处获取所述第一图像。
可选的，在所述根据经过修改处理后的所述渲染树对所述目标网页进行渲染处理，并输出显示渲染后的所述目标网页之后，所述方法还包括：
采集操作行为数据，其中，所述操作行为数据为用户对所述目标网页中的第一图像进行操作产生的数据；
将所述操作行为数据发送至所述目标终端设备，以便所述目标终端设备在根据所述操作行为数据对所述插件窗口进行相应操作后，根据所述插件窗口对应的窗口ID，在所述目标插件处获取所述插件窗口对应的第二图像，其中，所述插件窗口对应的第二图像包含根据所述操作行为数据对所述插件窗口进行相应操作后，所述插件窗口显示的内容；
接收所述目标终端设备反馈的所述第二图像，并根据所述第二图像对所述渲染树中的插件窗口元素进行修改处理；
根据经过修改处理后的所述渲染树对所述目标网页进行渲染处理，并输出显示渲染后的所述目标网页。
可选的，在所述根据经过修改处理后的所述渲染树对所述目标网页进行渲染处理，并输出显示渲染后的所述目标网页之后，所述方法还包括：
采集操作行为数据；
在后台根据所述操作行为数据对所述插件窗口进行相应操作；
根据所述插件窗口对应的窗口ID，在所述目标插件处获取所述插件窗口对应的第二图像；
根据所述第二图像对所述渲染树中的插件窗口元素进行修改处理；
根据经过修改处理后的所述渲染树对所述目标网页进行渲染处理，并输出显示渲染后的所述目标网页。
可选的，所述根据所述网页文件和所述CSS文件生成所述目标网页对应的渲染树，包括：
根据所述网页文件生成所述目标网页对应的文档对象模型树；
根据所述CSS文件生成所述目标网页对应的CSS对象模型树；
结合所述文档对象模型树和所述CSS对象模型树，以生成目标网页对应的渲染树。
可选的，所述根据所述第一图像对所述渲染树中的插件窗口元素进行修改处理包括：
修改所述插件窗口元素对应的元素标签；
根据所述第一图像对应的存储路径修改所述插件窗口元素对应的元素内容。
可选的，所述修改所述插件窗口元素对应的元素标签，包括：
将所述插件窗口元素对应的元素标签修改为图像类元素对应的元素标签；
所述根据所述第一图像对应的存储路径修改所述插件窗口元素对应的元素内容，包括：
将所述插件窗口元素对应的元素内容修改为所述第一图像对应的存储路径。
第二方面，本申请还提供一种网页渲染装置，所述装置包括：
第一获取单元，用于获取目标网页对应的网页文件和CSS文件，其中，所述目标网页为需要加载目标插件对应的插件窗口的网页；
生成单元，用于根据所述网页文件和所述CSS文件生成所述目标网页对应的渲染树，其中，所述渲染树中包含所述插件窗口对应的插件窗口元素和插件窗口元素对应的样式属性信息；
第二获取单元，用于获取所述插件窗口对应的第一图像，其中，所述插件窗口对应的第一图像包含所述插件窗口被加载渲染后，所述插件窗口显示的内容；
第一修改单元，用于根据所述第一图像对所述渲染树中的插件窗口元素进行修改处理；
第一渲染单元，用于根据经过修改处理后的所述渲染树对所述目标网页进行渲染处理，并输出显示渲染后的所述目标网页。
可选的，所述第二获取单元包括：
发送模块，用于向目标终端设备发送运行命令，以便所述目标终端设备在根据所述运行命令运行所述目标插件、所述目标插件加载渲染所述插件窗口后，根据所述插件窗口对应的窗口ID，在所述目标插件处获取所述第一图像；
接收模块，用于接收所述目标终端设备反馈的所述第一图像。
可选的，所述第二获取单元包括：
运行模块，用于在后台运行所述目标插件，以便所述目标插件加载渲染所述插件窗口；
获取模块，用于根据所述插件窗口对应的窗口ID，在所述目标插件处获取所述第一图像。
可选的，所述装置还包括：
第一采集单元，用于在所述第一渲染单元根据经过修改处理后的所述渲染树对所述目标网页进行渲染处理，并输出显示渲染后的所述目标网页之后，采集操作行为数据，其中，所述操作行为数据为用户对所述目标网页中的第一图像进行操作产生的数据；
发送单元，用于将所述操作行为数据发送至所述目标终端设备，以便所述目标终端设备在根据所述操作行为数据对所述插件窗口进行相应操作后，根据所述插件窗口对应的窗口ID，在所述目标插件处获取所述插件窗口对应的第二图像，其中，所述插件窗口对应的第二图像包含根据所述操作行为数据对所述插件窗口进行相应操作后，所述插件窗口显示的内容；
接收单元，用于接收所述目标终端设备反馈的所述第二图像，并根据所述第二图像对所述渲染树中的插件窗口元素进行修改处理；
第二渲染单元，用于根据经过修改处理后的所述渲染树对所述目标网页进行渲染处理，并输出显示渲染后的所述目标网页。
可选的，所述装置还包括：
第二采集单元，用于在所述第一渲染单元根据经过修改处理后的所述渲染树对所述目标网页进行渲染处理，并输出显示渲染后的所述目标网页之后，采集操作行为数据；
操作单元，用于在后台根据所述操作行为数据对所述插件窗口进行相应操作；
第三获取单元，用于根据所述插件窗口对应的窗口ID，在所述目标插件处获取所述插件窗口对应的第二图像；
第二修改单元，用于根据所述第二图像对所述渲染树中的插件窗口元素进行修改处理；
第三渲染单元，用于根据经过修改处理后的所述渲染树对所述目标网页进行渲染处理，并输出显示渲染后的所述目标网页。
可选的，所述生成单元，具体用于根据所述网页文件生成所述目标网页对应的文档对象模型树；根据所述CSS文件生成所述目标网页对应的CSS对象模型树；结合所述文档对象模型树和所述CSS对象模型树，以生成目标网页对应的渲染树。
可选的，所述第一修改单元包括：
第一修改模块，用于修改所述插件窗口元素对应的元素标签；
第二修改模块，用于根据所述第一图像对应的存储路径修改所述插件窗口元素对应的元素内容。
可选的，所述第一修改模块，具体用于将所述插件窗口元素对应的元素标签修改为图像类元素对应的元素标签；
所述第二修改模块，具体用于将所述插件窗口元素对应的元素内容修改为所述第一图像对应的存储路径。
第三方面，本申请的实施例提供了一种电子设备，所述电子设备包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如第一方面所述的网页渲染方法的步骤。
第四方面，本申请的实施例提供了一种非暂态计算机可读存储介质，所述非暂态计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如第一方面所述的网页渲染方法的步骤。
借由上述技术方案，本申请提供的技术方案至少具有下列优点：
本申请提供一种网页渲染方法及装置，本申请能够在目标浏览器获取得到目标网页对应的网页文件和CSS文件后，由目标浏览器根据目标网页对应的网页文件和CSS文件生成目标网页对应的渲染树，再获取插件窗口对应的第一图像，并根据插件窗口对应的第一图像对渲染树中的插件窗口元素进行修改处理，最后，根据经过修改处理后的渲染树对目标网页进行渲染处理，并输出显示渲染后的目标网页。由于，在根据插件窗口对应的第一图像对渲染树中的插件窗口元素进行修改处理后，便将插件窗口对应的第一图像与渲染树中的插件窗口元素进行绑定，使得目标浏览器在根据经过修改处理后的渲染树对目标网页进行渲染处理时，是根据插件窗口元素对应的样式属性信息将插件窗口对应的第一图像渲染至目标网页中，由于，CSS样式与图像元素兼容，因此，插件窗口元素对应的样式属性信息可以限定插件窗口对应的第一图像的透明度，从而使得在渲染后的目标网页中，插件窗口对应的第一图像并不会遮挡住其他元素，即目标浏览器可以正常显示目标网页。
上述说明仅是本申请技术方案的概述，为了能够更清楚了解本申请的技术手段，而可依照说明书的内容予以实施，并且为了让本申请的上述和其它目的、特征和优点能够更明显易懂，以下特举本申请的具体实施方式。
附图说明
通过参考附图阅读下文的详细描述，本申请示例性实施方式的上述以及其他目的、特征和优点将变得易于理解。在附图中，以示例性而非限制性的方式示出了本申请的若干实施方式，相同或对应的标号表示相同或对应的部分，其中：
图1示出了本申请实施例提供的一种网页渲染方法流程图；
图2示出了本申请实施例提供的另一种网页渲染方法流程图；
图3示出了本申请实施例提供的一种网页渲染装置的组成框图；
图4示出了本申请实施例提供的另一种网页渲染装置的组成框图；
图5示出了本申请实施例提供的一种电子设备的结构框图。
具体实施方式
下面将参照附图更详细地描述本申请的示例性实施方式。虽然附图中显示了本申请的示例性实施方式，然而应当理解，可以以各种形式实现本申请而不应被这里阐述的实施方式所限制。相反，提供这些实施方式是为了能够更透彻地理解本申请，并且能够将本申请的范围完整的传达给本领域的技术人员。
需要注意的是，除非另有说明，本申请使用的技术术语或者科学术语应当为本申请所属领域技术人员所理解的通常意义。
本申请实施例提供一种网页渲染方法，具体如图1所示，该方法包括：
101、获取目标网页对应的网页文件和CSS文件。
其中，目标网页为待渲染的网页，且目标网页为需要加载目标插件对应的插件窗口的网页，目标插件可以为任意一种插件，本申请实施例对此不进行具体限定；其中，目标网页对应的网页文件可以但不限为：HTML文件、XHTML文件等。
其中，本申请实施例中，各个步骤中的执行主体为运行在终端设备中的目标浏览器，终端设备可以但不限于为：计算机、平板电脑、智能手机等等。
在本申请实施例中，当目标浏览器需要渲染目标网页时，目标浏览器需要先获取得到目标网页对应的网页文件和CSS文件。
102、根据网页文件和CSS文件生成目标网页对应的渲染树。
其中，目标网页对应的网页文件中包含插件窗口对应的插件窗口元素，目标网页对应的CSS文件中包含插件窗口元素对应的样式属性信息，目标网页对应的渲染树中包含插件窗口对应的插件窗口元素和插件窗口元素对应的样式属性信息。
在本申请实施例中，目标浏览器在获取得到目标网页对应的网页文件和CSS文件后，便可根据目标网页对应的网页文件和CSS文件生成目标网页对应的渲染树。
103、获取插件窗口对应的第一图像，并根据第一图像对渲染树中的插件窗口元素进行修改处理。
其中，插件窗口对应的第一图像包含插件窗口被加载渲染后，插件窗口显示的内容。
在本申请实施例中，目标浏览器在根据目标网页对应的网页文件和CSS文件生成目标网页对应的渲染树后，便需要获取插件窗口对应的第一图像，并根据插件窗口对应的第一图像对渲染树中的插件窗口元素进行修改处理，以便将插件窗口对应的第一图像与渲染树中的插件窗口元素进行绑定，从而使得后续目标浏览器在根据经过修改处理后的渲染树对目标网页进行渲染处理时，目标浏览器无需如现有技术中一样，先加载插件窗口并运行目标插件，进而由目标插件对插件窗口进行渲染；而是直接将插件窗口对应的第一图像渲染至目标网页中，因为整个渲染过程不涉及插件窗口的加载，而是通过绑定第一图像的渲染树获取渲染后的目标网页，因此通过限定第一图像的透明度，就可以克服现有技术中插件窗口会遮挡住网页中的其他元素，影响网页的正常显示的缺陷。
104、根据经过修改处理后的渲染树对目标网页进行渲染处理，并输出显示渲染后的目标网页。
在本申请实施例中，目标浏览器在根据插件窗口对应的第一图像对渲染树中的插件窗口元素进行修改处理后，便可根据经过修改处理后的渲染树对目标网页进行渲染处理，并输出显示渲染后的目标网页；其中，渲染后的目标网页中显示的是插件窗口对应的第一图像。
需要进行说明的是，目标浏览器在根据经过修改处理后的渲染树对目标网页进行渲染处理时，是根据插件窗口元素对应的样式属性信息将插件窗口对应的第一图像渲染至目标网页中，由于，CSS样式与图像元素兼容，因此，插件窗口元素对应的样式属性信息可以限定插件窗口对应的第一图像的透明度，从而使得在渲染后的目标网页中，插件窗口对应的第一图像并不会遮挡住其他元素，即目标浏览器可以正常显示目标网页。
本申请实施例提供一种网页渲染方法，本申请实施例能够在目标浏览器获取得到目标网页对应的网页文件和CSS文件后，由目标浏览器根据目标网页对应的网页文件和CSS文件生成目标网页对应的渲染树，再获取插件窗口对应的第一图像，并根据插件窗口对应的第一图像对渲染树中的插件窗口元素进行修改处理，最后，根据经过修改处理后的渲染树对目标网页进行渲染处理，并输出显示渲染后的目标网页。由于，在根据插件窗口对应的第一图像对渲染树中的插件窗口元素进行修改处理后，便将插件窗口对应的第一图像与渲染树中的插件窗口元素进行绑定，使得目标浏览器在根据经过修改处理后的渲染树对目标网页进行渲染处理时，是根据插件窗口元素对应的样式属性信息将插件窗口对应的第一图像渲染至目标网页中，由于，CSS样式与图像元素兼容，因此，插件窗口元素对应的样式属性信息可以限定插件窗口对应的第一图像的透明度，从而使得在渲染后的目标网页中，插件窗口对应的第一图像并不会遮挡住其他元素，即目标浏览器可以正常显示目标网页。
以下为了更加详细地说明，本申请实施例提供了另一种网页渲染方法，具体如图2所示，该方法包括：
201、获取目标网页对应的网页文件和CSS文件。
其中，关于步骤201、获取目标网页对应的网页文件和CSS文件，可以参考图1对应部分的描述，本申请实施例此处将不再赘述。
202、根据网页文件和CSS文件生成目标网页对应的渲染树。
具体的，在本步骤中，根据目标网页对应的网页文件和CSS文件生成目标网页对应的渲染树的具体过程为：先根据目标网页对应的网页文件生成目标网页对应的文档对象模型树(即DOM树)，再根据目标网页对应的CSS文件生成目标网页对应的CSS对象模型树(即CSSOM树)，最后结合目标网页对应的DOM树和CSSOM树，从而生成目标网页对应的渲染树。
203、获取插件窗口对应的第一图像。
在本申请实施例中，目标浏览器在根据目标网页对应的网页文件和CSS文件生成目标网页对应的渲染树后，便需要获取插件窗口对应的第一图像。
具体的，在本步骤中，目标浏览器可以通过以下两种方式获取插件窗口对应的第一图像：
(1)首先，向目标终端设备发送运行命令，以便目标终端设备在根据接收到的运行命令运行目标插件、由目标插件加载渲染插件窗口后，根据插件窗口对应的窗口ID，在目标插件处获取插件窗口对应的第一图像；其次，接收目标终端设备反馈的第一图像。其中，目标终端设备不同于安装目标浏览器的终端设备。
(2)首先，在终端设备后台运行目标插件，以便目标插件加载渲染插件窗口；其次，根据插件窗口对应的窗口ID，在目标插件处获取插件窗口对应的第一图像。其中，终端设备后台指运行目标浏览器的终端设备的后台。
204、根据第一图像对渲染树中的插件窗口元素进行修改处理。
在本申请实施例中，目标浏览器在获取得到插件窗口对应的第一图像后，便需要根据插件窗口对应的第一图像对渲染树中的插件窗口元素进行修改处理，其具体过程为：首先，修改插件窗口元素对应的元素标签，即将插件窗口元素对应的元素标签修改为图像类元素对应的元素标签；其次，根据第一图像对应的存储路径修改插件窗口元素对应的元素内容，即将插件窗口元素对应的元素内容修改为第一图像对应的存储路径。
205、根据经过修改处理后的渲染树对目标网页进行渲染处理，并输出显示渲染后的目标网页。
其中，关于步骤205、根据经过修改处理后的渲染树对目标网页进行渲染处理，并输出显示渲染后的目标网页，可以参考图1对应部分的描述，本申请实施例此处将不再赘述。
进一步的，在本申请实施例中，若目标浏览器在步骤203中是基于目标终端设备获取得到插件窗口对应的第一图像，则在目标浏览器输出显示渲染后的目标网页后，当用户对目标网页显示的、插件窗口对应的第一图像进行操作(即用户期望对插件窗口进行操作)时，目标浏览器需要先采集用户对第一图像进行操作所产生的数据(即操作行为数据)；再将采集的操作行为数据发送至目标终端设备，以便目标终端设备在根据接收到的操作行为数据对插件窗口进行相应操作后，根据插件窗口对应的窗口ID，在目标插件处获取插件窗口对应的第二图像，其中，插件窗口对应的第二图像包含根据操作行为数据对插件窗口进行相应操作后，插件窗口显示的内容；然后，接收目标终端设备反馈的第二图像，并根据第二图像对渲染树中的插件窗口元素进行修改处理，即将插件窗口元素对应的元素内容修改为第二图像对应的存储路径；最后，根据经过修改处理后的渲染树对目标网页进行渲染处理，并输出显示渲染后的目标网页。若目标浏览器在步骤203中是基于在终端设备后台运行目标插件获取得到插件窗口对应的第一图像，则在目标浏览器输出显示渲染后的目标网页后，当用户对目标网页显示的、插件窗口对应的第一图像进行操作时，目标浏览器需要先采集用户对第一图像进行操作所产生的数据(即操作行为数据)；再在终端设备后台根据采集的操作行为数据对插件窗口进行相应操作，并根据插件窗口对应的窗口ID，在目标插件处获取插件窗口对应的第二图像；然后，根据第二图像对渲染树中的插件窗口元素进行修改处理；最后，根据经过修改处理后的渲染树对目标网页进行渲染处理，并输出显示渲染后的目标网页。
为了实现上述目的，根据本申请的另一方面，本申请实施例还提供了一种电子设备，所述电子设备包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述所述的网页渲染方法的步骤。
为了实现上述目的，根据本申请的另一方面，本申请实施例还提供了一种非暂态计算机可读存储介质，所述非暂态计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现上述所述的网页渲染方法的步骤。
进一步的，作为对上述图1及图2所示方法的实现，本申请另一实施例还提供了一种网页渲染装置。该装置实施例与前述方法实施例对应，为便于阅读，本装置实施例不再对前述方法实施例中的细节内容进行逐一赘述，但应当明确，本实施例中的装置能够对应实现前述方法实施例中的全部内容。该装置应用于当待渲染的网页(即目标网页)为需要加载目标插件对应的插件窗口的网页时，避免目标插件对应的插件窗口遮挡住目标网页内的其他元素，从而正常显示目标网页，具体如图3所示，该装置包括：
第一获取单元301，用于获取目标网页对应的网页文件和CSS文件，其中，所述目标网页为需要加载目标插件对应的插件窗口的网页；
生成单元302，用于根据所述网页文件和所述CSS文件生成所述目标网页对应的渲染树，其中，所述渲染树中包含所述插件窗口对应的插件窗口元素和插件窗口元素对应的样式属性信息；
第二获取单元303，用于获取所述插件窗口对应的第一图像，其中，所述插件窗口对应的第一图像包含所述插件窗口被加载渲染后，所述插件窗口显示的内容；
第一修改单元304，用于根据所述第一图像对所述渲染树中的插件窗口元素进行修改处理；
第一渲染单元305，用于根据经过修改处理后的所述渲染树对所述目标网页进行渲染处理，并输出显示渲染后的所述目标网页。
进一步的，如图4所示，第二获取单元303包括：
发送模块3031，用于向目标终端设备发送运行命令，以便所述目标终端设备在根据所述运行命令运行所述目标插件、所述目标插件加载渲染所述插件窗口后，根据所述插件窗口对应的窗口ID，在所述目标插件处获取所述第一图像；
接收模块3032，用于接收所述目标终端设备反馈的所述第一图像。
进一步的，如图4所示，第二获取单元303包括：
运行模块3033，用于在后台运行所述目标插件，以便所述目标插件加载渲染所述插件窗口；
获取模块3034，用于根据所述插件窗口对应的窗口ID，在所述目标插件处获取所述第一图像。
进一步的，如图4所示，该装置还包括：
第一采集单元306，用于在第一渲染单元305根据经过修改处理后的所述渲染树对所述目标网页进行渲染处理，并输出显示渲染后的所述目标网页之后，采集操作行为数据，其中，所述操作行为数据为用户对所述目标网页中的第一图像进行操作产生的数据；
发送单元307，用于将所述操作行为数据发送至所述目标终端设备，以便所述目标终端设备在根据所述操作行为数据对所述插件窗口进行相应操作后，根据所述插件窗口对应的窗口ID，在所述目标插件处获取所述插件窗口对应的第二图像，其中，所述插件窗口对应的第二图像包含根据所述操作行为数据对所述插件窗口进行相应操作后，所述插件窗口显示的内容；
接收单元308，用于接收所述目标终端设备反馈的所述第二图像，并根据所述第二图像对所述渲染树中的插件窗口元素进行修改处理；
第二渲染单元309，用于根据经过修改处理后的所述渲染树对所述目标网页进行渲染处理，并输出显示渲染后的所述目标网页。
进一步的，如图4所示，该装置还包括：
第二采集单元310，用于在第一渲染单元305根据经过修改处理后的所述渲染树对所述目标网页进行渲染处理，并输出显示渲染后的所述目标网页之后，采集操作行为数据；
操作单元311，用于在后台根据所述操作行为数据对所述插件窗口进行相应操作；
第三获取单元312，用于根据所述插件窗口对应的窗口ID，在所述目标插件处获取所述插件窗口对应的第二图像；
第二修改单元313，用于根据所述第二图像对所述渲染树中的插件窗口元素进行修改处理；
第三渲染单元314，用于根据经过修改处理后的所述渲染树对所述目标网页进行渲染处理，并输出显示渲染后的所述目标网页。
进一步的，如图4所示，生成单元302，具体用于根据所述网页文件生成所述目标网页对应的文档对象模型树；根据所述CSS文件生成所述目标网页对应的CSS对象模型树；结合所述文档对象模型树和所述CSS对象模型树，以生成目标网页对应的渲染树。
进一步的，如图4所示，第一修改单元304包括：
第一修改模块3041，用于修改所述插件窗口元素对应的元素标签；
第二修改模块3042，用于根据所述第一图像对应的存储路径修改所述插件窗口元素对应的元素内容。
进一步的，如图4所示，第一修改模块3041，具体用于将所述插件窗口元素对应的元素标签修改为图像类元素对应的元素标签；
第二修改模块3042，具体用于将所述插件窗口元素对应的元素内容修改为所述第一图像对应的存储路径。
本申请实施例提供一种网页渲染方法及装置，本申请实施例能够在目标浏览器获取得到目标网页对应的网页文件和CSS文件后，由目标浏览器根据目标网页对应的网页文件和CSS文件生成目标网页对应的渲染树，再获取插件窗口对应的第一图像，并根据插件窗口对应的第一图像对渲染树中的插件窗口元素进行修改处理，最后，根据经过修改处理后的渲染树对目标网页进行渲染处理，并输出显示渲染后的目标网页。由于，在根据插件窗口对应的第一图像对渲染树中的插件窗口元素进行修改处理后，便将插件窗口对应的第一图像与渲染树中的插件窗口元素进行绑定，使得目标浏览器在根据经过修改处理后的渲染树对目标网页进行渲染处理时，是根据插件窗口元素对应的样式属性信息将插件窗口对应的第一图像渲染至目标网页中，由于，CSS样式与图像元素兼容，因此，插件窗口元素对应的样式属性信息可以限定插件窗口对应的第一图像的透明度，从而使得在渲染后的目标网页中，插件窗口对应的第一图像并不会遮挡住其他元素，即目标浏览器可以正常显示目标网页。
所述网页渲染装置包括处理器和存储器，上述第一获取单元、生成单元、第二获取单元、第一修改单元和第一渲染单元等均作为程序单元存储在存储器中，由处理器执行存储在存储器中的上述程序单元来实现相应的功能。
处理器中包含内核，由内核去存储器中调取相应的程序单元。内核可以设置一个或以上，通过调整内核参数来避免目标插件对应的插件窗口遮挡住目标网页内的其他元素，从而正常显示目标网页。
本申请实施例提供了一种电子设备40，如图5所示，电子设备40包括存储器401、处理器402、总线403及存储在存储器401上并可在处理器402上运行的计算机程序；其中，存储器401和处理器402通过总线403完成相互间的通信；处理器402执行所述计算机程序时实现上述所述的网页渲染方法的步骤。
本申请实施例提供了一种设备，设备包括处理器、存储器及存储在存储器上并可在处理器上运行的程序，处理器执行程序时实现以下步骤：
获取目标网页对应的网页文件和CSS文件，其中，所述目标网页为需要加载目标插件对应的插件窗口的网页；
根据所述网页文件和所述CSS文件生成所述目标网页对应的渲染树，其中，所述渲染树中包含所述插件窗口对应的插件窗口元素和插件窗口元素对应的样式属性信息；
获取所述插件窗口对应的第一图像，并根据所述第一图像对所述渲染树中的插件窗口元素进行修改处理，其中，所述插件窗口对应的第一图像包含所述插件窗口被加载渲染后，所述插件窗口显示的内容；
根据经过修改处理后的所述渲染树对所述目标网页进行渲染处理，并输出显示渲染后的所述目标网页。
进一步的，所述获取所述插件窗口对应的第一图像，包括：
向目标终端设备发送运行命令，以便所述目标终端设备在根据所述运行命令运行所述目标插件、所述目标插件加载渲染所述插件窗口后，根据所述插件窗口对应的窗口ID，在所述目标插件处获取所述第一图像；
接收所述目标终端设备反馈的所述第一图像。
进一步的，所述获取所述插件窗口对应的第一图像，包括：
在后台运行所述目标插件，以便所述目标插件加载渲染所述插件窗口；
根据所述插件窗口对应的窗口ID，在所述目标插件处获取所述第一图像。
进一步的，在所述根据经过修改处理后的所述渲染树对所述目标网页进行渲染处理，并输出显示渲染后的所述目标网页之后，所述方法还包括：
采集操作行为数据，其中，所述操作行为数据为用户对所述目标网页中的第一图像进行操作产生的数据；
将所述操作行为数据发送至所述目标终端设备，以便所述目标终端设备在根据所述操作行为数据对所述插件窗口进行相应操作后，根据所述插件窗口对应的窗口ID，在所述目标插件处获取所述插件窗口对应的第二图像，其中，所述插件窗口对应的第二图像包含根据所述操作行为数据对所述插件窗口进行相应操作后，所述插件窗口显示的内容；
接收所述目标终端设备反馈的所述第二图像，并根据所述第二图像对所述渲染树中的插件窗口元素进行修改处理；
根据经过修改处理后的所述渲染树对所述目标网页进行渲染处理，并输出显示渲染后的所述目标网页。
进一步的，在所述根据经过修改处理后的所述渲染树对所述目标网页进行渲染处理，并输出显示渲染后的所述目标网页之后，所述方法还包括：
采集操作行为数据；
在后台根据所述操作行为数据对所述插件窗口进行相应操作；
根据所述插件窗口对应的窗口ID，在所述目标插件处获取所述插件窗口对应的第二图像；
根据所述第二图像对所述渲染树中的插件窗口元素进行修改处理；
根据经过修改处理后的所述渲染树对所述目标网页进行渲染处理，并输出显示渲染后的所述目标网页。
进一步的，所述根据所述第一图像对所述渲染树中的插件窗口元素进行修改处理包括：
修改所述插件窗口元素对应的元素标签；
根据所述第一图像对应的存储路径修改所述插件窗口元素对应的元素内容。
本申请还提供了一种计算机程序产品，当在数据处理设备上执行时，适于执行初始化有如下方法步骤的程序代码：获取目标网页对应的网页文件和CSS文件，其中，所述目标网页为需要加载目标插件对应的插件窗口的网页；根据所述网页文件和所述CSS文件生成所述目标网页对应的渲染树，其中，所述渲染树中包含所述插件窗口对应的插件窗口元素和插件窗口元素对应的样式属性信息；获取所述插件窗口对应的第一图像，并根据所述第一图像对所述渲染树中的插件窗口元素进行修改处理，其中，所述插件窗口对应的第一图像包含所述插件窗口被加载渲染后，所述插件窗口显示的内容；根据经过修改处理后的所述渲染树对所述目标网页进行渲染处理，并输出显示渲染后的所述目标网页。
本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。
存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。存储器是计算机可读介质的示例。
计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。
还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括要素的过程、方法、商品或者设备中还存在另外的相同要素。
本领域技术人员应明白，本申请的实施例可提供为方法、系统或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
以上仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。

Claims (11)

1.一种网页渲染方法，其特征在于，所述方法包括：
获取目标网页对应的网页文件和CSS文件，其中，所述目标网页为需要加载目标插件对应的插件窗口的网页；
根据所述网页文件和所述CSS文件生成所述目标网页对应的渲染树，其中，所述渲染树中包含所述插件窗口对应的插件窗口元素和插件窗口元素对应的样式属性信息；
获取所述插件窗口对应的第一图像，并根据所述第一图像对所述渲染树中的插件窗口元素进行修改处理，其中，所述插件窗口对应的第一图像包含所述插件窗口被加载渲染后，所述插件窗口显示的内容；
根据经过修改处理后的所述渲染树对所述目标网页进行渲染处理，并输出显示渲染后的所述目标网页。
2.根据权利要求1所述的方法，其特征在于，所述获取所述插件窗口对应的第一图像，包括：
向目标终端设备发送运行命令，以便所述目标终端设备在根据所述运行命令运行所述目标插件、所述目标插件加载渲染所述插件窗口后，根据所述插件窗口对应的窗口ID，在所述目标插件处获取所述第一图像；
接收所述目标终端设备反馈的所述第一图像。
3.根据权利要求1所述的方法，其特征在于，所述获取所述插件窗口对应的第一图像，包括：
在后台运行所述目标插件，以便所述目标插件加载渲染所述插件窗口；
根据所述插件窗口对应的窗口ID，在所述目标插件处获取所述第一图像。
4.根据权利要求2所述的方法，其特征在于，在所述根据经过修改处理后的所述渲染树对所述目标网页进行渲染处理，并输出显示渲染后的所述目标网页之后，所述方法还包括：
采集操作行为数据，其中，所述操作行为数据为用户对所述目标网页中的第一图像进行操作产生的数据；
将所述操作行为数据发送至所述目标终端设备，以便所述目标终端设备在根据所述操作行为数据对所述插件窗口进行相应操作后，根据所述插件窗口对应的窗口ID，在所述目标插件处获取所述插件窗口对应的第二图像，其中，所述插件窗口对应的第二图像包含根据所述操作行为数据对所述插件窗口进行相应操作后，所述插件窗口显示的内容；
接收所述目标终端设备反馈的所述第二图像，并根据所述第二图像对所述渲染树中的插件窗口元素进行修改处理；
根据经过修改处理后的所述渲染树对所述目标网页进行渲染处理，并输出显示渲染后的所述目标网页。
5.根据权利要求3所述的方法，其特征在于，在所述根据经过修改处理后的所述渲染树对所述目标网页进行渲染处理，并输出显示渲染后的所述目标网页之后，所述方法还包括：
采集操作行为数据；
在后台根据所述操作行为数据对所述插件窗口进行相应操作；
根据所述插件窗口对应的窗口ID，在所述目标插件处获取所述插件窗口对应的第二图像；
根据所述第二图像对所述渲染树中的插件窗口元素进行修改处理；
根据经过修改处理后的所述渲染树对所述目标网页进行渲染处理，并输出显示渲染后的所述目标网页。
6.根据权利要求1所述的方法，其特征在于，所述根据所述网页文件和所述CSS文件生成所述目标网页对应的渲染树，包括：
根据所述网页文件生成所述目标网页对应的文档对象模型树；
根据所述CSS文件生成所述目标网页对应的CSS对象模型树；
结合所述文档对象模型树和所述CSS对象模型树，以生成目标网页对应的渲染树。
7.根据权利要求1-6中任一项所述的方法，其特征在于，所述根据所述第一图像对所述渲染树中的插件窗口元素进行修改处理包括：
修改所述插件窗口元素对应的元素标签；
根据所述第一图像对应的存储路径修改所述插件窗口元素对应的元素内容。
8.根据权利要求7所述的方法，其特征在于，所述修改所述插件窗口元素对应的元素标签，包括：
将所述插件窗口元素对应的元素标签修改为图像类元素对应的元素标签；
所述根据所述第一图像对应的存储路径修改所述插件窗口元素对应的元素内容，包括：
将所述插件窗口元素对应的元素内容修改为所述第一图像对应的存储路径。
9.一种网页渲染装置，其特征在于，所述装置包括：
第一获取单元，用于获取目标网页对应的网页文件和CSS文件，其中，所述目标网页为需要加载目标插件对应的插件窗口的网页；
生成单元，用于根据所述网页文件和所述CSS文件生成所述目标网页对应的渲染树，其中，所述渲染树中包含所述插件窗口对应的插件窗口元素和插件窗口元素对应的样式属性信息；
第二获取单元，用于获取所述插件窗口对应的第一图像，其中，所述插件窗口对应的第一图像包含所述插件窗口被加载渲染后，所述插件窗口显示的内容；
第一修改单元，用于根据所述第一图像对所述渲染树中的插件窗口元素进行修改处理；
第一渲染单元，用于根据经过修改处理后的所述渲染树对所述目标网页进行渲染处理，并输出显示渲染后的所述目标网页。
10.一种电子设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1至8任一项所述网页渲染方法的步骤。
11.一种非暂态计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至8任一项所述网页渲染方法的步骤。
CN202111582464.4A 2021-12-22 2021-12-22 网页渲染方法及装置 Pending CN114254229A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202111582464.4A CN114254229A (zh) 2021-12-22 2021-12-22 网页渲染方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202111582464.4A CN114254229A (zh) 2021-12-22 2021-12-22 网页渲染方法及装置

Publications (1)

Publication Number Publication Date
CN114254229A true CN114254229A (zh) 2022-03-29

Family

ID=80794326

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202111582464.4A Pending CN114254229A (zh) 2021-12-22 2021-12-22 网页渲染方法及装置

Country Status (1)

Country Link
CN (1) CN114254229A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114896531A (zh) * 2022-04-27 2022-08-12 北京聚通达科技股份有限公司 图像处理的方法、装置、电子设备及存储介质

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114896531A (zh) * 2022-04-27 2022-08-12 北京聚通达科技股份有限公司 图像处理的方法、装置、电子设备及存储介质
CN114896531B (zh) * 2022-04-27 2023-03-24 北京聚通达科技股份有限公司 图像处理的方法、装置、电子设备及存储介质

Similar Documents

Publication Publication Date Title
CN106933887B (zh) 一种数据可视化方法及装置
US7188112B1 (en) Method, system, and apparatus for exposing server properties to a client application
CN110795649A (zh) 目标页面展示方法、装置、系统及电子设备
US8959426B1 (en) Loading customer-supplied network page generation code
CN112347404A (zh) Spa页面渲染方法、设备、系统及存储介质
CN112612982A (zh) 网页预加载方法、装置及计算机设备
CN106919620B (zh) 单页面处理方法及装置
CN109558548B (zh) 一种消除css样式冗余的方法及相关产品
CN114254229A (zh) 网页渲染方法及装置
CN114329281A (zh) 渲染服务器、网页渲染方法及装置
CN116009863B (zh) 前端页面渲染方法、设备及存储介质
CN112527424A (zh) 用于弹窗的控制方法及装置
CN103838575A (zh) 一种基于extjs框架的插件式页面定制实现方法
CN109002292B (zh) 一种基于网页弹出层的弹框实现方法及系统
CN114861103B (zh) 页面回溯方法及其装置、介质和电子设备
CN113489678A (zh) 网络协议切换方法、装置、计算设备及存储介质
CN110020285B (zh) 柱状图的处理方法及装置
CN114676097A (zh) 一种ofd文件处理方法、装置、设备及介质
CN112558964A (zh) 一种网页生成方法、计算机设备及存储介质
CN111125565A (zh) 一种在应用中输入信息的方法与设备
CN112256992A (zh) 一种融合多链接地址的信息流的原生渲染的方法与设备
CN112541327A (zh) 一种数据读取方法、装置、电子设备及存储介质
CN113297827B (zh) 一种呈现内容信息的方法与设备
CN114238819A (zh) 网页渲染方法及装置
CN111079038B (zh) 一种在应用中输入信息的方法与设备

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
CB02 Change of applicant information
CB02 Change of applicant information

Country or region after: China

Address after: 100000 No. 330, floor 3, Building 102, No. 28, Xinjiekou Wai Street, Xicheng District, Beijing

Applicant after: Beijing Shengming Technology Co.,Ltd.

Applicant after: Qianxin Wangshen information technology (Beijing) Co.,Ltd.

Address before: 100000 No. 330, floor 3, Building 102, No. 28, Xinjiekou Wai Street, Xicheng District, Beijing

Applicant before: Beijing Shengming Technology Co.,Ltd.

Country or region before: China

Applicant before: LEGENDSEC INFORMATION TECHNOLOGY (BEIJING) Inc.