CN112100555A - 一种在原生html5页面中实现单页应用的方法及系统 - Google Patents
一种在原生html5页面中实现单页应用的方法及系统 Download PDFInfo
- Publication number
- CN112100555A CN112100555A CN202010832448.5A CN202010832448A CN112100555A CN 112100555 A CN112100555 A CN 112100555A CN 202010832448 A CN202010832448 A CN 202010832448A CN 112100555 A CN112100555 A CN 112100555A
- Authority
- CN
- China
- Prior art keywords
- page
- component
- html5
- native
- application
- 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 44
- 230000006870 function Effects 0.000 claims description 26
- 230000008569 process Effects 0.000 claims description 4
- 238000010586 diagram Methods 0.000 description 3
- 230000005540 biological transmission Effects 0.000 description 2
- 230000018109 developmental process Effects 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 230000003993 interaction Effects 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000033772 system development Effects 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 230000002452 interceptive effect Effects 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/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
- G06F16/986—Document structures and storage, e.g. HTML extensions
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)
- Information Transfer Between Computers (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
本发明公开了一种在原生HTML5页面中实现单页应用的方法，将跳转的页面通过组件页面的方法实现，实现方法如下：在HTML5页面中引入js；当HTML5页面流程执行到需要跳转页面时，通过require按需加载组件页面。HTML5页面在通过require按需加载组件页面的同时调用组件页面的初始化函数。在调用组件页面的初始化函数时，组件中隐藏原HTML5页面全部元素并展示组件页面元素。通过将页面的跳转改为组件页面的方法，避免了移动端页面跳转时需要对主页面数据进行缓存及跳转回主界面时需要重新显示的问题，降低了系统运行故障率同时减少了代码重复率，提高了系统开发质量和速度。
Description
技术领域
本发明涉及页面调度技术领域，具体涉及一种在原生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页面中实现单页应用的方法的可执行程序；所述显示器显示页面运行过程。
与现有技术相比，本发明的有益效果为：
采用本发明的一种在原生HTML5页面中实现单页应用的方法及系统后，通过将页面的跳转改为组件页面的方法，避免了移动端页面跳转时需要对主页面数据进行缓存及跳转回主界面时需要重新显示的问题，降低了系统运行故障率；组件的可复用性，减少了代码重复率，提高了系统开发质量和速度。使得原生HTML5页面实现了单页面与用户进行多步骤操作交互的功能。
附图说明
图1是本发明一种在原生HTML5页面中实现单页应用的方法的系统工作流程图。
图2是本发明一种在原生HTML5页面中实现单页应用的方法应用于客户信息录入时信息录入组件建立流程图。
图3是本发明一种在原生HTML5页面中实现单页应用的方法应用于客户信息录入时信息录入组件建立的具体实施例流程图。
具体实施方式
为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明的一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。
下面结合附图对本发明做进一步的详细描述：
参见图1，一种在原生HTML5页面中实现单页应用的方法，将跳转的页面通过组件页面的方法实现，包括如下方法：
在HTML5页面中引入js，所述js为要实现的子页面js代码，或者为要跳转进入的页面代码；
当HTML5页面流程执行到需要跳转页面时，通过require按需加载组件页面。
具体实施时，上述HTML5页面在通过require按需加载组件页面的同时调用组件页面的初始化函数。
具体实施时，上述在调用组件页面的初始化函数时，组件中隐藏原HTML5页面全部元素并展示组件页面元素。
具体实施时，上述方法在应用于身份证上传场景时，原HTML5页面通过require加载组件页面的客户信息录入的组件。
参见图2，具体实施时，上述客户信息录入组件的建立过程如下：
步骤一：声明一个全局函数init(param,pFn)，其中：init为全局函数的名称、param为传递的数据、pFn为组件执行结束后的回调函数；
步骤二：创建一个jquery的div元素，并将div元素设置为隐藏，将当前页面标签下的所有元素移动到div元素下(这里的div元素可以是p、span等任意标签，甚至是t、abc等自定义标签)；
步骤三：创建要弹出显示的页面元素，即创建客户信息录入页面元素，动态添加到当前页面标签节点下，并设置客户信息录入页面元素为显示，同时绑定事件到需要的元素上；
步骤四：客户信息录入页面在操作完毕需返回上一页面时，销毁创建的本客户信息录入页面元素，并将div元素全部移出，同时将之前备份的返回键事件函数做还原。
具体实施时，上述步骤三中创建要弹出显示的页面元素，如在移动端，需要响应手机的返回键事件(所述返回键事件通常是调用一个由app原生代码提供的全局函数)，还需将原页面的时间函数做备份，覆盖弹出的显示页面元素中的时间，实现原页面与弹出显示页面时间一致。
如图3所示，当HTML5页面需要调用组件时，在组件代码内先声明一个全局函数init(param,pFn)，其中：init为全局函数的名称、param为传递的数据、pFn为组件执行结束后的回调函数；然后创建一个jquery的div元素，并将div元素设置为隐藏，将当前页面标签下的所有元素移动到div元素下；然后创建要弹出显示的页面元素，即创建客户信息录入页面元素，动态添加到当前页面标签节点下，并设置客户信息录入页面元素为显示，同时绑定事件到需要的元素上；最后在客户信息录入页面在操作完毕需返回上一页面时，销毁创建的本客户信息录入页面元素，并将div元素全部移出，同时将之前备份的返回键事件函数做还原。
一种在原生HTML5页面中实现单页应用的系统，至少包括一台连接了互联网或者局域网系统的计算机，所述计算机内至少包括存储器、处理器、显示器以及网卡，所述存储器中储存有上述在原生HTML5页面中实现单页应用的方法或实现该方法的程序；所述处理器运行上述在原生HTML5页面中实现单页应用的方法的可执行程序；所述显示器显示页面运行过程。
采用本发明的一种在原生HTML5页面中实现单页应用的方法及系统后，通过将页面的跳转改为组件页面的方法，避免了移动端页面跳转时需要对主页面数据进行缓存及跳转回主界面时需要重新显示的问题，降低了系统运行故障率；组件的可复用性，减少了代码重复率，提高了系统开发质量和速度。使得原生HTML5页面实现了单页面与用户进行多步骤操作交互的功能。
以上仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。
Claims (7)
1.一种在原生HTML5页面中实现单页应用的方法，将跳转的页面通过组件页面的方法实现，其特征在于：
在HTML5页面中引入js；
当HTML5页面流程执行到需要跳转页面时，通过require按需加载组件页面。
2.根据权利要求1所述的一种在原生HTML5页面中实现单页应用的方法，其特征在于：所述HTML5页面在通过require按需加载组件页面的同时调用组件页面的初始化函数。
3.根据权利要求2所述的一种在原生HTML5页面中实现单页应用的方法，其特征在于：所述在调用组件页面的初始化函数时，组件中隐藏原HTML5页面全部元素并展示组件页面元素。
4.根据权利要求1所述的一种在原生HTML5页面中实现单页应用的方法，其特征在于：所述方法在应用于身份证上传场景时，原HTML5页面通过require加载组件页面的客户信息录入的组件。
5.根据权利要求4所述的一种在原生HTML5页面中实现单页应用的方法，其特征在于：所述客户信息录入组件的建立过程如下：
步骤一：声明一个全局函数init(param,pFn)，其中：init为全局函数的名称、param为传递的数据、pFn为组件执行结束后的回调函数；
步骤二：创建一个jquery的div元素，并将div元素设置为隐藏，将当前页面标签下的所有元素移动到div元素下；
步骤三：创建要弹出显示的页面元素，即创建客户信息录入页面元素，动态添加到当前页面标签节点下，并设置客户信息录入页面元素为显示，同时绑定事件到需要的元素上；
步骤四：客户信息录入页面在操作完毕需返回上一页面时，销毁创建的本客户信息录入页面元素，并将div元素全部移出，同时将之前备份的返回键事件函数做还原。
6.根据权利要求5所述的一种在原生HTML5页面中实现单页应用的方法，其特征在于：所述步骤三中创建要弹出显示的页面元素，如在移动端，需要响应手机的返回键事件，还需将原页面的时间函数做备份，覆盖弹出的显示页面元素中的时间，实现原页面与弹出显示页面时间一致。
7.一种在原生HTML5页面中实现单页应用的系统，至少包括一台连接了互联网或者局域网系统的计算机，其特征在于：所述计算机内至少包括存储器、处理器、显示器以及网卡，所述存储器中储存有上述权利要求1-6中所述的在原生HTML5页面中实现单页应用的方法或实现该方法的程序；所述处理器运行上述权利要求1-6中所述的在原生HTML5页面中实现单页应用的方法的可执行程序；所述显示器显示页面运行过程。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010832448.5A CN112100555B (zh) | 2020-08-18 | 2020-08-18 | 一种在原生html5页面中实现单页应用的方法及系统 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010832448.5A CN112100555B (zh) | 2020-08-18 | 2020-08-18 | 一种在原生html5页面中实现单页应用的方法及系统 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112100555A true CN112100555A (zh) | 2020-12-18 |
| CN112100555B CN112100555B (zh) | 2024-06-25 |
Family
ID=73753831
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010832448.5A Active CN112100555B (zh) | 2020-08-18 | 2020-08-18 | 一种在原生html5页面中实现单页应用的方法及系统 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112100555B (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112764958A (zh) * | 2021-01-27 | 2021-05-07 | 上海淇玥信息技术有限公司 | 一种辅助修复页面故障的方法、装置和电子设备 |
Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107643911A (zh) * | 2017-08-21 | 2018-01-30 | 上海精灵天下数字技术有限公司 | 基于html5的界面交互及展示系统、方法 |
| CN107818171A (zh) * | 2017-11-14 | 2018-03-20 | 北京思特奇信息技术股份有限公司 | 一种基于iframe的页面加载方法及系统 |
| CN108536832A (zh) * | 2018-04-12 | 2018-09-14 | 江南大学 | 一种页面切换智能动画效果应用方法及系统 |
| CN109446459A (zh) * | 2018-10-11 | 2019-03-08 | 北京三快在线科技有限公司 | 页面切换方法以及装置、电子设备及存储介质 |
| CN109871499A (zh) * | 2019-01-16 | 2019-06-11 | 中国平安财产保险股份有限公司 | 页面加载方法及客户端 |
| US20190278438A1 (en) * | 2018-03-09 | 2019-09-12 | Optimizely, Inc. | Determining Variations of Single-Page Applications |
| CN110851133A (zh) * | 2019-10-12 | 2020-02-28 | 深圳前海金融资产交易所有限公司 | 前端组件库、基于前端组件库的网页响应方法及装置 |
| CN111221530A (zh) * | 2020-01-08 | 2020-06-02 | 北京市科学技术情报研究所 | 移动端Web应用界面构建方法、Web应用界面及其操作方法 |
| CN111290912A (zh) * | 2020-01-22 | 2020-06-16 | 北京百度网讯科技有限公司 | 单页面应用性能监控方法、装置和电子设备 |
-
2020
- 2020-08-18 CN CN202010832448.5A patent/CN112100555B/zh active Active
Patent Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107643911A (zh) * | 2017-08-21 | 2018-01-30 | 上海精灵天下数字技术有限公司 | 基于html5的界面交互及展示系统、方法 |
| CN107818171A (zh) * | 2017-11-14 | 2018-03-20 | 北京思特奇信息技术股份有限公司 | 一种基于iframe的页面加载方法及系统 |
| US20190278438A1 (en) * | 2018-03-09 | 2019-09-12 | Optimizely, Inc. | Determining Variations of Single-Page Applications |
| CN108536832A (zh) * | 2018-04-12 | 2018-09-14 | 江南大学 | 一种页面切换智能动画效果应用方法及系统 |
| CN109446459A (zh) * | 2018-10-11 | 2019-03-08 | 北京三快在线科技有限公司 | 页面切换方法以及装置、电子设备及存储介质 |
| CN109871499A (zh) * | 2019-01-16 | 2019-06-11 | 中国平安财产保险股份有限公司 | 页面加载方法及客户端 |
| CN110851133A (zh) * | 2019-10-12 | 2020-02-28 | 深圳前海金融资产交易所有限公司 | 前端组件库、基于前端组件库的网页响应方法及装置 |
| CN111221530A (zh) * | 2020-01-08 | 2020-06-02 | 北京市科学技术情报研究所 | 移动端Web应用界面构建方法、Web应用界面及其操作方法 |
| CN111290912A (zh) * | 2020-01-22 | 2020-06-16 | 北京百度网讯科技有限公司 | 单页面应用性能监控方法、装置和电子设备 |
Non-Patent Citations (4)
| Title |
|---|
| JAEWON OH 等: "Automated Transformation of Template-Based Web Applications into Single-Page Applications", 《2013 IEEE 37TH ANNUAL COMPUTER SOFTWARE AND APPLICATIONS CONFERENCE》, 31 October 2013 (2013-10-31), pages 292 - 302 * |
| KING-W: "require.js实现单页web应用（SPA）", pages 1 - 5, Retrieved from the Internet <URL:https://blog.csdn.net/qq_33401924/article/details/53815922> * |
| 刘金羽: "基于Spring Boot的单页网站设计与实现", 《电脑编程技巧与维护》, 28 March 2020 (2020-03-28), pages 35 - 37 * |
| 百度小程序技术: "10分钟彻底搞懂单页面应用路由", pages 1, Retrieved from the Internet <URL:https://segmentfault.com/a/1190000023509417> * |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112764958A (zh) * | 2021-01-27 | 2021-05-07 | 上海淇玥信息技术有限公司 | 一种辅助修复页面故障的方法、装置和电子设备 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN112100555B (zh) | 2024-06-25 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111104635B (zh) | 一种表格网页的生成方法和装置 | |
| CN100444163C (zh) | 一种网页显示页面的配置方法 | |
| CN104685469A (zh) | 用于web应用程序的后台应用程序页面架构 | |
| CN107959615B (zh) | 一种数据传输的方法、用户设备以及业务设备 | |
| CN109582884B (zh) | 保险产品分享链接生成方法、装置、介质和计算机设备 | |
| CN103309695A (zh) | 一种加载图标的方法和终端 | |
| CN114138372A (zh) | 前端组件加载方法及装置 | |
| US20240007701A1 (en) | Continuing video playback when switching from a dynamic page to a non-dynamic page | |
| US20240289144A1 (en) | Method, apparatus, system and storage medium for information processing | |
| CN111880789A (zh) | 页面渲染方法、装置、服务端和计算机可读存储介质 | |
| CN114035865B (zh) | 启动小程序的方法、装置、设备以及存储介质 | |
| CN112100555A (zh) | 一种在原生html5页面中实现单页应用的方法及系统 | |
| CN110020242A (zh) | 一种基于Web的文档阅读进度同步方法及装置 | |
| CN114385124A (zh) | 基于Vue框架的独立页面的跳转方法、装置及设备 | |
| CN112214250A (zh) | 一种应用程序组件的加载方法和装置 | |
| WO2024067319A1 (en) | Method and system for creating stickers from user-generated content | |
| CN110221830B (zh) | 一种在PC上加载WebView的方法及系统 | |
| CN114756228A (zh) | 页面处理方法、装置、设备及存储介质 | |
| CN112187887A (zh) | 用于多页面的网页实时通信方法、装置、电子设备 | |
| CN102508864A (zh) | 一种基于Tapestry框架的图片实时预览方法 | |
| CN114791984B (zh) | 导航树显示方法、导航树显示装置和电子设备 | |
| CN110599112A (zh) | 一种网络页面开发、维护方法和装置 | |
| CN115801777A (zh) | 微件组件的处理方法、装置、设备、存储介质及程序产品 | |
| CN115329720A (zh) | 一种文档展示方法、装置、设备及存储介质 | |
| CN115102916A (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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |