CN111124367A - 一种元素位置的调整方法及装置 - Google Patents
一种元素位置的调整方法及装置 Download PDFInfo
- Publication number
- CN111124367A CN111124367A CN201811286391.2A CN201811286391A CN111124367A CN 111124367 A CN111124367 A CN 111124367A CN 201811286391 A CN201811286391 A CN 201811286391A CN 111124367 A CN111124367 A CN 111124367A
- Authority
- CN
- China
- Prior art keywords
- preset
- webpage
- inline frame
- height
- size
- 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
- 238000005096 rolling process Methods 0.000 claims abstract description 46
- 238000012544 monitoring process Methods 0.000 claims abstract description 22
- 238000003860 storage Methods 0.000 claims description 17
- 239000000725 suspension Substances 0.000 claims description 8
- 238000011161 development Methods 0.000 abstract description 2
- 238000004590 computer program Methods 0.000 description 10
- 238000010586 diagram Methods 0.000 description 10
- 238000012545 processing Methods 0.000 description 6
- 230000008901 benefit Effects 0.000 description 5
- 230000008859 change Effects 0.000 description 5
- 230000006870 function Effects 0.000 description 5
- 230000008569 process Effects 0.000 description 4
- 230000003287 optical effect Effects 0.000 description 3
- 230000004048 modification Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000003044 adaptive effect Effects 0.000 description 1
- 230000005540 biological transmission Effects 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 238000004519 manufacturing process Methods 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 230000001960 triggered effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/20—Software design
- G06F8/24—Object-oriented
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本发明公开了一种元素位置的调整方法及装置，涉及网页开发技术领域，为解决现有的页面调整时，页面中的内联框架所引入的子网页中元素位置会出现错位的问题。本发明的方法包括：采用部署在子网页中的第一脚本文件监听父网页中是否发生预设操作事件；如果发生所述预设操作事件，则确定所述预设操作事件的类别；如果所述预设操作事件的类别为滚动事件，则确定所述滚动事件对应的滚动距离；根据所述滚动距离对所述子网页中的预设元素的位置进行调整。本发明适合应用在元素位置的调整中。
Description
技术领域
本发明涉及网页开发技术领域，尤其涉及一种元素位置的调整方法及装置。
背景技术
网站作为当前广泛使用的浏览媒介，已经成为人们日常生活中不可或缺的一个组成部分。在实际应用场景中，在一个网站的网页中可以引入第三方的web网页，例如可以将被引入的网页通过网页内联框架(简称内联框架)的形式在主网页中进行展示。
目前，在网页中引入第三方网页并在内联框架中进行展示时，为了避免设定内联框架高度固定时而出现滚动条影响用户体验，通常会设定内联框架高度自适应。然而，当内联框架高度自适应时，第三方网页中的弹窗等元素(或称组件)的位置只能是相对于内联框架布局的，当浏览器页面调整时，容易产生第三方网页中的弹窗等元素布局错位的情况。
发明内容
鉴于上述问题，本发明提供一种元素位置的调整方法及装置，主要目的在于对内联框架所加载的子网页中的元素位置进行调整以提高元素布局的性能。
为解决上述技术问题，第一方面，本发明提供了一种元素位置的调整方法，该方法包括：
采用部署在子网页中的第一脚本文件监听父网页中是否发生预设操作事件，所述子网页通过预设内联框架加载在所述父网页中；
如果发生所述预设操作事件，则确定所述预设操作事件的类别；
如果所述预设操作事件的类别为滚动事件，则确定所述滚动事件对应的滚动距离；
根据所述滚动距离对所述子网页中的预设元素的位置进行调整。
可选的，所述父网页中部署有第二脚本文件，所述第二脚本文件用于在监听到尺寸调整事件时，触发所述父网页中的预设内联框架的尺寸调整，所述方法还包括：
如果所述预设操作事件的类别为尺寸调整事件，则通过部署在所述父网页中的第二脚本文件触发对所述父网页中的预设内联框架的尺寸进行调整，以使得所述预设内联框架的尺寸与所述父网页调整后的尺寸相匹配。
可选的，所述对所述父网页中的预设内联框架的尺寸进行调整，包括：
获取所述尺寸调整事件对应的调整后的父网页的内容的尺寸；
根据所述父网页的内容的尺寸，对所述预设内联框架的尺寸进行调整，以使得所述预设内联框架的尺寸与调整后的所述父网页的尺寸相匹配。
可选的，所述尺寸调整事件为高度调整事件，所述对所述父网页中的预设内联框架的尺寸进行调整，包括：
获取所述预设内联框架的调整前高度，所述预设内联框架的调整前高度与发生所述高度调整事件前的父网页的高度相匹配；
获取所述高度调整事件对应的调整高度；
根据所述预设内联框架的调整前高度和所述调整高度，计算调整后的预设内联框架的高度；
将所述预设内联框架的高度调整为所述调整后的预设内联框架的高度，以使得所述预设内联框架的高度与调整后的所述父网页的高度相匹配。
可选的，所述预设内联框架为iframe框架；和/或，
所述预设元素为弹窗元素、页面悬浮元素中的至少一种。
第二方面，本发明还提供了一种元素位置的调整装置，该装置包括：
监听单元，用于采用部署在子网页中的第一脚本文件监听父网页中是否发生预设操作事件，所述子网页通过预设内联框架加载在所述父网页中；
确定单元，用于如果发生所述预设操作事件，则确定所述预设操作事件的类别；
所述确定单元，还用于如果所述预设操作事件的类别为滚动事件，则确定所述滚动事件对应的滚动距离；
调整单元，用于根据所述滚动距离对所述子网页中的预设元素的位置进行调整。
可选的，所述父网页中部署有第二脚本文件，所述第二脚本文件用于在监听到尺寸调整事件时，触发所述父网页中的预设内联框架的尺寸调整，
所述调整单元，还用于如果所述预设操作事件的类别为尺寸调整事件，则通过部署在所述父网页中的第二脚本文件触发对所述父网页中的预设内联框架的尺寸进行调整，以使得所述预设内联框架的尺寸与所述父网页调整后的尺寸相匹配。
可选的，所述调整单元包括：
第一获取模块，用于获取所述尺寸调整事件对应的调整后的父网页的内容的尺寸；
第一调整模块，用于根据所述父网页的内容的尺寸，对所述预设内联框架的尺寸进行调整，以使得所述预设内联框架的尺寸与调整后的所述父网页的尺寸相匹配。
可选的，所述尺寸调整事件为高度调整事件，所述调整单元还包括：
第二获取模块，用于获取所述预设内联框架的调整前高度，所述预设内联框架的调整前高度与发生所述高度调整事件前的父网页的高度相匹配；
所述第二获取模块，还用于获取所述高度调整事件对应的调整高度；
第二调整模块，用于根据所述预设内联框架的调整前高度和所述调整高度，计算调整后的预设内联框架的高度；
所述第二调整模块，还用于将所述预设内联框架的高度调整为所述调整后的预设内联框架的高度，以使得所述预设内联框架的高度与调整后的所述父网页的高度相匹配。
可选的，所述预设内联框架为iframe框架；和/或，
所述预设元素为弹窗元素、页面悬浮元素中的至少一种。
为了实现上述目的，根据本发明的第三方面，提供了一种存储介质，所述存储介质包括存储的程序，其中，在所述程序运行时控制所述存储介质所在设备执行上述所述的元素位置的调整方法。
为了实现上述目的，根据本发明的第四方面，提供了一种处理器，所述处理器用于运行程序，其中，所述程序运行时执行上述所述的元素位置的调整方法。
借由上述技术方案，本发明提供的元素位置的调整方法及装置，对于现有技术当内联框架高度自适应时，被引入网页的弹窗等元素只能是相对于内联框架布局而造成的组件布局错位的问题，本发明通过利用在内联框架所加载的子网页中配置的第一脚本文件，监听父网页是否存在预设操作事件，若存在则进一步确定预设操作事件的类别，当预设操作事件为滚动事件时，则获取页面的滚动距离，并根据页面滚动距离对内联框架所加载的子网页中的预设元素位置进行调整，因此相比于现有技术，本发明在内联框架中元素布局时，可以通过配置脚本文件监听网页中是否存在预设操作事件，并在页面发生滚动时根据滚动距离对预设元素位置进行调整，避免了当页面发生滚动时子网页中的元素位置错乱的问题，有效提高了元素位置布局的准确性。
上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。
附图说明
通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：
图1示出了本发明实施例提供的一种元素位置的调整方法流程图；
图2示出了本发明实施例提供的另一种元素位置的调整方法流程图；
图3示出了本发明实施例提供的一种元素位置的调整装置的组成框图；
图4示出了本发明实施例提供的另一种元素位置的调整装置的组成框图。
具体实施方式
下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。
为了提高内联框架中所加载的子网页的元素位置布局的性能，本发明实施例提供了一种元素位置的调整方法，如图1所示，该方法包括：
101、采用部署在子网页中的第一脚本文件监听父网页中是否发生预设操作事件。
其中，所述子网页通过预设内联框架加载在所述父网页中。而所述内联框架可以为iframe框架，所述脚本文件可以为js文件，所述预设操作事件可以为根据不同的应用场景进行设定，例如设定预设操作事件为页面滚动事件，或者设定预设操作事件为页面窗口缩放事件等，本发明实施例对此不做具体限定。
需要说明的是，网页中部署的脚本文件是指将Javascript脚本放入一个文件类并以js扩展名命名一种文本脚本，并且该脚本文件可以接收事件。在本发明实施例中，设定配置在子网页中的脚本文件接收父网页中的预设操作事件，因此当父网页中一旦发生了预设操作事件，脚本文件可以接收到该事件而实现本步骤中所述的监听操作。
102、如果发生所述预设操作事件，则确定所述预设操作事件的类别。
其中，所述预设操作事件的类别可以页面滚动事件，或者页面尺寸调整事件。需要说明的是，当父网页存在不同类别的操作时，对内联框架所加载的子网页中的元素动态调整布局需要采取不同的措施，因此在本步骤中需要首先确定预设操作事件的类别，以便于进一步对元素布局进行调整。
103、如果所述预设操作事件的类别为滚动事件，则确定所述滚动事件对应的滚动距离。
需要说明的是，对于每个网页，构成该网页的全部元素均在网页中具有一一对应的坐标值，因此本步骤具体可以为预先设定一个参照物，并通过该参照物在页面滚动前和滚动后分别对应的网页中元素坐标确定滚动距离，示例性的，设定参照物为加载网页的浏览器顶端，并在页面发生滚动前获取到浏览器顶端在页面中对应元素的横坐标为X1，当发生滚动事件时，获取到页面滚动后浏览器顶端在页面中对应的元素的横坐标为X2，则此时可以确定此次滚动事件的滚动距离为X1-X2，但不限于此。
104、根据所述滚动距离对所述子网页中的预设元素的位置进行调整。
其中，所述预设元素为弹窗元素、页面悬浮元素中的至少一种。具体地，本步骤可以为直接根据页面滚动距离调整预设元素布局，也可以为根据滚动距离，进一步结合预设元素在内联框架中的位置和内联框架在网页中的位置进行调整，本发明实施例对此不做具体限定。
需要说明的是，当页面发生滚动时，页面中的内联框架会随着页面滚动而滚动，若内联框架中所加载的子网页的弹窗、页面悬浮组件按照初始布局不再改变位置，则会存在这些元素随着内联框架滚动出现布局错位的问题，无法在浏览器窗口中进行正常展示。而在本发明实施例中，可以根据滚动距离对预设元素的位置进行动态调整以确保元素布局正常，避免了元素布局错位的问题。
本发明提供的元素位置的调整方法，对于现有技术当内联框架高度自适应时，被引入网页的弹窗等元素只能是相对于内联框架布局而造成的组件布局错位的问题，本发明通过利用在内联框架所加载的子网页中配置的第一脚本文件，监听父网页是否存在预设操作事件，若存在则进一步确定预设操作事件的类别，当预设操作事件为滚动事件时，则获取页面的滚动距离，并根据页面滚动距离对内联框架所加载的子网页中的预设元素位置进行调整，因此相比于现有技术，本发明在内联框架中元素布局时，可以通过配置脚本文件监听网页中是否存在预设操作事件，并在页面发生滚动时根据滚动距离对预设元素位置进行调整，避免了当页面发生滚动时子网页中的元素位置错乱的问题，有效提高了元素位置布局的准确性。
进一步的，作为对图1所示实施例的细化及扩展，本发明实施例还提供了另一种元素位置的调整方法，如图2所示。
201、采用部署在子网页中的第一脚本文件监听父网页中是否发生预设操作事件。
其中，所述子网页通过预设内联框架加载在所述父网页中，而所述预设内联框架为iframe框架。
需要说明的是，网页中部署的脚本文件是指将Javascript脚本放入一个文件类并以js扩展名命名一种文本脚本，并且该脚本文件可以接收事件。在本发明实施例中，设定配置在子网页中的脚本文件接收父网页中的预设操作事件，因此当父网页中一旦发生了预设操作事件，脚本文件可以接收到该事件而实现本步骤中所述的监听操作。
进一步的，所述父网页中部署有第二脚本文件，而所述第二脚本文件用于在监听到尺寸调整事件时，触发所述父网页中的预设内联框架的尺寸调整。同样的，部署在父网页中的第二脚本文件也可以接收事件，而在本发明实施例中设定该脚本文件接收的事件为父页面的尺寸调整事件，并在监听到尺寸调整事件时触发父页面中的内联框架进行尺寸调整。对于本发明实施例，通过在父网页中配置用于监听页面尺寸调整事件并触发内联框架高度改变的脚本文件，和在子网页中配置监听父网页页面滚动事件的脚本文件，实现了对父网页中发生的操作进行实时监听，并对子网页中元素布局进行及时调整，确保了预设元素布局的性能和效率。
202、如果发生所述预设操作事件，则确定所述预设操作事件的类别。
其中，所述预设操作事件的类别为滚动事件或者为尺寸调整事件。具体地，本步骤可以为采集预设操作事件的数据，并根据采集到的数据确定预设操作事件的类别，但不限于此。
203a、如果所述预设操作事件的类别为滚动事件，则确定所述滚动事件对应的滚动距离。
本步骤的具体实施方式可以参考所述步骤103中相应描述，在此不再赘述。
204a、根据所述滚动距离对所述子网页中的预设元素的位置进行调整。
其中，所述预设元素为弹窗元素、页面悬浮元素中的至少一种。具体地，本步骤可以为根据滚动距离、预设元素在内联框架中的位置和内联框架在网页中的位置进行调整。示例性的，当确定预设操作事件为页面滚动事件时，获取到页面滚动前内联框架相对于浏览器顶部的距离a，以及预设元素与内联框架顶端之间的距离b，并且在上述步骤中确定页面滚动距离为c，则在本步骤中按照c-a+b将预设元素位置进行调整。
与所述步骤203a并列的步骤203b、如果所述预设操作事件的类别为尺寸调整事件，则通过部署在所述父网页中的第二脚本文件触发对所述父网页中的预设内联框架的尺寸进行调整。
进一步的，以使得所述预设内联框架的尺寸与所述父网页调整后的尺寸相匹配。需要说明的是，当页面尺寸调整时，若此时内联框架的尺寸不做任何调整，则此时可能存在内联框架在页面内无法全部展示，进而使得子网页中的预设元素所在的位置无法展示，即预设元素存在布局错位的问题。而在本发明实施例中，当发生页面尺寸调整事件时，利用部署在父网页中的脚本文件触发对内联框架的尺寸进行调整以使得内联框架尺寸与调整后的父页面高度相匹配，使得内联框架能够随着页面调整而调整并在页面中进行展示，进而确保预设元素的展示效果。
具体而言，本步骤中对所述父网页中的预设内联框架的尺寸进行调整可以包括：获取所述尺寸调整事件对应的调整后的父网页的内容的尺寸；根据所述父网页的内容的尺寸，对所述预设内联框架的尺寸进行调整，以使得所述预设内联框架的尺寸与调整后的所述父网页的尺寸相匹配。
需要说明的是，上述尺寸调整事件可以具体为高度调整事件或者宽度调整事件等，当发生相应调整事件时，将会对内联框架的高度或者宽度进行自适应调整，以使得调整后的内联框架的尺寸与调整后的父网页的尺寸相适应。
例如，当页面高度调整时，页面中的内容随着页面调整进行等比例缩放后在页面中正常显示，因此本发明实施例中当内联框架高度改变时，在框架内加载的内容同样可以随着内联框架高度的改变而进行等比例缩放，因此内联框架调整后其内部加载的子网页内容可以正常显示。
具体地，在一个实施例中，对所述父网页中的预设内联框架的高度进行调整可以包括：获取所述高度调整事件对应的调整后的父网页的内容的高度；根据所述父网页的内容的高度，对所述预设内联框架的高度进行调整，以使得所述预设内联框架的高度与调整后的所述父网页的高度相匹配。需要说明的是，对于不同网页在其高度发生改变时，在高度改变后的页面内可以显示整个网页的全部内容，也可以显示网页的部分内容，当高度调整后的网页显示的部分内容时，此时可以获取调整后的网页中内容的高度，并与高度调整前父网页中的内联框架高度相比较，若调整后的页面内容高度小于内联框架高度，则可以设定此时内联框架高度即为调整后的父网页内容高度，以对内联框架进行展示，则即可以将内联框架内加载的子网页内容和元素进行正常展示。
可选的，当上述尺寸调整事件为高度调整事件时，本步骤中所述的对所述父网页中的预设内联框架的尺寸进行调整还可以包括：获取所述预设内联框架的调整前高度，所述预设内联框架的调整前高度与发生所述高度调整事件前的父网页的高度相匹配；获取所述高度调整事件对应的调整高度；根据所述预设内联框架的调整前高度和所述调整高度，计算调整后的预设内联框架的高度；将所述预设内联框架的高度调整为所述调整后的预设内联框架的高度，以使得所述预设内联框架的高度与调整后的所述父网页的高度相匹配。进一步的，在获取调整高度时，可以通过采集高度调整事件对应的数据，并从数据中提取本次的调整高度值。对于本发明实施例，通过获取高度事件发生前内联框架的高度，并结合此次高度事件对应的调整高度，计算针对此次高度调整事件需要内联框架适应达到的高度值，并将内联框架的高度设定为计算所得的高度值，使得可以根据页面高度调整适应性调整内联框架高度，进而使得内联框架与调整后的页面相匹配并进行正常展示，避免了当页面高度调整而框架高度未调整造成的内联框架无法正常展示或框架内部内容、元素等布局错乱的问题，从而确保了页面高度调整时内联框架布局的性能，进而提高了内联框架所加载的子网页元素布局的性能。
但需要说明的是，上述应用场景所述的具体实施方式仅仅是示例性的，并非本发明实施例的唯一具体实施方式，在此仅为符合本发明所述的方法的优化实施方式之一。
进一步的，作为对上述图1所示方法的实现，本发明实施例还提供了一种元素位置的调整装置，用于对上述图1所示的方法进行实现。该装置实施例与前述方法实施例对应，为便于阅读，本装置实施例不再对前述方法实施例中的细节内容进行逐一赘述，但应当明确，本实施例中的装置能够对应实现前述方法实施例中的全部内容。如图3所示，该装置包括：监听单元31、确定单元32、调整单元33，其中
监听单元31，可以用于采用部署在子网页中的第一脚本文件监听父网页中是否发生预设操作事件，所述子网页通过预设内联框架加载在所述父网页中。
确定单元32，可以用于如果所述监听单元31监听到发生所述预设操作事件，则确定所述预设操作事件的类别。
所述确定单元32，还可以用于如果所述预设操作事件的类别为滚动事件，则确定所述滚动事件对应的滚动距离。
调整单元33，可以用于根据所述确定单元32确定的所述滚动距离对所述子网页中的预设元素的位置进行调整。
进一步的，作为对上述图2所示方法的实现，本发明实施例还提供了另一种元素位置的调整装置，用于对上述图2所示的方法进行实现。该装置实施例与前述方法实施例对应，为便于阅读，本装置实施例不再对前述方法实施例中的细节内容进行逐一赘述，但应当明确，本实施例中的装置能够对应实现前述方法实施例中的全部内容。如图4所示，该装置包括：监听单元41、监听单元42、调整单元43，其中，
监听单元41，可以用于采用部署在子网页中的第一脚本文件监听父网页中是否发生预设操作事件，所述子网页通过预设内联框架加载在所述父网页中。
确定单元42，可以用于如果所述监听单元41监听到发生所述预设操作事件，则确定所述预设操作事件的类别。
所述确定单元42，还可以用于如果所述预设操作事件的类别为滚动事件，则确定所述滚动事件对应的滚动距离。
调整单元43，可以用于根据所述确定单元42确定的所述滚动距离对所述子网页中的预设元素的位置进行调整。
进一步的，所述调整单元43，还可以用于如果所述预设操作事件的类别为尺寸调整事件，则通过部署在所述父网页中的第二脚本文件触发对所述父网页中的预设内联框架的尺寸进行调整，以使得所述预设内联框架的尺寸与所述父网页调整后的尺寸相匹配。
进一步的，所述调整单元43包括：
第一获取模块4301，可以用于获取所述尺寸调整事件对应的调整后的父网页的内容的尺寸。
第一调整模块4302，可以用于根据所述父网页的内容的尺寸，对所述预设内联框架的尺寸进行调整，以使得所述预设内联框架的尺寸与调整后的所述父网页的尺寸相匹配。
进一步的，所述尺寸调整事件为高度调整事件，所述调整单元43还包括：
第二获取模块4303，可以用于获取所述预设内联框架的调整前高度。
所述第二获取模块4303，可以用于获取所述高度调整事件对应的调整高度。
计算模块4304，可以用于根据所述预设内联框架的调整前高度和所述调整高度，计算调整后的预设内联框架的高度。
第二调整模块4305，可以用于将所述预设内联框架的高度调整为所述调整后的预设内联框架的高度，以使得所述预设内联框架的高度与调整后的所述父网页的高度相匹配。
本发明实施例提供的另一种元素位置的调整装置。所述装置包括：监听单元、确定单元及调整单元。对于现有技术当内联框架高度自适应时，被引入网页的弹窗等元素只能是相对于内联框架布局而造成的组件布局错位的问题，本发明通过利用在内联框架所加载的子网页中配置的第一脚本文件，监听父网页是否存在预设操作事件，若存在则进一步确定预设操作事件的类别，当预设操作事件为滚动事件时，则获取页面的滚动距离，并根据页面滚动距离对内联框架所加载的子网页中的预设元素位置进行调整，因此相比于现有技术，本发明在内联框架中元素布局时，可以通过配置脚本文件监听网页中是否存在预设操作事件，并在页面发生滚动时根据滚动距离对预设元素位置进行调整，避免了当页面发生滚动时子网页中的元素位置错乱的问题，有效提高了元素位置布局的准确性。
所述文本处理装置包括处理器和存储器，上述监听单元31、确定单元32、调整单元33等均作为程序单元存储在存储器中，由处理器执行存储在存储器中的上述程序单元来实现相应的功能。
处理器中包含内核，由内核去存储器中调取相应的程序单元。内核可以设置一个或以上，通过调整内核参数来提高子网页中元素布局的性能。
存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)，存储器包括至少一个存储芯片。
本发明实施例提供了一种存储介质，其上存储有程序，该程序被处理器执行时实现所述元素位置的调整方法。
本发明实施例提供了一种处理器，所述处理器用于运行程序，其中，所述程序运行时执行所述元素位置的调整方法。
本发明实施例提供了一种设备，设备包括处理器、存储器及存储在存储器上并可在处理器上运行的程序，处理器执行程序时实现以下步骤：采用部署在子网页中的第一脚本文件监听父网页中是否发生预设操作事件，所述子网页通过预设内联框架加载在所述父网页中；如果发生所述预设操作事件，则确定所述预设操作事件的类别；如果所述预设操作事件的类别为滚动事件，则确定所述滚动事件对应的滚动距离；根据所述滚动距离对所述子网页中的预设元素的位置进行调整。
进一步的，所述父网页中部署有第二脚本文件，所述第二脚本文件用于在监听到尺寸调整事件时，触发所述父网页中的预设内联框架的尺寸调整，所述方法还包括：
如果所述预设操作事件的类别为尺寸调整事件，则通过部署在所述父网页中的第二脚本文件触发对所述父网页中的预设内联框架的尺寸进行调整，以使得所述预设内联框架的尺寸度与所述父网页调整后的尺寸相匹配。
进一步的，所述对所述父网页中的预设内联框架的尺寸进行调整，包括：
获取所述尺寸调整事件对应的调整后的父网页的内容的尺寸；
根据所述父网页的内容的尺寸，对所述预设内联框架的尺寸进行调整，以使得所述预设内联框架的尺寸与调整后的所述父网页的尺寸相匹配。
进一步的，所述尺寸调整事件为高度调整事件，所述对所述父网页中的预设内联框架的尺寸进行调整，包括：
获取所述预设内联框架的调整前高度，所述预设内联框架的调整前高度与发生所述高度调整事件前的父网页的高度相匹配；
获取所述高度调整事件对应的调整高度；
根据所述预设内联框架的调整前高度和所述调整高度，计算调整后的预设内联框架的高度；
将所述预设内联框架的高度调整为所述调整后的预设内联框架的高度，以使得所述预设内联框架的高度与调整后的所述父网页的高度相匹配。
进一步的，所述预设内联框架为iframe框架；和/或，
所述预设元素为弹窗元素、页面悬浮元素中的至少一种。
本发明实施例中的设备可以是服务器、PC、PAD、手机等。
本发明实施例还提供了一种计算机程序产品，当在数据处理设备上执行时，适于执行初始化有如下方法步骤的程序：采用部署在子网页中的第一脚本文件监听父网页中是否发生预设操作事件，所述子网页通过预设内联框架加载在所述父网页中；如果发生所述预设操作事件，则确定所述预设操作事件的类别；如果所述预设操作事件的类别为滚动事件，则确定所述滚动事件对应的滚动距离；根据所述滚动距离对所述子网页中的预设元素的位置进行调整。
进一步的，所述父网页中部署有第二脚本文件，所述第二脚本文件用于在监听到尺寸调整事件时，触发所述父网页中的预设内联框架的高度调整，所述方法还包括：
如果所述预设操作事件的类别为尺寸调整事件，则通过部署在所述父网页中的第二脚本文件触发对所述父网页中的预设内联框架的尺寸进行调整，以使得所述预设内联框架的尺寸与所述父网页调整后的尺寸相匹配。
进一步的，所述对所述父网页中的预设内联框架的尺寸进行调整，包括：
获取所述尺寸调整事件对应的调整后的父网页的内容的尺寸；
根据所述父网页的内容的尺寸，对所述预设内联框架的尺寸进行调整，以使得所述预设内联框架的尺寸与调整后的所述父网页的尺寸相匹配。
进一步的，所述尺寸调整事件为高度调整事件，所述对所述父网页中的预设内联框架的尺寸进行调整，包括：
获取所述预设内联框架的调整前高度，所述预设内联框架的调整前高度与发生所述高度调整事件前的父网页的高度相匹配；
获取所述高度调整事件对应的调整高度；
根据所述预设内联框架的调整前高度和所述调整高度，计算调整后的预设内联框架的高度；
将所述预设内联框架的高度调整为所述调整后的预设内联框架的高度，以使得所述预设内联框架的高度与调整后的所述父网页的高度相匹配。
进一步的，所述预设内联框架为iframe框架；和/或，
所述预设元素为弹窗元素、页面悬浮元素中的至少一种。
本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。
存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。存储器是计算机可读介质的示例。
计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。
还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括要素的过程、方法、商品或者设备中还存在另外的相同要素。
本领域技术人员应明白，本申请的实施例可提供为方法、系统或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
以上仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。
Claims (10)
1.一种元素位置的调整方法，其特征在于，所述方法包括：
采用部署在子网页中的第一脚本文件监听父网页中是否发生预设操作事件，所述子网页通过预设内联框架加载在所述父网页中；
如果发生所述预设操作事件，则确定所述预设操作事件的类别；
如果所述预设操作事件的类别为滚动事件，则确定所述滚动事件对应的滚动距离；
根据所述滚动距离对所述子网页中的预设元素的位置进行调整。
2.根据权利要求1所述的方法，其特征在于，所述父网页中部署有第二脚本文件，所述第二脚本文件用于在监听到尺寸调整事件时，触发所述父网页中的预设内联框架的尺寸调整，所述方法还包括：
如果所述预设操作事件的类别为尺寸调整事件，则通过部署在所述父网页中的第二脚本文件触发对所述父网页中的预设内联框架的尺寸进行调整，以使得所述预设内联框架的尺寸与所述父网页调整后的尺寸相匹配。
3.根据权利要求2所述的方法，其特征在于，所述对所述父网页中的预设内联框架的尺寸进行调整，包括：
获取所述尺寸调整事件对应的调整后的父网页的内容的尺寸；
根据所述父网页的内容的尺寸，对所述预设内联框架的尺寸进行调整，以使得所述预设内联框架的尺寸与调整后的所述父网页的尺寸相匹配。
4.根据权利要求2所述的方法，其特征在于，所述尺寸调整事件为高度调整事件，所述对所述父网页中的预设内联框架的尺寸进行调整，包括：
获取所述预设内联框架的调整前高度，所述预设内联框架的调整前高度与发生所述高度调整事件前的父网页的高度相匹配；
获取所述高度调整事件对应的调整高度；
根据所述预设内联框架的调整前高度和所述调整高度，计算调整后的预设内联框架的高度；
将所述预设内联框架的高度调整为所述调整后的预设内联框架的高度，以使得所述预设内联框架的高度与调整后的所述父网页的高度相匹配。
5.根据权利要求1或2任一项所述的方法，其特征在于：
所述预设内联框架为iframe框架；和/或，
所述预设元素为弹窗元素、页面悬浮元素中的至少一种。
6.一种元素位置的调整装置，其特征在于，所述装置包括：
监听单元，用于采用部署在子网页中的第一脚本文件监听父网页中是否发生预设操作事件，所述子网页通过预设内联框架加载在所述父网页中；
确定单元，用于如果发生所述预设操作事件，则确定所述预设操作事件的类别；
所述确定单元，还用于如果所述预设操作事件的类别为滚动事件，则确定所述滚动事件对应的滚动距离；
调整单元，用于根据所述滚动距离对所述子网页中的预设元素的位置进行调整。
7.根据权利要求6所述的装置，其特征在于，所述父网页中部署有第二脚本文件，所述第二脚本文件用于在监听到尺寸调整事件时，触发所述父网页中的预设内联框架的尺寸调整，
所述调整单元，还用于如果所述预设操作事件的类别为尺寸调整事件，则通过部署在所述父网页中的第二脚本文件触发对所述父网页中的预设内联框架的尺寸进行调整，以使得所述预设内联框架的尺寸与所述父网页调整后的尺寸相匹配。
8.根据权利要求7所述的装置，其特征在于，所述调整单元包括：
第一获取模块，用于获取所述尺寸调整事件对应的调整后的父网页的内容的尺寸；
第一调整模块，用于根据所述父网页的内容的尺寸，对所述预设内联框架的尺寸进行调整，以使得所述预设内联框架的尺寸与调整后的所述父网页的尺寸相匹配。
9.一种存储介质，其特征在于，所述存储介质包括存储的程序，其中，在所述程序运行时控制所述存储介质所在设备执行权利要求1至权利要求5中任意一项所述的元素位置的调整方法。
10.一种处理器，其特征在于，所述处理器用于运行程序，其中，所述程序运行时执行权利要求1至权利要求5中任意一项所述的元素位置的调整方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811286391.2A CN111124367A (zh) | 2018-10-31 | 2018-10-31 | 一种元素位置的调整方法及装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811286391.2A CN111124367A (zh) | 2018-10-31 | 2018-10-31 | 一种元素位置的调整方法及装置 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN111124367A true CN111124367A (zh) | 2020-05-08 |
Family
ID=70485537
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201811286391.2A Pending CN111124367A (zh) | 2018-10-31 | 2018-10-31 | 一种元素位置的调整方法及装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111124367A (zh) |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102117290A (zh) * | 2009-12-30 | 2011-07-06 | 北京搜狗科技发展有限公司 | 一种展现网页中页面元素的方法及系统 |
| CN104462256A (zh) * | 2014-11-21 | 2015-03-25 | 山东中创软件工程股份有限公司 | 一种页面展示窗口高度的调整方法和装置 |
| WO2016011879A1 (zh) * | 2014-07-24 | 2016-01-28 | 广州市动景计算机科技有限公司 | 网页显示方法和装置 |
| CN105930392A (zh) * | 2016-04-15 | 2016-09-07 | 北京思特奇信息技术股份有限公司 | 一种基于消息传输的跨域iframe高度自适应方法及其系统 |
| CN107992505A (zh) * | 2016-10-27 | 2018-05-04 | 腾讯科技（深圳）有限公司 | 一种网页信息处理方法及终端 |
-
2018
- 2018-10-31 CN CN201811286391.2A patent/CN111124367A/zh active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102117290A (zh) * | 2009-12-30 | 2011-07-06 | 北京搜狗科技发展有限公司 | 一种展现网页中页面元素的方法及系统 |
| WO2016011879A1 (zh) * | 2014-07-24 | 2016-01-28 | 广州市动景计算机科技有限公司 | 网页显示方法和装置 |
| CN104462256A (zh) * | 2014-11-21 | 2015-03-25 | 山东中创软件工程股份有限公司 | 一种页面展示窗口高度的调整方法和装置 |
| CN105930392A (zh) * | 2016-04-15 | 2016-09-07 | 北京思特奇信息技术股份有限公司 | 一种基于消息传输的跨域iframe高度自适应方法及其系统 |
| CN107992505A (zh) * | 2016-10-27 | 2018-05-04 | 腾讯科技（深圳）有限公司 | 一种网页信息处理方法及终端 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108089856B (zh) | 一种页面元素的监听方法及装置 | |
| CN104965659B (zh) | 一种页面信息的预加载方法及装置 | |
| CN106162362B (zh) | 一种视频播放方法及播放器 | |
| CN107526592B (zh) | 一种页面适配方法和装置 | |
| CN105786352A (zh) | 快速定位页面内容的方法、装置及移动终端 | |
| CN104978433A (zh) | 一种网页显示方法及装置 | |
| CN110020339B (zh) | 基于无埋点的网页数据采集方法及装置 | |
| CN107729897B (zh) | 一种文本操作方法、装置及终端 | |
| CN106155654B (zh) | 屏蔽网页操作的方法、装置及电子设备 | |
| CN112149179B (zh) | 基于隐私保护的风险识别方法及装置 | |
| CN111125575A (zh) | 网页数据处理方法和装置 | |
| CN114428657B (zh) | 一种在H5端基于Taro框架的滑动方法与设备 | |
| CN106937173B (zh) | 视频播放方法及装置 | |
| CN107480218B (zh) | 网页显示方法及装置、电子设备、存储介质 | |
| CN109582188B (zh) | 一种实现弹窗内元素定位的方法、装置及相关设备 | |
| CN111277659A (zh) | 手机横屏竖屏显示状态检测方法及装置 | |
| CN110968385A (zh) | 比例显示方法和装置 | |
| CN107450809B (zh) | 页面交互方法、装置以及电子终端 | |
| CN105204720A (zh) | 一种在移动终端上显示背景图片的方法与设备 | |
| CN110941787A (zh) | 一种页面重定向方法及装置 | |
| CN113190321A (zh) | 一种用于应用程序页面上拉刷新的方法及设备 | |
| CN111124367A (zh) | 一种元素位置的调整方法及装置 | |
| CN110968377B (zh) | 界面显示的处理方法及装置 | |
| CN112256356A (zh) | 一种页面数据获取方法和装置 | |
| CN112527424A (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 | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20200508 |