一种移动端网页折叠屏通用适配方法

摘要

一种移动端网页折叠屏通用适配方法，包括以下具体步骤；S1、获取当前用户点击状态，将需要跳转的目标页面路径以及当前屏幕点击信息传递给导航主体模块；S2、导航主体模块对不同屏幕模块间的接收到的状态进行判断；若接收状态来自点击左屏幕时，则执行S4；S4、导航主体模块根据接收信息判断是否为点击返回按钮事件；若不是，则执行S6；S6、判断右屏幕是否存在未卸载页面；若有，右屏幕根据导航主体模块传递的URL更新页面。

权利要求

1.一种移动端网页折叠屏通用适配方法，其特征在于，包括以下具体步骤；

S1、获取当前用户点击状态，将需要跳转的目标页面路径以及当前屏幕点击信息传递给导航主体模块；

S2、导航主体模块对不同屏幕模块间的接收到的状态进行判断；

若接收的状态来自点击导航主体模块时，则执行S3；

如果接收状态来自点击左屏幕时，则执行S4；

如果接收状态来自点击右屏幕时，则执行S7；

S3、导航主体模块将状态以及待跳转页面URL传递给左屏幕模块；左屏幕模块接收信息更新渲染页面；

S4、导航主体模块根据接收信息判断是否为点击返回按钮事件；

若是，则执行S5，

若不是，则执行S6；

S5、卸载左右屏幕页面，展示导航主体模块页面；

S6、判断右屏幕是否存在未卸载页面；

若有，右屏幕根据导航主体模块传递的URL更新页面；

若没有，右屏幕根据导航主体模块传递的URL创建页面；

S7、左屏幕模块根据右屏幕当前URL更新页面，右屏幕模块根据导航主体模块传递的URL更新页面。

2.根据权利要求1所述的一种移动端网页折叠屏通用适配方法，其特征在于，获取iframe所属的document对象，随后对这个document对象注册事件，监听响应鼠标点击事件，记录目标页面的地址及相关信息；将获取到的事件消息通过iframe间父子通信传递给导航主体模块。

3.根据权利要求1所述的一种移动端网页折叠屏通用适配方法，其特征在于，未展开分屏模式时，整个屏幕展示导航主体模块，导航主体模块将导航部分通过CSS的position属性定位到屏幕任何位置；通过属性的source字段来判断事件来源，同时决定通信模块，将相关属性传递给通信的模块。

说明书

一种移动端网页折叠屏通用适配方法

技术领域

[0001] 本发明涉及网页设计技术领域，尤其涉及一种移动端网页折叠屏通用适配方法。

背景技术

[0002] 近年来，移动智能终端屏幕尺寸增长已成为产品迭代演进的重要特征；随着屏幕尺寸的不断增长，如何同时保证畅快的大屏体验和良好的便携性成了影响用户体验的突出
问题；折叠屏产品形态的出现有效地解决了此类问题；通过屏幕在展开态的大尺寸展示，不
仅可以带来更精美、更震撼的视频/图片效果，为整个产业带来更加丰富的个性化人机交互
体验；

[0003] 由于折叠屏产品长宽比与普通产品的差别较大，且从展开到折叠的过程中可能会出现多种屏幕尺寸，很难有比较好的办法来实现网页的适配。

发明内容

[0004] (一)发明目的

[0005] 为解决背景技术中存在的技术问题，本发明提出一种移动端网页折叠屏通用适配方法，本发明提供一种基于平行视界通用导航模式来实现移动网页的折叠屏通用适配方
法。

[0006] (二)技术方案

[0007] 为解决上述问题，本发明提供了一种移动端网页折叠屏通用适配方法，包括以下具体步骤；

[0008] S1、获取当前用户点击状态，将需要跳转的目标页面路径以及当前屏幕点击信息传递给导航主体模块；

[0009] S2、导航主体模块对不同屏幕模块间的接收到的状态进行判断；

[0010] 若接收的状态来自点击导航主体模块时，则执行S3；

[0011] 如果接收状态来自点击左屏幕时，则执行S4；

[0012] 如果接收状态来自点击右屏幕时，则执行S7；

[0013] S3、导航主体模块将状态以及待跳转页面URL传递给左屏幕模块；左屏幕模块接收信息更新渲染页面；

[0014] S4、导航主体模块根据接收信息判断是否为点击返回按钮事件；

[0015] 若是，则执行S5，

[0016] 若不是，则执行S6；

[0017] S5、卸载左右屏幕页面，展示导航主体模块页面；

[0018] S6、判断右屏幕是否存在未卸载页面；

[0019] 若有，右屏幕根据导航主体模块传递的URL更新页面；

[0020] 若没有，右屏幕根据导航主体模块传递的URL创建页面；

[0021] S7、左屏幕模块根据右屏幕当前URL更新页面，右屏幕模块根据导航主体模块传递的URL更新页面。

[0022] 优选的，获取iframe所属的document对象，随后对这个document对象注册事件，监听响应鼠标点击事件，记录目标页面的地址及相关信息；将获取到的事件消息通过iframe
间父子通信传递给导航主体模块。

[0023] 优选的，未展开分屏模式时，整个屏幕展示导航主体模块，导航主体模块将导航部分通过CSS的position属性定位到屏幕任何位置；通过属性的source字段来判断事件来源，
同时决定通信模块，将相关属性传递给通信的模块。

[0024] 本发明的上述技术方案具有如下有益的技术效果：

[0025] 本发明中，右屏幕永远是最后一个窗口；

[0026] 任何时候，从左屏幕打开的新页面，都会将右屏幕的页面替换掉；从右屏幕打开新页面，原右屏幕页面向左移，新页面在右屏幕打开；

[0027] 任何时候，从左屏幕触发Back，左右屏幕中的所有应用页面都将退出；

[0028] 本发明适用面较广，研发、维护工作量较低。

附图说明

[0029] 图1为本发明提出的一种移动端网页折叠屏通用适配方法的流程图。

具体实施方式

[0030] 为使本发明的目的、技术方案和优点更加清楚明了，下面结合具体实施方式并参照附图，对本发明进一步详细说明。应该理解，这些描述只是示例性的，而并非要限制本发
明的范围。此外，在以下说明中，省略了对公知结构和技术的描述，以避免不必要地混淆本
发明的概念。

[0031] 如图1‑1所示，本发明提出的一种移动端网页折叠屏通用适配方法，包括以下具体步骤；

[0032] S1、获取当前用户点击状态，将需要跳转的目标页面路径以及当前屏幕点击信息传递给导航主体模块；在平行视界通用导航模式下，本方法将前端页面划分为三个模块，分
别为页面导航主体模块，左屏幕模块，右屏幕模块，其中左右屏幕均为iframe实现；

[0033] S2、导航主体模块对不同屏幕模块间的接收到的状态进行判断；

[0034] 若接收的状态来自点击导航主体模块时，则执行S3；

[0035] 如果接收状态来自点击左屏幕时，则执行S4；

[0036] 如果接收状态来自点击右屏幕时，则执行S7；

[0037] S3、导航主体模块将状态以及待跳转页面URL传递给左屏幕模块；左屏幕模块接收信息更新渲染页面；

[0038] S4、导航主体模块根据接收信息判断是否为点击返回按钮事件；

[0039] 若是，则执行S5，

[0040] 若不是，则执行S6；

[0041] S5、卸载左右屏幕页面，展示导航主体模块页面；

[0042] S6、判断右屏幕是否存在未卸载页面；

[0043] 若有，右屏幕根据导航主体模块传递的URL更新页面；

[0044] 若没有，右屏幕根据导航主体模块传递的URL创建页面。

[0045] S7、左屏幕模块根据右屏幕当前URL更新页面，右屏幕模块根据导航主体模块传递的URL更新页面。

[0046] 在一个可选的实施例中，获取iframe所属的document对象，随后对这个document对象注册事件，监听响应鼠标点击事件，记录目标页面的地址及相关信息；将获取到的事件
消息等通过iframe间父子通信传递给导航主体模块。

[0047] 在一个可选的实施例中，未展开分屏模式时，整个屏幕展示导航主体模块，导航主体模块将导航部分通过CSS的position属性定位到屏幕任何位置；通过属性的source字段
来判断事件来源，同时决定通信模块，将相关属性传递给通信的模块。

[0048] 本发明中，具体的步骤1：因为相对于导航主体模块，左右屏幕的iframe中加载的是一个相对独立的document对象，首先我们需要获取iframe所属的document对象，随后对
这个document对象注册事件，监听响应鼠标点击事件，记录目标页面的地址及相关信息；

[0049] 通过javascript的screen.fold方法来获取屏幕展开角度和状态，将获取到的事件消息等通过iframe间父子通信传递给导航主体模块；

[0050] 具体的步骤2:未展开分屏模式时整个屏幕展示导航主体模块，导航主体模块亦可将导航部分通过CSS的position属性定位到屏幕任何位置(如定位到左屏幕下方位置，即可
做出类似微信聊天页面效果)；

[0051] 通过属性的source字段来判断事件来源，同时决定通信模块，将相关属性传递给通信的模块；

[0052] 具体的左右屏幕卸载方案:当左右屏幕模块iframe接收到导航主体模块的消息时，通过window.location.href进行跳转到目标页面；

[0053] 具体的左右屏幕创建方案：

[0054] 通过创建相应的iframe达到左右屏幕的创建展示。

[0055] 应当理解的是，本发明的上述具体实施方式仅仅用于示例性说明或解释本发明的原理，而不构成对本发明的限制。因此，在不偏离本发明的精神和范围的情况下所做的任何
修改、等同替换、改进等，均应包含在本发明的保护范围之内。此外，本发明所附权利要求旨
在涵盖落入所附权利要求范围和边界、或者这种范围和边界的等同形式内的全部变化和修
改例。