CN111797344A - 页面跳转显示方法、装置、计算机设备及存储介质 - Google Patents
页面跳转显示方法、装置、计算机设备及存储介质 Download PDFInfo
- Publication number
- CN111797344A CN111797344A CN202010658751.8A CN202010658751A CN111797344A CN 111797344 A CN111797344 A CN 111797344A CN 202010658751 A CN202010658751 A CN 202010658751A CN 111797344 A CN111797344 A CN 111797344A
- Authority
- CN
- China
- Prior art keywords
- page
- pop
- target
- box
- display
- 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
Links
- 238000000034 method Methods 0.000 title claims abstract description 53
- 238000012544 monitoring process Methods 0.000 claims abstract description 61
- 238000005096 rolling process Methods 0.000 claims description 22
- 238000004590 computer program Methods 0.000 claims description 17
- 230000000694 effects Effects 0.000 abstract description 5
- 238000004364 calculation method Methods 0.000 description 9
- 230000006870 function Effects 0.000 description 7
- 238000010586 diagram Methods 0.000 description 4
- 230000008569 process Effects 0.000 description 4
- 230000001960 triggered effect Effects 0.000 description 4
- 230000008859 change Effects 0.000 description 2
- 230000001360 synchronised effect Effects 0.000 description 2
- VYZAMTAEIAYCRO-UHFFFAOYSA-N Chromium Chemical compound [Cr] VYZAMTAEIAYCRO-UHFFFAOYSA-N 0.000 description 1
- 238000013473 artificial intelligence Methods 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 230000009191 jumping Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
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
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明公开了一种页面跳转显示方法、装置、计算机设备及存储介质。该方法包括：在浏览器上显示当前页面，当前页面上显示至少一个原始弹出框，每一原始弹出框关联一个原始弹出页面；实时监听至少一个原始弹出框，确定是否存在目标弹出框，获取监听结果；若监听结果为存在目标弹出框，则将目标弹出框关联的原始弹出页面确定为目标弹出页面；基于当前页面和目标弹出页面，获取定位显示结果；基于定位显示结果，在浏览器上显示目标弹出页面。本技术方案目标弹出页面能够在当前页面中垂直居中且完整显示，提高页面显示效果。
Description
技术领域
本发明涉及人工智能领域，尤其涉及一种页面跳转显示方法、装置、计算机设备及存储介质。
背景技术
当当前页面需要内嵌iframe窗口(HTML标签，作用是文档中的文档，或者浮动的框架)时，为了让浏览器页面更加的美观，在浏览器页面中不显示双滚动条，开发人员通过调整内嵌在iframe窗口中的弹出页面的高度与iframe窗口高度之间的关系，消除iframe窗口中的滚动条。
例如，当前页面A通过iframe窗口内嵌弹出页面B，iframe窗口高度超过浏览器窗口高度，iframe窗口中弹出相对当前页面A所在窗口垂直居中并完整的弹出页面B，此时iframe窗口超出浏览器窗口(如图1)，用户感知不到这个交互，同时给用户带来极差的体验。
对于现有方案，在移动端IOS系统中，无法控制iframe窗口的高度，默认为iframe窗口中的弹出页面B的高度撑开iframe窗口的高度，但是，还是存在上述问题。而对于PC端的处理，因为没有做限制，所以弹出页面B也会超出iframe窗口，无法展示在浏览器窗口中。
发明内容
本发明实施例提供一种页面跳转显示方法、装置、计算机设备及存储介质，以解决弹出页面无法在浏览器显示页面中垂直居中且完全显示的问题。
一种页面跳转显示方法，包括：
在浏览器上显示当前页面，所述当前页面上显示至少一个原始弹出框，每一所述原始弹出框关联一个原始弹出页面；
实时监听至少一个所述原始弹出框，确定是否存在目标弹出框，获取监听结果；
若所述监听结果为存在所述目标弹出框，则将所述目标弹出框关联的原始弹出页面确定为目标弹出页面；
基于所述当前页面和所述目标弹出页面，获取定位显示结果；
基于所述定位显示结果，在所述浏览器上显示所述目标弹出页面。
一种页面跳转显示装置，包括：
弹出框显示模块，用于在浏览器上显示当前页面，所述当前页面上显示至少一个原始弹出框，每一所述原始弹出框关联一个原始弹出页面；
弹出框监听模块，用于实时监听至少一个所述原始弹出框，确定是否存在目标弹出框，获取监听结果；
页面确定模块，用于当所述监听结果为存在所述目标弹出框时，则将所述目标弹出框关联的原始弹出页面确定为目标弹出页面；
结果获取模块，用于基于所述当前页面和所述目标弹出页面，获取定位显示结果；
页面显示模块，用于基于所述定位显示结果，在所述浏览器上显示所述目标弹出页面。
一种计算机设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述页面跳转显示方法。
一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现上述页面跳转显示方法。
上述页面跳转显示方法、装置、计算机设备及存储介质，服务端实时监听浏览器的当前页面上的所有原始弹出框，以确定所有原始弹出框中是否存在目标弹出框，以便通过监控确定进行页面跳转；在监听结果为存在目标弹出框时，根据当前页面和目标弹出框对应的目标页面页面进行定位，获取定位显示结果，以便基于定位显示结果对目标弹出页面进行位置调整，使得目标弹出页面能够在当前页面中垂直居中且完整显示，提高页面显示效果。
附图说明
为了更清楚地说明本发明实施例的技术方案，下面将对本发明实施例的描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
图1是本发明一实施例中页面跳转显示方法的一应用环境示意图；
图2是本发明一实施例中页面跳转显示方法的一流程图；
图3是本发明一实施例中页面跳转显示方法的另一流程图；
图4是本发明一实施例中页面跳转显示方法的另一流程图；
图5是本发明一实施例中页面跳转显示方法的另一流程图；
图6是本发明一实施例中页面跳转显示方法的另一流程图；
图7是本发明一实施例中页面跳转显示方法的另一流程图；
图8是本发明一实施例中页面跳转显示方法的另一流程图；
图9是本发明一实施例中页面跳转显示装置的一示意图；
图10是本发明一实施例中计算机设备的一示意图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
本发明实施例提供的页面跳转显示方法，该页面跳转显示方法可应用如图1所示的应用环境中。具体地，该页面跳转显示方法应用在页面跳转显示系统中，该页面跳转显示系统包括如图1所示的客户端和服务端，客户端与服务端通过网络进行通信，用于实现页面跳转显示方法。其中，客户端又称为用户端，是指与服务端相对应,为客户提供本地服务的程序。客户端可安装在但不限于各种个人计算机、笔记本电脑、智能手机、平板电脑和便携式可穿戴设备上。服务端可以用独立的服务端或者是多个服务端组成的服务端集群来实现。服务端实时监听浏览器的当前页面上的所有原始弹出框，以确定所有原始弹出框中是否存在目标弹出框，以便通过监控确定进行页面跳转；在监听结果为存在目标弹出框时，根据当前页面和目标弹出框对应的目标页面页面进行定位，获取定位显示结果，以便基于定位显示结果对目标弹出页面进行位置调整，使得目标弹出页面能够在当前页面中垂直居中且完整显示，提高页面显示效果。
在一实施例中，如图2所示，提供一种页面跳转显示方法，以该方法应用在图1中的服务端为例进行说明，包括如下步骤：
S10：在浏览器上显示当前页面，当前页面上显示至少一个原始弹出框，每一原始弹出框关联一个原始弹出页面。
其中，浏览器是用来检索、展示以及传递Web信息资源的应用程序。作为一示例，浏览器包括但不限于IE浏览器、Chrome浏览器、Firefox浏览器和Safari浏览器。当前页面为浏览器显示界面当前时刻显示的页面。原始弹出框为通过iframe将原始弹出页面嵌入到当前页面的弹出窗口。原始弹出页面为通过页面代码预先编写的页面。作为一示例，页面代码可以是H5代码或JS代码。
具体地，服务端控制浏览器显示当前页面，该当前页面上包括至少一个原始弹出框，每一原始弹出框通过iframe将原始弹出页面嵌入到当前页面上。用户可以通过输入设备(如键盘、鼠标和触控屏)点击原始弹出框，以触发该原始弹出框关联的原始弹出页面在浏览器的显示界面显示。可以理解地，原始弹出页面为在当前页面上的原始弹出框关联的页面，需要在原始弹出框被触发时才能显示。
S20：实时监听至少一个原始弹出框，确定是否存在目标弹出框，获取监听结果。
其中，目标弹出框为实时监听到被触发的一个原始弹出框。监听结果为实时监听是否存在目标弹出框的结果。
具体地，服务端通过对当前页面上的至少一个原始弹出框进行实时监听，判断是否存在目标弹出框，即当前页面上是否存在被用户可以通过输入设备(如键盘、鼠标和触控屏)触发的目标弹出框，获取监听结果。可以理解地，服务端根据监听结果判断当前页面中是否包括需要进行页面跳转的目标弹出框。
S30：若监听结果为存在目标弹出框，则将目标弹出框关联的原始弹出页面确定为目标弹出页面。
其中，目标弹出页面为目标弹出框关联的原始弹出页面。
具体地，当服务端获取的监听结果为存在目标弹出框，则说明用户触发目标弹出框，想了解目标弹出框关联的原始弹出页面的信息，因此，将目标弹出框关联的原始弹出页面确定为目标弹出页面，以便后续对目标弹出页面进行调整，以使得目标弹出页面能够完整地显示在浏览器显示的当前页面中，提高用户体验。
S40：基于当前页面和目标弹出页面，获取定位显示结果。
其中，定位显示结果为目标弹出页面在当前页面弹出时的定位结果。
具体地，服务端对目标弹出页面在当前页面中的位置进行定位计算，获取定位显示结果。由于目标弹出页面在当前页面弹出时，容易出现目标弹出页面在当前页面显示不完全、未垂直居中或者未完整显示在当前页面等情况，导致用户体验较差的问题。服务端通过目标弹出页面在当前页面中的位置进行定位计算，根据获取到的定位显示结果对目标弹出页面进行位置调整，使得目标弹出页面能够在当前页面中垂直居中或者完整显示，提高用户体验。
本示例中，服务端对目标弹出页面在当前页面中的位置进行实时定位计算，以获取定位显示结果，从而实现对目标弹出页面在当前页面上的位置进行实时调整，使得目标弹出页面能够在当前页面中垂直居中或者完整显示。
S50：基于定位显示结果，在浏览器上显示目标弹出页面。
具体地，服务端根据定位显示结果对在当前页面上显示的目标弹出页面进行位置调整，以将位置调整后的目标弹出页面在当前页面上显示。可以理解地，服务端对目标弹出页面的位置定位进行调整，使得目标弹出页面能够在当前页面中垂直居中且完整显示，提高页面显示效果，有助于提高用户体验。
本实施例中，服务端实时监听浏览器的当前页面上的所有原始弹出框，以确定所有原始弹出框中是否存在目标弹出框，以便通过监控确定进行页面跳转；在监听结果为存在目标弹出框时，根据当前页面和目标弹出框对应的目标页面页面进行定位，获取定位显示结果，以便基于定位显示结果对目标弹出页面进行位置调整，使得目标弹出页面能够在当前页面中垂直居中且完整显示，提高页面显示效果。
在一实施例中，如图3所示，在步骤S10中，在浏览器上显示当前页面，当前页面上显示至少一个原始弹出框，包括：
S11：执行弹出框滚动任务，根据弹出框滚动任务，从弹出框数组中选取预设数量的待显示标识。
其中，弹出框滚动任务为将原始弹出框在当前页面进行滚动的任务。弹出框数组为用于存储原始弹出框相对应的待显示标识的数组。预设数量为自定义设置的待显示标识的数量。待显示标识为用于标记需要在当前页面显示的原始弹出框的标识。选取预设数量的待显示标识的方式可以是随机选取或者按照预设选取规则选取。
具体地，由于预先对需要在当前页面显示的原始弹出框作了对应的待显示标识，并将待显示标识存放在弹出框数组中，当服务端执行弹出框滚动任务时，直接从弹出框数组中选取预设数量的待显示标识，服务端根据待显示标识能够快速准确地在当前页面对待显示标识对应的原始弹出框进行显示，提高了显示原始弹出框时的效率和准确性。
S12：在当前页面上显示与待显示标识相对应的原始弹出框。
具体地，服务端获取原始弹出框对应的待显示标识后，将待显示标识相对应的原始弹出框显示在当前页面上，以进一步对实时监听至少一个原始弹出框，确定是否存在目标弹出框，获取监听结果，判断当前页面中是否包括需要进行页面跳转的目标弹出框。
在本实施例中，服务端执行弹出框滚动任务，从弹出框数组中选取预设数量的待显示标识，服务端根据待显示标识能够快速准确地在当前页面对待显示标识对应的原始弹出框进行显示，以进一步从原始弹出框中确定目标弹出框，并对目标弹出框进行调整，提高用户体验以及页面跳转显示方法的效率和准确率。
在一实施例中，如图4所示，步骤S20中，实时监听至少一个原始弹出框，确定目标弹出框，获取监听结果，包括：
S21：获取每一原始弹出框对应的弹出框类型。
其中，弹出框类型为通过iframe将原始弹出页面嵌入到当前页面的弹出窗口的类型。原始弹出框对应的弹出框类型包括第一弹出框类型和第二弹出框类型。第一弹出框类型为通过实时创建或删除bom节点(弹出框节点)的方式控制原始弹出框的弹出框类型。第二弹出框类型为预先设置好bom节点，并通过对display属性进行切换的方式控制原始弹出框的弹出框类型。
作为一示例，服务端通过document.createElement创建bom节点(如pop Dom)来显示原始弹出框，并将bom节点通过document.body.appendChild插入页面代码中显示在当前页面中。并且，通过document.body.removeChild(po pDom)删除dom节点，以达到控制原始弹出框的目的。
作为另一示例，服务端检测到预先设置好bom节点，并通过对display属性进行切换的方式来原始弹出框的弹出框类型。
具体地，服务端通过判断控制原始弹出框的方式来获取每一原始弹出框对应的弹出框类型。可以理解地，服务端根据弹出框类型和定位显示结果，能够对弹出框类型对应的目标弹出框或目标弹出页面在当前页面中的位置定位进行调整，使得目标弹出页面能够在当前页面中垂直居中且完整显示，提高页面跳转显示方法的适用性。
S22：调用与弹出框类型相对应的目标监听器，对原始弹出框进行监听，确定是否存在目标弹出框，获取监听结果。
其中，目标监听器为能够对弹出框类型对应的原始弹出框进行监听的程序。
具体地，服务端调用与弹出框类型相对应的目标监听器，对原始弹出框进行监听，以监听该原始弹出框是否被用户触发，从而确定是否存在目标弹出框，获取监听结果。作为一示例，当弹出框类型为第一弹出框类型，服务端通过utationObserver接口中的observe方法所创建的目标监听器，监听原始弹出框所在位置的父级节点P。当父级节点P的子节点发生变化时，触发，当目标监听器监听到原始弹出框插入父级节点P，则获取监听结果为存在目标弹出框，当目标监听器未监听到原始弹出框插入父级节点P，则获取监听结果为不存在目标弹出框。
作为另一示例，当弹出框类型为第二弹出框类型，服务端通过MutationObserver接口的observe方法所创建的目标监听器，监听原始弹出框的style属性变化。当原始弹出框对应的popDom.style.display属性发生变化时，触发目标监听器。目标监听器判断原始弹出框对应的bom节点为display属性为M，则获取监听结果为存在目标弹出框，目标监听器原始弹出框对应的bom节点为display属性为N，则获取监听结果为不存在目标弹出框。
在本实施例中，服务端获取每一原始弹出框对应的弹出框类型，调用与弹出框类型相对应的目标监听器，对原始弹出框进行监听，确定是否存在目标弹出框，获取监听结果，以使服务端能够对不同类型的原始弹出框对应的目标弹出框或目标弹出页面在当前页面中的位置定位进行调整，使得目标弹出页面能够在当前页面中垂直居中且完整显示，提高用户体验和页面跳转显示方法的适用性。
在一实施例中，如图5所示，步骤S33之后，基于当前页面和所述目标弹出页面，获取定位显示结果，包括：
S3301：调用滚动监听事件对目标弹出页面进行实时定位，实时获取定位显示结果。
其中，滚动监听事件为用于对目标弹出页面的滚动进行监听的事件。
具体地，当目标弹出页面在浏览器显示的当前页面中滚动时，服务端通过调用滚动监听事件对目标弹出页面在当前页面中的位置进行定位计算，获取定位显示结果。
S3302：基于定位显示结果，在浏览器上刷新目标弹出页面。
具体的，由于在当目标弹出页面在浏览器显示的当前页面中滚动时，容易出现目标弹出页面在浏览器显示的当前页面中显示不全、目标弹出页面无法居中垂直显示在当前页面上或目标弹出页面无法覆盖当前页面的问题。服务端通过调用滚动监听事件对目标弹出页面在当前页面中的位置进行定位计算，获取定位显示结果，并根据定位显示结果，在浏览器显示的当前页面上刷新目标弹出页面，提高定位调整的实用性和可靠性。
在本实施例中，服务端通过调用滚动监听事件对目标弹出页面在当前页面中的位置进行定位计算，获取定位显示结果，根据定位显示结果，在浏览器显示的当前页面上刷新目标弹出页面，提高定位调整的实用性和可靠性。
在一实施例中，如图6所示，步骤S40中，基于当前页面和目标弹出页面，获取定位显示结果，还包括：
S41：基于当前页面和目标弹出页面，确定目标页面距离。
其中，目标页面距离依据特定的计算逻辑确定为目标弹出页面、目标弹出框和当前页面之间的距离。特定的计算逻辑具体可以是以目标弹出页面、目标弹出框和当前页面顶部或为基准计算目标页面距离。作为一示例，当前页面顶部a1和底部a2坐标为(a1,a2)，目标弹出框顶部b1和底部b2坐标为(b1,b2)，目标弹出页面顶部c1和底部c2坐标(c1,c2)。当目标弹出页面在当前页面显示并滚动时，确定目标页面距离包括：目标弹出页面顶部相对于当前页面顶部的第一顶部距离A＝c1-a1、目标弹出框顶部相对于当前页面顶部的第二顶部距离B＝b1-a1、目标弹出页面顶部相对于目标弹出框顶部的第三顶部距离C＝c1-b1、当前页面高度D＝a1-a2、目标弹出页面高度E＝c1-c2和目标弹出框高度F＝b1-b2。
S42：基于目标页面距离，判断目标弹出页面是否满足标准显示要求，获取定位显示结果。
其中，标准显示要求为自定义设置的目标弹出页面在当前页面显示的要求。作为一示例，基于第一顶部距离A、第二顶部距离B和第三顶部距离C，计算目标弹出页面相对当前页面垂直居中且完全显示时目标弹出页面相对当前页面顶部距离(D-E)/2。此时，如果(B-A+C)＝(D-E)/2成立，则目标弹出页面可以相对当前页面垂直居中且完全显示，计算结果C＝(D-E)/2-B+A，此时C为目标弹出页面垂直居中且完全显示在当前页面中的相对于目标弹出框顶部距离。
具体地，服务端基于目标页面距离，判断目标弹出页面是否满足标准显示要求；若目标弹出页面满足标准显示要求时，目标弹出页面垂直居中且完全显示在当前页面中的相对于目标弹出框顶部的距离；当目标弹出页面不满足标准显示要求时，目标弹出页面未垂直居中且完全显示在当前页面中的相对于目标弹出框顶部的距离。
在本实施例中，服务端基于当前页面和目标弹出页面，确定目标页面距离，并基于目标页面距离判断目标弹出页面是否满足标准显示要求，能够对目标弹出页面进行准确的定位，获取定位显示结果，以进一步对目标弹出页面进行调整，提高页面跳转显示方法的准确率。
在一实施例中，如图7所示，步骤S50中，基于定位显示结果，在浏览器上显示目标弹出页面，包括：
S51：若定位显示结果为目标弹出页面满足标准显示要求，则依据标准显示要求，在浏览器上显示目标弹出页面。
具体地，当定位显示结果为目标弹出页面满足标准显示要求，目标弹出页面垂直居中且完全显示在当前页面中的相对于目标弹出框顶部距离，服务端则根据标准显示要求，将目标弹出页面在当前页面进行显示。
S52：若定位显示结果为目标弹出页面不满足标准显示要求，则根据目标页面距离确定目标弹出页面对应的显示不全类型。
其中，显示不全类型为目标弹出页面未垂直居中且完全显示在当前页面的类型。
具体地，当定位显示结果为目标弹出页面不满足标准显示要求，目标弹出页面未垂直居中且完全显示在当前页面中的相对于目标弹出框顶部的距离，服务端则根据目标页面距离确定目标弹出页面对应的显示不全类型。
S53：根据显示不全类型对应的页面调整逻辑，在浏览器上显示目标弹出页面。
其中，页面调整逻辑为用于对目标弹出页面的定位进行调整，使目标弹出页面能够满足标准显示要求的逻辑。
具体地，服务端根据目标弹出页面对应的显示不全类型，通过页面调整逻辑对目标弹出页面的定位进行调整，使目标弹出页面能够满足标准显示要求，并在当前页面对目标弹出页面进行显示。可以理解地，服务端通过不同的显示不全类型，对不满足标准显示要求的目标弹出页面通过页面调整逻辑进行调整，能够提高定位调整的可靠性和实用性。
在本实施例中，服务端在目标弹出页面不满足标准显示要求时，根据目标页面距离确定目标弹出页面对应的显示不全类型，进一步地，服务端通过不同的显示不全类型，对不满足标准显示要求的目标弹出页面通过页面调整逻辑进行调整，能够提高定位调整的可靠性和实用性。
在一实施例中，如图8所示，步骤S52中，若定位显示结果为目标弹出页面不满足标准显示要求，则根据目标页面距离确定目标弹出页面对应的显示不全类型，包括：
S521：基于目标页面距离，获取目标弹出页面相对于目标弹出框的顶部距离，基于顶部距离，确定目标弹出页面对应的显示不全类型。
具体地，服务端根据目标页面距离，获取目标弹出页面相对于目标弹出框的顶部距离，基于顶部距离，确定目标弹出页面对应的显示不全类型。
作为一示例，当顶部距离C<0时，显示不全类型为目标弹出页面于目标弹出框上方，超出目标弹出框。
作为另一示例，当顶部距离C-目标弹出页面高度E>目标弹出框高度F，显示不全类型为目标弹出页面超出目标弹出框底部。
S522：基于预设滚动事件，对目标弹出页面进行实时定位，获取目标弹出页面对应的滚动距离。
其中，预设滚动事件为对目标弹出页面滚动或移动时进行实时定位的事件。滚动距离为目标弹出页面滚动距离。
具体地，服务端基于预设滚动事件，对目标弹出页面进行实时定位，获取目标弹出页面对应的滚动距离。作为一示例，目标弹出页面滚动距离A＝document.body.scrollTop。
S523：基于滚动距离，根据显示不全类型对应的页面调整逻辑，在浏览器上显示目标弹出页面。
具体地，服务端基于滚动距离，根据显示不全类型对应的页面调整逻辑，在浏览器上显示目标弹出页面。
作为一示例，当顶部距离C<0时，通过页面调整逻辑，使顶部距离C＝0，目标弹出页面正好在目标弹出框顶部完整显示，使得保证目标弹出页面完整显示的前提下，相对于当前页面中间显示。
作为另一示例，当顶部距离C-目标弹出页面高度E>目标弹出框高度F，通过页面调整逻辑，当顶部距离C-目标弹出页面高度E＝目标弹出框高度F，使目标弹出页面不超出目标弹出框的底部。
在本实施例中，服务端可以及时获取目标弹出页面对应的显示不全类型，并且在对目标弹出页面进行定位时，增加了对目标弹出页面是否超出目标弹出框的判断，避免目标弹出页面可以相对浏览器当前居中摆放，但是超出目标弹出框而显示不全的问题，提高定位调整的可靠性和实用性。
应理解，上述实施例中各步骤的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本发明实施例的实施过程构成任何限定。
在一实施例中，提供一种页面跳转显示装置，该页面跳转显示装置与上述实施例中页面跳转显示方法一一对应。如图9所示，该页面跳转显示装置包括弹出框显示模块10、弹出框监听模块20、页面确定模块30、结果获取模块40和页面显示模块50。各功能模块详细说明如下：
弹出框显示模块10，用于在浏览器上显示当前页面，当前页面上显示至少一个原始弹出框，每一原始弹出框关联一个原始弹出页面；
弹出框监听模块20，用于实时监听至少一个原始弹出框，确定是否存在目标弹出框，获取监听结果；
页面确定模块30，用于当监听结果为存在目标弹出框时，则将目标弹出框关联的原始弹出页面确定为目标弹出页面；
结果获取模块40，用于基于当前页面和目标弹出页面，获取定位显示结果；
页面显示模块50，用于基于定位显示结果，在浏览器上显示目标弹出页面。
进一步地，弹出框显示模块10包括：
标识选取子模块，用于执行弹出框滚动任务，根据弹出框滚动任务，从弹出框数组中选取预设数量的待显示标识；
原始弹出框子模块，用于在当前页面上显示与待显示标识相对应的原始弹出框。
进一步地，弹出框监听模块20包括：
类型获取子模块，用于获取每一原始弹出框对应的弹出框类型；
监听器子模块，用于调用与弹出框类型相对应的目标监听器，对原始弹出框进行监听，确定是否存在目标弹出框，获取监听结果。
进一步地，结果获取模块40包括：
实时定位子模块，用于调用滚动监听事件对目标弹出页面进行实时定位，获取定位显示结果；
页面刷新子模块，用于基于定位显示结果，在浏览器显示的当前页面上刷新目标弹出页面。
进一步地，结果获取模块40还包括：
距离确定子模块，用于基于当前页面和目标弹出页面，确定目标页面距离；
定位结果子模块，用于基于目标页面距离，判断目标弹出页面是否满足标准显示要求，获取定位显示结果。
进一步地，页面显示模块50包括：
目标页面子模块，用于当定位显示结果为目标弹出页面满足标准显示要求时，则依据标准显示要求，在浏览器上显示目标弹出页面；
类型确定子模块，用于当定位显示结果为目标弹出页面不满足标准显示要求时，则根据目标页面距离确定目标弹出页面对应的显示不全类型；
调整逻辑子模块，用于根据显示不全类型对应的页面调整逻辑，在浏览器上显示目标弹出页面。
进一步地，页面显示模块50还包括：
显示类型子模块，用于基于目标页面距离，获取目标弹出页面相对于iframe窗口的顶部距离，基于顶部距离，确定目标弹出页面对应的显示不全类型；
滚动事件子模块，用于基于预设滚动事件，对目标弹出页面进行实时定位，获取目标弹出页面对应的滚动距离；
页面调整子模块，用于基于滚动距离，根据显示不全类型对应的页面调整逻辑，在浏览器上显示目标弹出页面。
关于页面跳转显示装置的具体限定可以参见上文中对于页面跳转显示方法的限定，在此不再赘述。上述页面跳转显示装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。
在一个实施例中，提供了一种计算机设备，该计算机设备可以是服务端，其内部结构图可以如图10所示。该计算机设备包括通过系统总线连接的处理器、存储器、网络接口和数据库。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统、计算机程序和数据库。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的数据库用于页面跳转显示方法。该计算机设备的网络接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现一种页面跳转显示方法。
在一个实施例中，提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时实现上述实施例中页面跳转显示方法，例如步骤S10至步骤S50。或者，处理器执行计算机程序时实现上述实施例中数据导入装置的各模块/单元的功能，例如模块10至模块40的功能，为避免重复，这里不再赘述。
在一实施例中，提供一计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器执行时实现上述实施例中页面跳转显示方法，例如步骤S10至步骤S50。或者，处理器执行计算机程序时实现上述实施例中数据导入装置的各模块/单元的功能，例如模块10至模块40的功能，为避免重复，这里不再赘述。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据率SDRAM(DDRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。
所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将所述装置的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。
以上所述实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围，均应包含在本发明的保护范围之内。
Claims (10)
1.一种页面跳转显示方法，其特征在于，包括：
在浏览器上显示当前页面，所述当前页面上显示至少一个原始弹出框，每一所述原始弹出框关联一个原始弹出页面；
实时监听至少一个所述原始弹出框，确定是否存在目标弹出框，获取监听结果；
若所述监听结果为存在所述目标弹出框，则将所述目标弹出框关联的原始弹出页面确定为目标弹出页面；
基于所述当前页面和所述目标弹出页面，获取定位显示结果；
基于所述定位显示结果，在所述浏览器上显示所述目标弹出页面。
2.如权利要求1所述的页面跳转显示方法，其特征在于，在浏览器上显示当前页面，所述当前页面上显示至少一个原始弹出框，包括：
执行弹出框滚动任务，根据所述弹出框滚动任务，从弹出框数组中选取预设数量的待显示标识；
在所述当前页面上显示与所述待显示标识相对应的原始弹出框。
3.如权利要求1所述的页面跳转显示方法，其特征在于，所述实时监听至少一个所述原始弹出框，确定是否存在目标弹出框，获取监听结果，包括：
获取每一所述原始弹出框对应的弹出框类型；
调用与所述弹出框类型相对应的目标监听器，对所述原始弹出框进行监听，确定是否存在目标弹出框，获取监听结果。
4.如权利要求2所述的页面跳转显示方法，其特征在于，所述基于所述当前页面和所述目标弹出页面，获取定位显示结果，包括：
调用滚动监听事件对所述目标弹出页面进行实时定位，获取所述定位显示结果；
基于所述定位显示结果，在所述浏览器显示的所述当前页面上刷新所述目标弹出页面。
5.如权利要求1所述的页面跳转显示方法，其特征在于，所述基于所述当前页面和所述目标弹出页面，获取定位显示结果，还包括：
基于所述当前页面和所述目标弹出页面，确定目标页面距离；
基于所述目标页面距离，判断所述目标弹出页面是否满足标准显示要求，获取定位显示结果。
6.如权利要求1所述的页面跳转显示方法，其特征在于，基于所述定位显示结果，在所述浏览器上显示所述目标弹出页面，包括：
若所述定位显示结果为所述目标弹出页面满足标准显示要求，则依据所述标准显示要求，在所述浏览器上显示所述目标弹出页面；
若所述定位显示结果为所述目标弹出页面不满足标准显示要求，则根据所述目标页面距离确定所述目标弹出页面对应的显示不全类型；
根据所述显示不全类型对应的页面调整逻辑，在所述浏览器上显示所述目标弹出页面。
7.如权利要求1所述的页面跳转显示方法，其特征在于，所述若所述定位显示结果为所述目标弹出页面不满足标准显示要求，则根据所述目标页面距离确定所述目标弹出页面对应的显示不全类型，包括：
基于所述目标页面距离，获取所述目标弹出页面相对于iframe窗口的顶部距离，基于所述顶部距离，确定所述目标弹出页面对应的显示不全类型；
所述根据所述显示不全类型对应的页面调整逻辑，在所述浏览器上显示所述目标弹出页面，包括：
基于预设滚动事件，对所述目标弹出页面进行实时定位，获取所述目标弹出页面对应的滚动距离；
基于所述滚动距离，根据所述显示不全类型对应的页面调整逻辑，在所述浏览器上显示所述目标弹出页面。
8.一种页面跳转显示装置，其特征在于，包括：
弹出框显示模块，用于在浏览器上显示当前页面，所述当前页面上显示至少一个原始弹出框，每一所述原始弹出框关联一个原始弹出页面；
弹出框监听模块，用于实时监听至少一个所述原始弹出框，确定是否存在目标弹出框，获取监听结果；
页面确定模块，用于当所述监听结果为存在所述目标弹出框时，则将所述目标弹出框关联的原始弹出页面确定为目标弹出页面；
结果获取模块，用于基于所述当前页面和所述目标弹出页面，获取定位显示结果；
页面显示模块，用于基于所述定位显示结果，在所述浏览器上显示所述目标弹出页面。
9.一种计算机设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1至7任一项所述页面跳转显示方法。
10.一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至7任一项所述页面跳转显示方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010658751.8A CN111797344A (zh) | 2020-07-09 | 2020-07-09 | 页面跳转显示方法、装置、计算机设备及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010658751.8A CN111797344A (zh) | 2020-07-09 | 2020-07-09 | 页面跳转显示方法、装置、计算机设备及存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN111797344A true CN111797344A (zh) | 2020-10-20 |
Family
ID=72810664
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010658751.8A Pending CN111797344A (zh) | 2020-07-09 | 2020-07-09 | 页面跳转显示方法、装置、计算机设备及存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111797344A (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114489896A (zh) * | 2022-01-20 | 2022-05-13 | 北京有竹居网络技术有限公司 | 内容显示方法、装置、存储介质及电子设备 |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20120254729A1 (en) * | 2009-12-30 | 2012-10-04 | Beijing Sogou Technology Development Co., Ltd. | Web page element presenting method and system |
| CN103530026A (zh) * | 2013-10-31 | 2014-01-22 | 北京国双科技有限公司 | 网页弹出框定位方法和装置 |
| CN106569651A (zh) * | 2015-10-08 | 2017-04-19 | 北京国双科技有限公司 | 一种页面弹出层位置的定位方法及装置 |
| CN107992505A (zh) * | 2016-10-27 | 2018-05-04 | 腾讯科技（深圳）有限公司 | 一种网页信息处理方法及终端 |
| CN108287925A (zh) * | 2018-03-02 | 2018-07-17 | 北京京东尚科信息技术有限公司 | 一种显示页面元素的方法和装置 |
| CN110362761A (zh) * | 2019-06-27 | 2019-10-22 | 上海淇馥信息技术有限公司 | 一种基于网页地址监听的网页跳转方法、装置和电子设备 |
| CN116910405A (zh) * | 2023-06-28 | 2023-10-20 | 浙江海亮科技有限公司 | 页面处理方法、装置、计算机设备和存储介质 |
-
2020
- 2020-07-09 CN CN202010658751.8A patent/CN111797344A/zh active Pending
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20120254729A1 (en) * | 2009-12-30 | 2012-10-04 | Beijing Sogou Technology Development Co., Ltd. | Web page element presenting method and system |
| CN103530026A (zh) * | 2013-10-31 | 2014-01-22 | 北京国双科技有限公司 | 网页弹出框定位方法和装置 |
| CN106569651A (zh) * | 2015-10-08 | 2017-04-19 | 北京国双科技有限公司 | 一种页面弹出层位置的定位方法及装置 |
| CN107992505A (zh) * | 2016-10-27 | 2018-05-04 | 腾讯科技（深圳）有限公司 | 一种网页信息处理方法及终端 |
| CN108287925A (zh) * | 2018-03-02 | 2018-07-17 | 北京京东尚科信息技术有限公司 | 一种显示页面元素的方法和装置 |
| CN110362761A (zh) * | 2019-06-27 | 2019-10-22 | 上海淇馥信息技术有限公司 | 一种基于网页地址监听的网页跳转方法、装置和电子设备 |
| CN116910405A (zh) * | 2023-06-28 | 2023-10-20 | 浙江海亮科技有限公司 | 页面处理方法、装置、计算机设备和存储介质 |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114489896A (zh) * | 2022-01-20 | 2022-05-13 | 北京有竹居网络技术有限公司 | 内容显示方法、装置、存储介质及电子设备 |
| CN114489896B (zh) * | 2022-01-20 | 2024-04-30 | 北京有竹居网络技术有限公司 | 内容显示方法、装置、存储介质及电子设备 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108376094B (zh) | 通知消息显示方法、装置、计算机设备和存储介质 | |
| CN108848142B (zh) | 消息推送方法、装置、计算机设备和存储介质 | |
| CN111898336B (zh) | 弹幕显示方法、装置、计算机设备及存储介质 | |
| US10216352B2 (en) | Method, device, and storage medium for selecting content of a webpage through automatically scrolling webpage content | |
| CN103970760B (zh) | 一种网页请求处理方法及装置 | |
| CN111796799B (zh) | 子应用开发方法、装置、计算机设备及存储介质 | |
| CN112035186A (zh) | H5页面的预加载及跳转方法、装置、设备及介质 | |
| CN104881273A (zh) | 一种网页渲染的分析方法和终端设备 | |
| CN110597709B (zh) | 混合模式移动应用的交互调试方法、装置和计算机设备 | |
| CN111666007A (zh) | 鼠标跟随特效的实现方法、装置、计算机设备及存储介质 | |
| CN113282488B (zh) | 终端的测试方法及装置、存储介质、终端 | |
| CN112035114A (zh) | 页面回退方法、装置、设备及介质 | |
| CN109190067A (zh) | 浏览器输入框展示方法、装置、计算机设备及存储介质 | |
| CN113127784A (zh) | 大屏数据可视化显示方法、装置、存储介质和计算机设备 | |
| CN111797344A (zh) | 页面跳转显示方法、装置、计算机设备及存储介质 | |
| CN110046072A (zh) | 页面的监控方法、装置、终端及可读存储介质 | |
| WO2019223093A1 (zh) | 显示框处理方法、装置、计算机设备和存储介质 | |
| CN107580253B (zh) | 一种报错页面处理方法、装置、机顶盒及存储介质 | |
| CN111177605B (zh) | 单页面的加载性能监控方法、装置及相关设备 | |
| CN111966440A (zh) | 信息流界面的显示控制方法、装置、终端和存储介质 | |
| CN112035113A (zh) | H5页面的导航栏加载方法、装置、设备及介质 | |
| CN113867868B (zh) | 显示参数确定方法、装置及存储介质 | |
| CN110728736A (zh) | 图片标注方法、装置、计算机设备和存储介质 | |
| CN115729544A (zh) | 桌面组件生成方法、装置、电子设备和可读存储介质 | |
| CN106775790B (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 |