[发明专利]一种在原生HTML5页面中实现单页应用的方法及系统

说明书

本发明公开了一种在原生HTML5页面中实现单页应用的方法，将跳转的页面通过组件页面的方法实现，实现方法如下：在HTML5页面中引入js；当HTML5页面流程执行到需要跳转页面时，通过require按需加载组件页面。HTML5页面在通过require按需加载组件页面的同时调用组件页面的初始化函数。在调用组件页面的初始化函数时，组件中隐藏原HTML5页面全部元素并展示组件页面元素。通过将页面的跳转改为组件页面的方法，避免了移动端页面跳转时需要对主页面数据进行缓存及跳转回主界面时需要重新显示的问题，降低了系统运行故障率同时减少了代码重复率，提高了系统开发质量和速度。

技术领域

本发明涉及页面调度技术领域，具体涉及一种在原生HTML5页面中实现单页应用的方法及系统。

背景技术

前端HTML5页面开发技术发展飞快，各种框架技术争奇斗艳，虽然新的框架有极大技术优势，但开发学习成本较高，又或者正在线上运行中的老工程无法改造支持新的框架。在一些多步骤操作交互页面中，通过页面跳转的方式实现多个页面之间的切换，此时页面之间传递参数较为繁琐且容易出错，随之出现一系列通过url传参、缓存传参等造成的数据丢失、数据未清除等问题，而此现象在移动端的原生HTML5页面中更为严重。所以需要提供一种新的技术思路，解决原生HTML5页面的参数传递问题或页面跳转问题。

发明内容

针对当前原生HTML5页面的参数传递问题或页面跳转问题，本发明提供一种在原生HTML5页面中实现单页应用的方法及系统。

本发明公开了一种在原生HTML5页面中实现单页应用的方法，将跳转的页面通过组件页面的方法实现，实现方法如下：

在HTML5页面中引入js；

当HTML5页面流程执行到需要跳转页面时，通过require按需加载组件页面。

优选地，上述HTML5页面在通过require按需加载组件页面的同时调用组件页面的初始化函数。

优选地，上述在调用组件页面的初始化函数时，组件中隐藏原HTML5页面全部元素并展示组件页面元素。

优选地，上述方法在应用于身份证上传场景时，原HTML5页面通过require加载组件页面的客户信息录入的组件。

优选地，上述客户信息录入组件的建立过程如下：

步骤一：声明一个全局函数init(param,pFn)，其中：init为全局函数的名称、param为传递的数据、pFn为组件执行结束后的回调函数；

步骤二：创建一个jquery的div元素，并将div元素设置为隐藏，将当前页面标签下的所有元素移动到div元素下；

步骤三：创建要弹出显示的页面元素，即创建客户信息录入页面元素，动态添加到当前页面标签节点下，并设置客户信息录入页面元素为显示，同时绑定事件到需要的元素上；

步骤四：客户信息录入页面在操作完毕需返回上一页面时，销毁创建的本客户信息录入页面元素，并将div元素全部移出，同时将之前备份的返回键事件函数做还原。

优选地，上述步骤三中创建要弹出显示的页面元素，如在移动端，需要响应手机的返回键事件，还需将原页面的时间函数做备份，覆盖弹出的显示页面元素中的时间，实现原页面与弹出显示页面时间一致。

一种在原生HTML5页面中实现单页应用的系统，至少包括一台连接了互联网或者局域网系统的计算机，所述计算机内至少包括存储器、处理器、显示器以及网卡，所述存储器中储存有上述在原生HTML5页面中实现单页应用的方法或实现该方法的程序；所述处理器运行上述在原生HTML5页面中实现单页应用的方法的可执行程序；所述显示器显示页面运行过程。

与现有技术相比，本发明的有益效果为：