CN112799745A - 一种页面显示控制方法及装置 - Google Patents
一种页面显示控制方法及装置 Download PDFInfo
- Publication number
- CN112799745A CN112799745A CN201911114212.1A CN201911114212A CN112799745A CN 112799745 A CN112799745 A CN 112799745A CN 201911114212 A CN201911114212 A CN 201911114212A CN 112799745 A CN112799745 A CN 112799745A
- Authority
- CN
- China
- Prior art keywords
- page
- browser
- native
- displayed
- main page
- 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.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 73
- 230000001960 triggered effect Effects 0.000 claims description 13
- 239000000126 substance Substances 0.000 claims description 5
- 238000009877 rendering Methods 0.000 claims description 4
- 230000004044 response Effects 0.000 claims description 4
- 238000012544 monitoring process Methods 0.000 claims description 3
- 230000008569 process Effects 0.000 abstract description 17
- 238000010586 diagram Methods 0.000 description 18
- 238000004590 computer program Methods 0.000 description 11
- 238000012545 processing Methods 0.000 description 11
- 230000006870 function Effects 0.000 description 4
- 230000004048 modification Effects 0.000 description 4
- 238000012986 modification Methods 0.000 description 4
- 230000008859 change Effects 0.000 description 2
- 238000003491 array Methods 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000004891 communication Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000004519 manufacturing process Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000002093 peripheral effect Effects 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
- 239000002699 waste material Substances 0.000 description 1
Images
Classifications
-
- 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/451—Execution arrangements for user interfaces
-
- 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
- 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
Abstract
本申请涉及互联网技术领域，特别涉及一种页面显示控制方法及装置，用以解决目前的网页显示方案在加载主页面的过程中显示的页面内容单一的问题。本申请实施例应用插件监控到浏览器在显示窗口中加载完成主页面时，获取主页面数据；根据对应浏览器的页面模板，将主页面划分成多个区域，确定每个区域对应显示的主页面文件；生成原生页面对应的布局信息；生成包含布局信息和每个区域对应显示的主页面文件的原生页面参数，以使浏览器下次启动加载主页面之前，根据原生页面参数在显示窗口中显示原生页面。本申请实施例在浏览器加载主页面的过程中，向用户展示当前浏览器显示窗口内能够显示的原生页面，避免用户只能看到空白页面，提升用户体验。
Description
技术领域
本申请涉及互联网技术领域，特别涉及一种页面显示控制方法及装置。
背景技术
浏览器是一种用于检索并展示信息资源的应用程序，这些信息资源可以为网页、图片、影音或其他内容，它们由统一资源标志符标志，信息资源中的超链接可使用户方便地浏览相关信息。
使用浏览器浏览网页时往往需要用户等待浏览器获取网页对应的数据对页面进行加载，在使用基于网页的应用超文本标记语言的第五次重大修改(H5，Hyper TextMarkup Language 5)方案进行网页显示时，浏览器需要下载用于加载网页的数据，下载完成后再对获得的数据进行处理从而展示页面，由于加载过程有一定时长，在页面加载完成之前，浏览器只能给用户展示空白的页面，需要用户等待页面全部加载完成后才能进行操作。因此，目前的网页显示方案在加载主页面的过程中显示的页面内容单一。
发明内容
本实施例提供一种页面显示控制方法及装置，用以解决目前的网页显示方案在加载主页面的过程中显示的页面内容单一的问题。
第一方面，本申请实施例提供一种页面显示控制方法，包括：
应用插件监控到浏览器在显示窗口中加载完成主页面时，获取所述浏览器加载完成后的主页面数据；
根据对应所述浏览器并用于表示区域划分方式的页面模板，将所述主页面划分成多个区域，并根据所述主页面数据确定每个区域对应显示的主页面文件；
根据所述多个区域的相对位置关系和每个区域的大小生成原生页面对应的布局信息；
生成包含所述布局信息和每个区域对应显示的主页面文件的原生页面参数，以使所述浏览器下次启动加载所述主页面之前，根据所述原生页面参数在显示窗口中显示所述原生页面。
第二方面，本申请实施例提供一种页面显示控制方法，包括：
响应打开浏览器的操作指令，获取应用插件生成的原生页面参数，所述原生页面参数为所述应用插件根据所述浏览器之前加载完成的主页面生成的，所述原生页面参数包含布局信息和每个区域对应显示的主页面文件，所述布局信息是根据多个区域的相对位置关系和每个区域的大小生成的，所述区域是所述应用插件将所述浏览器之前加载完成的主页面划分得到的；
根据所述浏览器的显示窗口的大小和所述布局信息，从所述多个区域中确定出能够在所述显示窗口显示的至少一个第一显示区域；
根据所述布局信息和每个第一显示区域对应显示的主页面文件生成在所述浏览器的显示窗口中显示的原生页面，并在所述显示窗口中进行显示；
在所述浏览器的主页面加载完成后，使用加载完成后的主页面替换所述原生页面。
第三方面，本申请实施例提供一种页面显示控制装置，包括：
第一获取单元，用于监控到浏览器在显示窗口中加载完成主页面时，获取所述浏览器加载完成后的主页面数据；
第一确定单元，用于根据对应所述浏览器并用于表示区域划分方式的页面模板，将所述主页面划分成多个区域，并根据所述主页面数据确定每个区域对应显示的主页面文件；
第二确定单元，用于根据所述多个区域的相对位置关系和每个区域的大小生成原生页面对应的布局信息；
生成单元，用于生成包含所述布局信息和每个区域对应显示的主页面文件的原生页面参数，以使所述浏览器下次启动加载所述主页面之前，根据所述原生页面参数在显示窗口中显示所述原生页面。
第四方面，本申请实施例提供一种页面显示控制装置，包括：
第二获取单元，用于响应打开浏览器的操作指令，获取应用插件生成的原生页面参数，所述原生页面参数为所述应用插件根据所述浏览器之前加载完成的主页面生成的，所述原生页面参数包含布局信息和每个区域对应显示的主页面文件，所述布局信息是根据多个区域的相对位置关系和每个区域的大小生成的，所述区域是所述应用插件将所述浏览器之前加载完成的主页面划分得到的；
计算单元，用于根据所述浏览器的显示窗口的大小和所述布局信息，从所述多个区域中确定出能够在所述显示窗口显示的至少一个第一显示区域；
显示单元，用于根据所述布局信息和每个第一显示区域对应显示的主页面文件生成在所述浏览器的显示窗口中显示的原生页面，并在所述显示窗口中进行显示；
替换单元，用于在所述浏览器的主页面加载完成后，使用加载完成后的主页面替换所述原生页面。
第五方面，本申请实施例提供一种电子设备，包括：
至少一个处理器；以及
与所述至少一个处理器通信连接的存储器；其中，
所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行本申请提供的应用插件侧的页面显示控制方法。
第六方面，本申请实施例提供一种电子设备，包括：
至少一个处理器；以及
与所述至少一个处理器通信连接的存储器；其中，
所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行本申请提供的浏览器客户端侧的页面显示控制方法。
第七方面，本申请实施例提供一种计算机可读介质，存储有计算机可执行指令，所述计算机可执行指令用于执行本申请提供的页面显示控制方法。
第八方面，本申请实施例提供一种计算机可读介质，存储有计算机可执行指令，所述计算机可执行指令用于执行本申请提供的页面显示控制方法。
本申请有益效果：
基于本申请实施例提供的页面显示控制方法，在浏览器加载主页面的过程中，向用户展示当前浏览器显示窗口内能够显示的原生页面，可以快速根据划分的区域生成当前显示窗口的原生页面并显示给用户，由于仅生成当前显示窗口对应的原生页面，可以提高原生页面的生成效率，进一步缩短用户等待的时间，在浏览器的主页面加载过程中，向用户呈现原生页面，避免用户只能看到空白页面，从而提升用户体验。
附图说明
图1为本申请实施例提供的页面显示控制的应用场景示意图；
图2为本申请实施例应用插件侧页面显示控制方法流程图；
图3为本申请实施例一种页面模板示意图；
图4为本申请实施例一种划分区域后的主页面示意图；
图5为本申请实施例浏览器客户端侧页面显示控制方法流程图；
图6为本申请实施例一种浏览器显示窗口示意图；
图7为本申请实施例一种确定出的第一显示区域示意图；
图8为本申请实施例一种确定出的第二显示区域示意图；
图9为本申请实施例一种页面显示控制的方法完整流程示意图；
图10为本申请实施例第一种页面显示控制装置的结构示意图；
图11为本申请实施例第二种页面显示控制装置的结构示意图；
图12为本申请实施例应用插件侧电子设备的结构示意图；
图13为本申请实施例浏览器客户端侧电子设备的结构示意图；
图14为本申请实施例计算装置的结构示意图。
具体实施方式
为了使本领域普通人员更好地理解本公开的技术方案，下面将结合附图，对本公开实施例中的技术方案进行清楚、完整地描述。
需要说明的是，本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例能够以除了在这里图示或描述的那些以外的顺序实施。以下示例性实施例中所描述的实施方式并不代表与本申请相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本申请的一些方面相一致的装置和方法的例子。
下面对文中出现的一些术语进行解释：
1、本申请实施例中术语“和/或”，描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。
2、本申请实施例中术语“浏览器”，是一种用于检索并展示信息资源的应用程序。这些信息资源可为网页、图片、影音或其他内容，它们由统一资源标志符标志，信息资源中的超链接可使用户方便地浏览相关信息。
3、本申请实施例中术语“渲染”，是浏览器根据网页对应的各项资源，输出可视化的结果的过程。
4、本申请实施例中术语“元素”，是构成网页的基本元素，包括：文字、图片、音频、动画、视频等。
5、本申请实施例中术语“属性”，是网页基本元素对应的参数，用以描述元素的组成及内容，包括：文本、链接、字号、字体、坐标、颜色等。
现有技术中，浏览器响应打开的操作指令后，开始加载浏览器的主页面，在浏览器加载主页面的过程中，浏览器只能向用户展示一个空白的页面，用户在等待期间不能进行任何操作。为了解决现有技术中网页显示方案在加载主页面的过程中显示的页面内容单一的问题，本申请实施例给出了一种可选的解决方案。
本申请实施例一种可选的应用场景如图1所示，包括应用插件11以及浏览器客户端12。应用插件11可以独立于浏览器客户端12的进程运行，应用插件11在监控到浏览器在显示窗口中加载完成主页面后，根据对应浏览器并用于表示区域划分的页面模板将主页面划分成多个区域，根据主页面数据确定每个区域对应显示的主页面文件，以及根据划分后的多个区域的相对位置关系和每个区域的大小生成原生页面对应的布局信息；应用插件11将布局信息和每个区域对应显示的主页面文件作为原生页面对应的原生页面参数，并将原生页面参数存储至共享存储区。浏览器客户端12响应用户触发的打开浏览器的操作指令，获取应用插件生成的存储在共享存储空间中的原生页面参数，浏览器客户端12根据浏览器当前显示窗口的大小和原生页面参数中的布局信息，从原生页面的多个区域中确定能够在显示窗口显示的至少一个第一显示区域，并根据布局信息和每个第一显示区域对应显示的主页面文件生成在浏览器的显示窗口中显示的原生页面，并在显示窗口中进行显示，浏览器客户端12在检测到浏览器的主页面加载完成后，使用加载完成后的主页面替换原生页面。基于本申请实施例提供的页面显示控制方法，在浏览器加载主页面的过程中，向用户展示当前浏览器显示窗口内能够显示的原生页面，可以快速根据划分的区域生成当前显示窗口的原生页面并显示给用户，由于仅生成当前显示窗口对应的原生页面，可以提高原生页面的生成效率，进一步缩短用户等待的时间，在浏览器的主页面加载过程中，向用户呈现原生页面，避免用户只能看到空白页面，从而提升用户体验。
下面结合上述描述的应用场景，参考图2-图4来描述本申请示例性实施方式提供的应用插件侧的页面显示控制方法，参考图5-图8来描述本申请示例性实施方式提供的浏览器客户端侧的页面显示控制的方法。需要注意的是，上述应用场景仅是为了便于理解本申请的精神和原理而示出，本申请的实施方式在此方面不受任何限制。相反，本申请的实施方式可以应用于适用的任何场景。
下面针对应用插件侧的页面显示控制方法和浏览器客户端侧的页面显示控制方法分别进行说明。
一、应用插件侧页面显示控制方法。
如图2所示，为本申请实施例提供的页面显示控制方法流程示意图，该方法可以包括以下步骤：
步骤S21、应用插件监控到浏览器在显示窗口中加载完成主页面时，获取浏览器加载完成后的主页面数据；
需要说明的是，浏览器的主页面为浏览器客户端响应打开浏览器的操作后自动加载的页面，通常为浏览器客户端预设的默认主页，可以为导航页，也可以为具体网站的主页。
步骤S22、根据对应浏览器并用于表示区域划分方式的页面模板，将主页面划分成多个区域，并根据主页面数据确定每个区域对应显示的主页面文件；
其中，用于表示区域划分方式的页面模板为应用插件预存在共享存储空间中的，且页面模板与浏览器是一一对应的。
一种可能的实施方式，每个目标区域对应的页面文件可以为基于XML描述语法生成的XML描述文件。
步骤S23、根据多个区域的相对位置关系和每个区域的大小生成原生页面对应的布局信息；
步骤S24、生成包含布局信息和每个区域对应显示的主页面文件的原生页面参数，以使浏览器下次启动加载主页面之前，根据原生页面参数在显示窗口中显示原生页面。
基于本申请实施例提供的页面显示控制方法，应用插件在监控到浏览器的主页面加载完成后，根据对应浏览器的页面模板将主页面划分为多个区域，根据主页面数据确定每个区域对应显示的主页面文件，并根据多个区域的相对位置关系及区域大小生成布局信息，生成包含布局信息和每个区域对应显示的主页面文件的原生页面参数。本申请实施例提供的页面显示控制方法，可以生成原生页面参数，其中将主页面根据对应浏览器的页面模板进行区域划分后存储每个区域对应显示的主页面文件，为浏览器客户端根据区域显示原生文件创造了条件，以使浏览器客户端在加载主页面过程中根据显示窗口的大小，仅根据显示窗口对应区域的主页面文件显示原生页面，提升原生页面浏览的流畅度，且每个区域对应显示的主页面文件可独立更新，可以对没有发生变化的区域不进行主页面文件的更新，节约内存资源。
在步骤S23中，根据多个区域的相对位置关系和每个区域的大小生成原生页面对应的布局信息，其中多个区域的相对位置关系可以通过多个区域的排列方式进行表示，如图3所示的页面模板，将主页面根据该页面模板进行区域划分，得到如图4所示的划分区域后的主页面，假设各个区域的区域标识为图4中各个区域对应的数字，则可以获取多个区域的排列方式以及每个区域的大小生成布局信息，例如：区域1的大小为800*80；区域2的大小为800*80，区域2位于区域1的下方；区域3的大小为500*180，区域3位于区域2的下方，位于区域4的左侧；区域4的大小为300*180，区域4位于区域2的下方，位于区域3的左侧；区域5的大小为500*220，区域5位于区域3的下方，位于区域6的左侧；区域6的大小为300*220，区域6位于区域4的下方，位于区域5的右侧。
一种可能的实施方式，通过下列方式根据主页面数据确定每个区域对应显示的主页面文件：
分别针对每个区域，从该区域对应的主页面数据中提取元素和元素对应的属性，根据提取出的元素和元素对应的属性生成该区域对应显示的主页面文件。
可选的，区域中包含的元素可以为：文本、图片、直线、嵌套页面、搜索框等，提取元素对应的属性时，可以将需要提取的属性填入如表1所示的元素属性表。
| 标签 | 参数 | 说明 | 取值 | 默认 |
| TextBlock | Text | 文本 | — | 必填 |
| TextBlock* | Uid | 链接 | — | 必填 |
| TextBlock | Foreground | 颜色 | 6/8位色值 | #000000 |
| TextBlock | FontFamily | 字体 | — | MicrosoftYaHei |
| TextBlock | FontSize | 字号 | 正整数 | 14 |
| Image | Source | 来源 | — | 必填 |
| Line | X1/Y1/X2/Y2 | 坐标 | 正整数 | 必填 |
| Frame | Source | 来源 | — | 必填 |
| TextBlock* | Name | — | XX搜索引擎 | 必填 |
表1：元素属性表
在具体实施时，一种可选的实施方式，浏览器插件可以使用模板引擎Handlebars提取每个区域对应的主页面数据中的元素，并获取元素对应的属性对元素属性表填充数据，生成该区域对应显示的主页面文件。
其中，通过使用模板引擎Handlebars提取元素及该元素对应的属性，使用程序实现时，可以分别获取XML页面模板和浏览器主页面(HTML页面)代码，提取浏览器主页面代码中的元素及其对应的属性对XML页面模板进行填充生成XML页面代码，例如：
XML页面模板为：
HTML页面代码为：
则生成的XML页面代码为：
<StackPanel Orientation＝"Horizontal">
<TextBlock Text＝"QQ浏览器"Uid＝"https://browser.qq.com"></TextBlock>
<TextBlock Text＝"上网导航"Uid＝"https://daohang.qq.com"></TextBlock>
</StackPanel>
一种可选的实施方式，生成包含布局信息和每个区域对应显示的主页面文件的原生页面参数之后，将原生页面参数存储在预设的共享存储空间中。
可选的，在应用插件生成原生页面参数之后，可以将原生页面参数中每个区域对应显示的主页面文件与共享存储空间中对应区域的主页面文件进行对比，如果主页面文件一致则该区域对应显示的主页面文件将不再存储，而是继续使用共享存储空间中该区域的主页面文件。
在具体实施中，打开浏览器客户端后，浏览器客户端加载完成的主页面相比于上一次浏览器客户端加载完成的主页面，并不是所有区域的内容都会发生变化，例如图4所示的划分区域后的主页面，区域4的内容为新闻推荐，则该区域在每次浏览器加载完成后相比于上一次都可能发生变化，但区域1的内容为上网导航，该区域在每次浏览器加载完成后相比于上一次发生变化的可能性不大，针对在浏览器本次加载完成的主页面和浏览器上一次加载完成的主页面的显示内容未发生变化的区域，如果对该区域对应显示的主页面文件仍然进行存储以更新共享存储空间中该区域对应的主页面文件，则会造成不必要的资源浪费，故仅对于多个区域中在浏览器本次加载完成的主页面和浏览器上一次加载完成的主页面的显示内容发生变化的区域存储区域对应的主页面文件即可。
二、浏览器客户端侧页面显示控制方法
如图5所示，为本申请实施例提供的页面显示控制方法的流程示意图，该方法可以包括以下步骤：
步骤S51、响应打开浏览器的操作指令，获取应用插件生成的原生页面参数，原生页面参数为应用插件根据浏览器之前加载完成的主页面生成的，原生页面参数包含布局信息和每个区域对应显示的主页面文件，布局信息是根据多个区域的相对位置关系和每个区域的大小生成的，区域是应用插件将浏览器之前加载完成的主页面划分得到的；
需要说明的是，原生页面参数为应用插件根据浏览器之前加载完成的主页面生成的，其中，原生页面参数可以为应用插件根据浏览器最近一次加载完成的主页面生成的。
一种可能的实施方式，应用插件可以将生成的原生页面参数存储到预先设置的共享存储空间中，浏览器客户端可以读取该共享存储空间，获取原生页面参数。
步骤S52、根据浏览器的显示窗口的大小和布局信息，从多个区域中确定出能够在显示窗口显示的至少一个第一显示区域；
在具体实施中，浏览器客户端响应于用户触发的打开浏览器的操作指令，浏览器客户端启动，获取此时浏览器显示窗口的大小，如图6所示的浏览器显示窗口，获取浏览器显示窗口的大小为800*560，获取页面参数中的布局信息对应的原生页面的区域相对位置关系及区域大小如图7所示，计算确定组成原生页面的多个区域中能够在显示窗口显示的第一显示区域为如图7中虚线框中的各个区域，包括区域1～区域6。
步骤S53、根据布局信息和每个第一显示区域对应显示的主页面文件生成在浏览器的显示窗口中显示的原生页面，并在显示窗口中进行显示；
步骤S54、在浏览器的主页面加载完成后，使用加载完成后的主页面替换原生页面。
基于本申请实施例提供的页面显示控制方法，浏览器客户端响应用户触发的打开浏览器的操作指令，获取原生页面参数，根据浏览器窗口大小和原生页面参数中的布局信息，确定当前浏览器窗口内可以显示的第一显示区域，根据布局信息和第一显示区域对应显示的主页面文件生成原生页面并在浏览器的显示窗口中显示，在浏览器的主页面加载完成后，使用加载完成的主页面替换原生页面。由于原生页面参数是根据浏览器上一次加载完成后的主页面生成的，且浏览器的主页面并不会发生较大的变化，从而保证了根据原生页面参数生成的原生页面与本次浏览器加载的主页面的相似度，故在本次浏览器加载主页面的过程中，向用户展示原生页面以使用户在原生页面上进行浏览或操作，免去用户在等待浏览器主页面加载的过程，提升用户体验。
在步骤S53中，一种可能的实施方式，根据下列方式生成在浏览器的显示窗口中显示的原生页面：
分别针对每个第一显示区域，根据该第一显示区域对应显示的主页面文件，生成该第一显示区域对应的原生组件；
根据布局信息将生成的原生组件进行排列后，对排列后的原生组件进行渲染得到原生页面。
具体的，浏览器客户端可以调用浏览器内部的XML元素布局器和浏览器原生组件管理器生成在浏览器的显示窗口中显示的原生页面，XML元素布局器对原生页面参数中的布局信息进行计算得到布局策略；浏览器原生组件管理器根据第一显示区域对应显示的主页面文件，生成元素及其属性对应的原生组件，并将原生组件发送给XML元素布局器，以便XML元素布局器按照布局策略排列原生组件；XML元素布局器将按布局策排列后的原生组件发送给浏览器原生组件管理器，浏览器原生组件管理器对原生组件进行渲染，生成需要在浏览器的显示窗口中显示的原生页面。
一种可能的实施方式，在根据布局信息和每个第一显示区域对应显示的主页面文件生成在浏览器的显示窗口中显示的原生页面，并在显示窗口中进行显示之后，在检测到浏览器的主页面加载完成之前，响应对象触发的调整显示窗口中显示内容的操作指令，根据操作指令中包含的调整范围和布局信息，从多个区域中确定出调整后能够在显示窗口显示的至少一个第二显示区域；
根据布局信息和每个第二显示区域对应显示的主页面文件生成调整后在浏览器显示窗口中显示的原生页面，并在显示窗口中进行显示。
需要说明的是，对象可以为操作浏览器的用户。
具体的，检测到用户触发的调整显示窗口中显示内容的操作指令，对于安装浏览器客户端的不同终端，该操作指令可能不同，如安装浏览器客户端的终端为电脑时，该操作指令可以为用户触发的下拉浏览器窗口显示页面；安装浏览器客户端的终端为手机时，该操作指令可以为用户在浏览器显示界面触发的上滑操作。
响应用户触发的调整显示窗口中显示内容的操作指令，获取操作指令中包含的调整范围，根据调整范围和原生页面参数中的布局信息，从多个区域中确定出调整后能够在显示窗口显示的至少一个第二显示区域，例如，用户触发的调整显示窗口中显示内容的操作指令为对浏览器显示窗口进行下拉操作，假设调整范围为180，则根据调整范围和布局信息，计算确定多个区域中能够在调整后的显示窗口显示的第二显示区域为如图8中虚线框中的各个区域，包括区域3～区域7。
根据布局信息和每个第二显示区域对应显示的主页面文件生成调整后在浏览器显示窗口中显示的原生页面，并在显示窗口中进行显示。
需要说明的是，在浏览器的主页面加载完成后，应用插件监控到该浏览器的主页面加载完成，则根据本次加载完成的主页面重新确定原生页面参数。
下面以一个完整实施例对本申请实施例页面显示控制方法进行说明，如图9所示，为本申请实施例一种页面显示控制的方法完整流程示意图，包括以下步骤：
步骤S901、应用插件监控到浏览器在显示窗口中加载完成主页面时，获取浏览器加载完成后的主页面数据；
步骤S902、应用插件根据对应浏览器的用于表示区域划分方式的页面模板，将主页面划分成多个区域，并根据主页面数据确定每个区域对应显示的主页面文件；
步骤S903、应用插件根据划分后的多个区域的相对位置关系和每个区域的大小生成原生页面对应的布局信息；
步骤S904、应用插件生成包含布局信息和每个区域对应显示的主页面文件的原生页面参数；
步骤S905、应用插件将原生页面参数存储到共享存储空间中；
步骤S906、浏览器客户端响应用户触发的打开浏览器的操作指令，获取共享存储空间中存储的应用插件生成的原生页面参数；
步骤S907、浏览器客户端根据浏览器的显示窗口的大小和原生页面参数中包含的布局信息，从多个区域中确定出能够在显示窗口显示的至少一个第一显示区域；
步骤S908、浏览器客户端根据每个第一显示区域对应显示的主页面文件，生成该第一显示区域对应的原生组件；
步骤S909、浏览器客户端根据布局信息将生成的原生组件进行排列后，对排列后的原生组件进行渲染得到原生页面；
步骤S910、浏览器客户端在浏览器显示窗口中显示原生页面；
步骤S911、浏览器客户端响应用户触发的调整显示窗口中显示内容的操作指令，根据操作指令中包含的调整范围和布局信息，从多个区域中确定出调整后能够在显示窗口显示的至少一个第二显示区域；
步骤S912、根据布局信息和每个第二显示区域对应显示的主页面文件生成调整后在浏览器显示窗口中显示的原生页面，并在显示窗口中进行显示；
步骤S913、浏览器客户端确定主页面加载完成后，使用加载完成后的主页面替换原生页面，并返回步骤S901。
需要说明的是，在步骤S913结束后，则会进入步骤S901，再次生成加载后的主页面对应的原生页面参数并存储，从而对应用插件存储在共享存储空间中的原生页面参数进行更新。
基于同一发明构思，本申请实施例中还提供了一种应用插件侧的页面显示控制装置，由于上述装置解决问题的原理与应用插件侧页面显示控制方法相似，因此上述装置的实施可以参见方法的实施，重复之处不再赘述。
如图10所示，本申请实施例提供一种页面显示控制装置100，包括：
第一获取单元101，用于监控到浏览器在显示窗口中加载完成主页面时，获取浏览器加载完成后的主页面数据；
第一确定单元102，用于根据对应浏览器并用于表示区域划分方式的页面模板，将主页面划分成多个区域，并根据主页面数据确定每个区域对应显示的主页面文件；
第二确定单元103，用于根据多个区域的相对位置关系和每个区域的大小生成原生页面对应的布局信息；
生成单元104，用于生成包含布局信息和每个区域对应显示的主页面文件的原生页面参数，以使浏览器下次启动加载主页面之前，根据原生页面参数在显示窗口中显示原生页面。
可选的，第一确定单元具体102用于：
分别针对每个区域，从该区域对应的主页面数据中提取元素和元素对应的属性，根据提取出的元素和元素对应的属性生成该区域对应显示的主页面文件。
基于同一发明构思，本申请实施例中还提供了一种浏览器客户端侧的页面显示控制装置，由于上述装置解决问题的原理与浏览器客户端侧的页面显示控制方法相似，因此上述装置的实施可以参见方法的实施，重复之处不再赘述。
如图11所示，本申请实施例提供一种页面显示控制装置110，包括：
第二获取单元111，用于响应打开浏览器的操作指令，获取应用插件生成的原生页面参数，原生页面参数为应用插件根据浏览器之前加载完成的主页面生成的，原生页面参数包含布局信息和每个区域对应显示的主页面文件，布局信息是根据多个区域的相对位置关系和每个区域的大小生成的，区域是应用插件将浏览器之前加载完成的主页面划分得到的；
计算单元112，用于根据浏览器的显示窗口的大小和所述布局信息，从多个区域中确定出能够在显示窗口显示的至少一个第一显示区域；
显示单元113，用于根据布局信息和每个第一显示区域对应显示的主页面文件生成在浏览器的显示窗口中显示的原生页面，并在显示窗口中进行显示；
替换单元114，用于在浏览器的主页面加载完成后，使用加载完成后的主页面替换原生页面。
可选的，显示单元具体用于：
分别针对每个第一显示区域，根据该第一显示区域对应显示的主页面文件，生成该第一显示区域对应的原生组件；
根据布局信息将生成的原生组件进行排列后，对排列后的原生组件进行渲染得到原生页面。
可选的，显示单元还用于：
响应对象触发的调整显示窗口中显示内容的操作指令，根据操作指令中包含的调整范围和布局信息，从多个区域中确定出调整后能够在显示窗口显示的至少一个第二显示区域；
根据布局信息和每个第二显示区域对应显示的主页面文件生成调整后在浏览器显示窗口中显示的原生页面，并在显示窗口中进行显示。
另外，本申请实施例还提供一种电子设备120，如图12所示，包括：至少一个处理器121；以及与所述至少一个处理器通信连接的存储器122；其中，
所述存储器122存储有可被所述至少一个处理器121执行的指令，所述指令被所述至少一个处理器121执行，以使所述至少一个处理器121能够执行上述应用插件侧的页面显示控制方法。
本申请实施例还提供一种电子设备130，如图13所示，包括：至少一个处理器131；以及与所述至少一个处理器通信连接的存储器132；其中，
所述存储器132存储有可被所述至少一个处理器131执行的指令，所述指令被所述至少一个处理器131执行，以使所述至少一个处理器131能够执行上述浏览器客户端侧的页面显示控制方法。
需要说明的是，用于执行应用插件侧的页面显示控制方法的电子设备和用于执行浏览器客户端侧的页面显示控制方法的电子设备，可以为同一个电子设备，或者分别为不同的电子设备。
在介绍了本申请示例性实施方式的页面显示控制方法和装置之后，接下来，介绍根据本申请的另一示例性实施方式的计算装置。
所属技术领域的技术人员能够理解，本申请的各个方面可以实现为系统、方法或程序产品。因此，本申请的各个方面可以具体实现为以下形式，即：完全的硬件实施方式、完全的软件实施方式(包括固件、微代码等)，或硬件和软件方面结合的实施方式，这里可以统称为“电路”、“模块”或“系统”。
在一些可能的实施方式中，根据本申请的计算装置可以至少包括至少一个处理单元、以及至少一个存储单元。其中，所述存储单元存储有程序代码，当所述程序代码被所述处理单元执行时，使得所述处理单元执行上述各种示例性实施方式中的步骤，例如，所述处理单元可以执行如图9所示的步骤S901～步骤S913中页面显示控制的流程。
下面参照图14来描述根据本申请的这种实施方式的计算装置140。图14显示的计算装置140仅仅是一个示例，不应对本申请实施例的功能和使用范围带来任何限制。
如图14所示，计算装置140以通用计算设备的形式表现。计算装置140的组件可以包括但不限于：上述至少一个处理单元141、上述至少一个存储单元142、连接不同系统组件(包括存储单元142和处理单元141)的总线143。
总线143表示几类总线结构中的一种或多种，包括存储器总线或者存储器控制器、外围总线、处理器或者使用多种总线结构中的任意总线结构的局域总线。
存储单元142可以包括易失性存储器形式的可读介质，例如随机存取存储器(RAM)1421和/或高速缓存存储器1422，还可以进一步包括只读存储器(ROM)1423。
存储单元142还可以包括具有一组(至少一个)程序模块1424的程序/实用工具1425，这样的程序模块1424包括但不限于：操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。
计算装置140也可以与一个或多个外部设备144(例如键盘、指向设备等)通信，还可与一个或者多个使得用户能与计算装置140交互的设备通信，和/或与使得该计算装置140能与一个或多个其它计算设备进行通信的任何设备(例如路由器、调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口145进行。并且，计算装置140还可以通过网络适配器146与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图14所示，网络适配器146通过总线143与用于计算装置140的其它模块通信。应当理解，尽管图中未示出，可以结合计算装置140使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。
本申请实施例还提供一种计算机可存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述应用插件侧的显示页面控制的步骤。
本申请实施例还提供一种计算机可存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述浏览器客户端侧的显示页面控制的步骤。
本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本申请是参照根据本申请的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
显然，本领域的技术人员可以对本申请进行各种改动和变型而不脱离本申请的精神和范围。这样，倘若本申请的这些修改和变型属于本申请权利要求及其等同技术的范围之内，则本申请也意图包含这些改动和变型在内。
Claims (10)
1.一种页面显示控制方法，其特征在于，该方法包括：
应用插件监控到浏览器在显示窗口中加载完成主页面时，获取所述浏览器加载完成后的主页面数据；
根据对应所述浏览器并用于表示区域划分方式的页面模板，将所述主页面划分成多个区域，并根据所述主页面数据确定每个区域对应显示的主页面文件；
根据所述多个区域的相对位置关系和每个区域的大小生成原生页面对应的布局信息；
生成包含所述布局信息和每个区域对应显示的主页面文件的原生页面参数，以使所述浏览器下次启动加载所述主页面之前，根据所述原生页面参数在显示窗口中显示所述原生页面。
2.如权利要求1所述的方法，其特征在于，所述根据所述主页面数据确定每个区域对应显示的主页面文件，具体包括：
分别针对每个区域，从该区域对应的主页面数据中提取元素和元素对应的属性，根据提取出的元素和元素对应的属性生成该区域对应显示的主页面文件。
3.一种页面显示控制方法，其特征在于，该方法包括：
响应打开浏览器的操作指令，获取应用插件生成的原生页面参数，所述原生页面参数为所述应用插件根据所述浏览器之前加载完成的主页面生成的，所述原生页面参数包含布局信息和每个区域对应显示的主页面文件，所述布局信息是根据多个区域的相对位置关系和每个区域的大小生成的，所述区域是所述应用插件将所述浏览器之前加载完成的主页面划分得到的；
根据所述浏览器的显示窗口的大小和所述布局信息，从所述多个区域中确定出能够在所述显示窗口显示的至少一个第一显示区域；
根据所述布局信息和每个第一显示区域对应显示的主页面文件生成在所述浏览器的显示窗口中显示的原生页面，并在所述显示窗口中进行显示；
在所述浏览器的主页面加载完成后，使用加载完成后的主页面替换所述原生页面。
4.如权利要求3所述的方法，其特征在于，所述根据所述布局信息和每个第一显示区域对应显示的主页面文件生成在所述浏览器的显示窗口中显示的原生页面，包括：
分别针对每个第一显示区域，根据该第一显示区域对应显示的主页面文件，生成该第一显示区域对应的原生组件；
根据所述布局信息将生成的原生组件进行排列后，对排列后的原生组件进行渲染得到所述原生页面。
5.如权利要求3所述的方法，其特征在于，在根据所述布局信息和每个第一显示区域对应显示的主页面文件生成在所述浏览器的显示窗口中显示的原生页面，并在所述显示窗口中进行显示之后，在检测到所述浏览器的主页面加载完成之前，还包括：
响应对象触发的调整显示窗口中显示内容的操作指令，根据所述操作指令中包含的调整范围和所述布局信息，从所述多个区域中确定出调整后能够在所述显示窗口显示的至少一个第二显示区域；
根据所述布局信息和每个第二显示区域对应显示的主页面文件生成调整后在所述浏览器显示窗口中显示的原生页面，并在所述显示窗口中进行显示。
6.一种页面显示控制装置，其特征在于，包括：
第一获取单元，用于监控到浏览器在显示窗口中加载完成主页面时，获取所述浏览器加载完成后的主页面数据；
第一确定单元，用于根据对应所述浏览器并用于表示区域划分方式的页面模板，将所述主页面划分成多个区域，并根据所述主页面数据确定每个区域对应显示的主页面文件；
第二确定单元，用于根据所述多个区域的相对位置关系和每个区域的大小生成原生页面对应的布局信息；
生成单元，用于生成包含所述布局信息和每个区域对应显示的主页面文件的原生页面参数，以使所述浏览器下次启动加载所述主页面之前，根据所述原生页面参数在显示窗口中显示所述原生页面。
7.如权利要求6所述的装置，其特征在于，所述第一确定单元具体用于：
分别针对每个区域，从该区域对应的主页面数据中提取元素和元素对应的属性，根据提取出的元素和元素对应的属性生成该区域对应显示的主页面文件。
8.一种页面显示控制装置，其特征在于，包括：
第二获取单元，用于响应打开浏览器的操作指令，获取应用插件生成的原生页面参数，所述原生页面参数为所述应用插件根据所述浏览器之前加载完成的主页面生成的，所述原生页面参数包含布局信息和每个区域对应显示的主页面文件，所述布局信息是根据多个区域的相对位置关系和每个区域的大小生成的，所述区域是所述应用插件将所述浏览器之前加载完成的主页面划分得到的；
计算单元，用于根据所述浏览器的显示窗口的大小和所述布局信息，从所述多个区域中确定出能够在所述显示窗口显示的至少一个第一显示区域；
显示单元，用于根据所述布局信息和每个第一显示区域对应显示的主页面文件生成在所述浏览器的显示窗口中显示的原生页面，并在所述显示窗口中进行显示；
替换单元，用于在所述浏览器的主页面加载完成后，使用加载完成后的主页面替换所述原生页面。
9.一种电子设备，其特征在于，包括：
至少一个处理器；以及
与所述至少一个处理器通信连接的存储器；其中，
所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行如权利要求1、2或3～5任一项所述的方法。
10.一种计算机可读介质，存储有计算机可执行指令，其特征在于，所述计算机可执行指令用于执行如权利要求1、2或3～5任一项所述的方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911114212.1A CN112799745B (zh) | 2019-11-14 | 2019-11-14 | 一种页面显示控制方法及装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911114212.1A CN112799745B (zh) | 2019-11-14 | 2019-11-14 | 一种页面显示控制方法及装置 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112799745A true CN112799745A (zh) | 2021-05-14 |
| CN112799745B CN112799745B (zh) | 2024-03-15 |
Family
ID=75803827
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201911114212.1A Active CN112799745B (zh) | 2019-11-14 | 2019-11-14 | 一种页面显示控制方法及装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112799745B (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113949821A (zh) * | 2021-09-15 | 2022-01-18 | 长视科技股份有限公司 | 视频播放方法、装置、计算机设备和存储介质 |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8386955B1 (en) * | 2011-10-21 | 2013-02-26 | Google Inc. | User-optimized content for web browsing windows |
| CN105183890A (zh) * | 2015-09-28 | 2015-12-23 | 北京奇虎科技有限公司 | 基于浏览器的网页加载方法和浏览器装置 |
| CN107515903A (zh) * | 2017-07-26 | 2017-12-26 | 北京京东尚科信息技术有限公司 | 一种加载展示情景网页的方法和装置 |
| CN108090062A (zh) * | 2016-11-21 | 2018-05-29 | 阿里巴巴集团控股有限公司 | 一种页面刷新方法及装置 |
| CN108391009A (zh) * | 2018-02-13 | 2018-08-10 | 广东欧珀移动通信有限公司 | 应用页面的显示方法、装置、存储介质及电子设备 |
-
2019
- 2019-11-14 CN CN201911114212.1A patent/CN112799745B/zh active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8386955B1 (en) * | 2011-10-21 | 2013-02-26 | Google Inc. | User-optimized content for web browsing windows |
| CN105183890A (zh) * | 2015-09-28 | 2015-12-23 | 北京奇虎科技有限公司 | 基于浏览器的网页加载方法和浏览器装置 |
| CN108090062A (zh) * | 2016-11-21 | 2018-05-29 | 阿里巴巴集团控股有限公司 | 一种页面刷新方法及装置 |
| CN107515903A (zh) * | 2017-07-26 | 2017-12-26 | 北京京东尚科信息技术有限公司 | 一种加载展示情景网页的方法和装置 |
| CN108391009A (zh) * | 2018-02-13 | 2018-08-10 | 广东欧珀移动通信有限公司 | 应用页面的显示方法、装置、存储介质及电子设备 |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113949821A (zh) * | 2021-09-15 | 2022-01-18 | 长视科技股份有限公司 | 视频播放方法、装置、计算机设备和存储介质 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN112799745B (zh) | 2024-03-15 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US11030392B2 (en) | Optimization for rendering web pages | |
| US11144711B2 (en) | Webpage rendering method, device, electronic apparatus and storage medium | |
| KR102185864B1 (ko) | 프레젠테이션을 위한 네이티브 콘텐츠의 서버측 렌더링 방법 및 시스템 | |
| JP4857349B2 (ja) | ポータル・システム内で非同期ポータル・ページを提供するための方法、システム、およびコンピュータ・プログラム | |
| US20090019133A1 (en) | System, method and computer program for updating a web page in a web browser | |
| US20140337753A1 (en) | System and method for editing the appearance of a user interface | |
| US20120278700A1 (en) | Filtered Stylesheets | |
| US10902508B2 (en) | Methods for extracting and adapting information to generate custom widgets and devices thereof | |
| CN108268262A (zh) | 实现将html转换为微信小程序的方法、装置及系统 | |
| US20150220496A1 (en) | Dynamic sprite based theme switching | |
| US9646103B2 (en) | Client-side template engine and method for constructing a nested DOM module for a website | |
| CN110765208B (zh) | 一种数据同步方法、装置、电子设备及存储介质 | |
| CN110516186A (zh) | 页面骨架自动化生成方法、设备、存储介质及装置 | |
| WO2016005884A2 (en) | Javascript-based, client-side template driver system | |
| CN111459501A (zh) | 基于SVG的Web组态画面存储与展示系统和方法及介质 | |
| CN110895481A (zh) | 桌面应用的渲染方法、装置和系统 | |
| CN114706584A (zh) | 一种数据可视化展示制作系统 | |
| CN111310005A (zh) | 网络请求的处理方法及装置、服务器和存储介质 | |
| CN112799670B (zh) | 一种统一多端逻辑开发的方法及系统 | |
| CN112799745B (zh) | 一种页面显示控制方法及装置 | |
| CN107391175B (zh) | 控件数据配置方法及计算机可读存储介质 | |
| CN114756228A (zh) | 页面处理方法、装置、设备及存储介质 | |
| JP2012079188A (ja) | 体裁情報処理装置及び方法 | |
| CN113849164A (zh) | 数据处理方法、装置、电子设备和存储器 | |
| CN112328940A (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 | ||
| REG | Reference to a national code |
Ref country code: HK Ref legal event code: DE Ref document number: 40047479 Country of ref document: HK |
|
| TA01 | Transfer of patent application right |
Effective date of registration: 20221123 Address after: 1402, Floor 14, Block A, Haina Baichuan Headquarters Building, No. 6, Baoxing Road, Haibin Community, Xin'an Street, Bao'an District, Shenzhen, Guangdong 518,101 Applicant after: Shenzhen Yayue Technology Co.,Ltd. Address before: 35th floor, Tencent building, Keji Zhongyi Road, high tech Zone, Nanshan District, Shenzhen City, Guangdong Province Applicant before: TENCENT TECHNOLOGY (SHENZHEN) Co.,Ltd. |
|
| TA01 | Transfer of patent application right | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |