CN116484130A - 一种页面加载方法、装置、设备、介质及程序产品 - Google Patents
一种页面加载方法、装置、设备、介质及程序产品 Download PDFInfo
- Publication number
- CN116484130A CN116484130A CN202310525245.5A CN202310525245A CN116484130A CN 116484130 A CN116484130 A CN 116484130A CN 202310525245 A CN202310525245 A CN 202310525245A CN 116484130 A CN116484130 A CN 116484130A
- Authority
- CN
- China
- Prior art keywords
- page
- webpage
- flutter
- iframe
- loading
- 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
- 238000011068 loading method Methods 0.000 title claims abstract description 76
- 238000000034 method Methods 0.000 claims abstract description 22
- 230000006854 communication Effects 0.000 claims abstract description 21
- 238000004891 communication Methods 0.000 claims abstract description 21
- 230000007175 bidirectional communication Effects 0.000 claims abstract description 10
- 238000004590 computer program Methods 0.000 claims description 16
- 230000001960 triggered effect Effects 0.000 claims description 6
- 230000005540 biological transmission Effects 0.000 abstract description 3
- 230000008569 process Effects 0.000 description 12
- 238000010586 diagram Methods 0.000 description 6
- 230000003993 interaction Effects 0.000 description 5
- 230000000694 effects Effects 0.000 description 4
- 230000009471 action Effects 0.000 description 3
- 238000011161 development Methods 0.000 description 3
- 238000012546 transfer Methods 0.000 description 3
- 230000003287 optical effect Effects 0.000 description 2
- 241000720913 Fuchsia Species 0.000 description 1
- 230000002159 abnormal effect Effects 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 230000006870 function Effects 0.000 description 1
- 230000009191 jumping Effects 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
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/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
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)
Abstract
本申请公开了一种页面加载方法、装置、设备、介质及程序产品，涉及互联网技术领域。该方法包括：基于Flutter应用确定初始对应的Flutter网页页面，并在所述Flutter网页页面中动态创建一个Iframe；获取所述Flutter网页页面的第一页面跳转指令，并通过所述第一页面跳转指令中的页面路由确定跳转页面的页面类型；其中，所述页面类型包括H5页面和Flutter网页页面；根据所述页面类型进行页面跳转，加载所述跳转页面，并基于所述Iframe实现所述H5页面和所述Flutter网页页面之间的双向通信。通过本申请的技术方案，能够支持Flutter网页页面与H5页面的混合使用，同时Flutter网页页面与H5页面之间能够进行数据传递和通信。
Description
技术领域
本发明涉及互联网技术领域，特别涉及一种页面加载方法、装置、设备、介质及程序产品。
背景技术
随着信息时代的不断发展，人们使用移动设备的地方越来越多，同时移动设备中使用H5(Hyper Text Markup Language 5，HTML5，超文本标记语言第五修订版)页面的应用也越来越多。目前，原生页面在加载H5网页资源时，通常情况下使用WebView(网页视图，用于加载网页的控件)实时加载，然而，由于操作系统平台的不同(目前主要是Android系统和iOS系统)，同一操作系统存在着不同的版本、WebView存在着不同的版本，这些客观因素的存在，导致H5页面在加载过程中需要面临一系列不同问题，如兼容性问题、加载慢等问题，影响了用户体验和使用效果。因此，亟须一种方法使得在加载H5页面时克服通过WebView加载而导致的页面加载问题。
发明内容
有鉴于此，本发明的目的在于提供一种页面加载方法、装置、设备、介质及程序产品，能够将原生项目直接转成纯H5代码加载页面，替代通过WebView加载页面的方案。其具体方案如下：
第一方面，本申请公开了一种页面加载方法，包括：
基于Flutter应用确定初始对应的Flutter网页页面，并在所述Flutter网页页面中动态创建一个Iframe；
获取所述Flutter网页页面的第一页面跳转指令，并通过所述第一页面跳转指令中的页面路由确定跳转页面的页面类型；其中，所述页面类型包括H5页面和Flutter网页页面；
根据所述页面类型进行页面跳转，加载所述跳转页面，并基于所述Iframe实现所述H5页面和所述Flutter网页页面之间的双向通信。
可选的，所述根据所述页面类型进行页面跳转，加载所述跳转页面，包括：
当所述跳转页面为所述H5页面时，将所述Iframe显示在所述H5页面，并保持所述H5页面始终显示一个所述Iframe。
可选的，所述基于所述Iframe实现所述H5页面和所述Flutter网页页面之间的双向通信，包括：
基于所述H5页面，获取所述H5页面的第二页面跳转指令；
根据所述第二页面跳转指令，对统一资源定位符字符串进行拦截，以便通过所述统一资源定位符字符串判断是否需要打开新Flutter网页页面。
可选的，所述通过所述统一资源定位符字符串判断是否需要打开新Flutter网页页面，包括：
当基于所述H5页面打开所述新Flutter网页页面时，从Iframe页面栈中清除所述统一资源定位符字符串；
获取预加载H5页面，然后根据所述第二页面跳转指令中的页面路由，在加载所述预加载H5页面时将所述Iframe隐藏，并打开所述新Flutter网页页面。
可选的，所述通过所述统一资源定位符字符串判断是否需要打开新Flutter网页页面，包括：
如果不需要打开所述新Flutter网页页面，则根据所述第二页面跳转指令中的页面路由确定基于所述H5页面打开的新H5页面；
打开并显示所述Iframe，以便通过所述Iframe加载所述新H5页面。
可选的，所述的页面加载方法，还包括：
当基于所述H5页面进行页面返回跳转时，判断当前是否触发预设格式的performance.navigation.type的弹出事件；
如果当前触发所述预设格式的所述performance.navigation.type的弹出事件，则通过所述Iframe调用跨域消息接口执行所述页面返回跳转，以将所述H5页面返回至所述Flutter网页页面。
第二方面，本申请公开了一种页面加载装置，包括：
Iframe创建模块，用于基于Flutter应用确定初始对应的Flutter网页页面，并在所述Flutter网页页面中动态创建一个Iframe；
页面类型确定模块，用于获取所述Flutter网页页面的页面跳转指令，并通过所述页面跳转指令中的页面路由确定跳转页面的页面类型；其中，所述页面类型包括H5页面和Flutter网页页面；
页面通信模块，用于根据所述页面类型进行页面跳转，加载所述跳转页面，并基于所述Iframe实现所述H5页面和所述Flutter网页页面之间的双向通信。
第三方面，本申请公开了一种电子设备，所述电子设备包括处理器和存储器；其中，所述存储器用于存储计算机程序，所述计算机程序由所述处理器加载并执行以实现如前所述的页面加载方法。
第四方面，本申请公开了一种计算机可读存储介质，用于存储计算机程序；其中所述计算机程序被处理器执行时实现如前所述的页面加载方法。
第五方面，本申请公开了一种计算机程序产品，所述计算机程序产品在终端设备上运行时，使得所述终端设备执行如前所述的页面加载方法。
本申请提供了一种页面加载方法，包括：基于Flutter应用确定初始对应的Flutter网页页面，并在所述Flutter网页页面中动态创建一个Iframe；获取所述Flutter网页页面的页面跳转指令，并通过所述页面跳转指令中的页面路由确定跳转页面的页面类型；其中，所述页面类型包括H5页面和Flutter网页页面；根据所述页面类型进行页面跳转，加载所述跳转页面，并基于所述Iframe实现所述H5页面和所述Flutter网页页面之间的双向通信。可见，由于原生项目在打开H5页面时往往基于WebView进行页面之间的交互，而通过本申请的技术方案，根据不同跳转页面的页面类型进行跳转后，利用Iframe实现H5页面和Flutter网页页面之间的双向通信，不仅能够支持Flutter网页页面与H5页面的混合使用，而且可以完全复用原有Native的代码逻辑，进一步实现页面加载的过程。
此外，本申请提供的一种页面加载装置、设备、介质及程序产品，与上述页面加载方法对应，效果同上。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。
图1为本申请公开的一种页面加载方法流程图；
图2为本申请公开的一种通过iframe打开H5页面的场景一；
图3为本申请公开的一种通过iframe打开H5页面的场景二；
图4为本申请公开的一种基于Iframe加载H5页面的示意图；
图5为本申请公开的一种具体的页面加载方法流程图；
图6为本申请公开的一种页面加载装置结构示意图；
图7为本申请公开的一种电子设备结构图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
当前，原生页面在加载H5网页资源时，通常情况下使用WebView(网页视图，用于加载网页的控件)实时加载，然而，由于操作系统平台的不同(目前主要是Android系统和iOS系统)，同一操作系统存在着不同的版本、WebView存在着不同的版本，这些客观因素的存在，导致H5页面在加载过程中需要面临一系列不同问题，如兼容性问题、加载慢等问题，影响了用户体验和使用效果。
为此，本申请提供了一种页面加载方案，能够将原生项目直接转成纯H5代码加载页面，替代通过WebView加载页面的方案，不仅支持Flutter网页页面与H5页面的混合使用，同时Flutter网页页面与H5页面之间能够进行数据传递和通信。
本发明实施例公开了一种页面加载方法，参见图1所示，该方法包括：
步骤S11：基于Flutter应用确定初始对应的Flutter网页页面，并在所述Flutter网页页面中动态创建一个Iframe。
可以理解的是，Flutter是一个由谷歌开发的开源移动应用软件开发工具包，用于为Android、iOS、Windows、macOS、Linux Desktop、Google Fuchsia开发应用。Flutter提供了与其移动端相同的开发体验，这得益于便捷的Dart、Web平台生态的强大，以及Flutter框架的灵活拓展，现在开发者可以直接创建iOS和Android之外的Web应用。Flutter项目应用很广泛，比如配置flutter工具支持Web支持，将支持Android和iOS的项目添加Web支持，创建支持Web的新项目，运行支持Web的项目和Vue Web(H5页面)的混合的页面。
因此，本申请实施例中，基于Flutter应用，通过Flutter网页页面进行页面加载。由于Flutter应用的WebView不支持web运行的flutter项目，因此，为了实现之前的JS(JavaScript)相互调用进行页面加载的方案，必须重新使用一套新的方案来兼容。因为Dart SDK(Software Development Kit，软件开发工具包)是支持web开发的，其中所有的函数都定义在Dart：html(Hyper Text Markup Language，超文本标记语言)这个库里面，在Dart中也可以直接调用该接口，本申请实施例中，通过iframe打开H5页面，实现页面加载过程，HTML内联框架元素(<iframe>)表示嵌套的browsing context，它能够将另一个HTML嵌入到当前页面中。这样可以替换通过WebView加载页面的方案，实现Flutter网页页面与H5页面的混合使用。
步骤S12：获取所述Flutter网页页面的第一页面跳转指令，并通过所述第一页面跳转指令中的页面路由确定跳转页面的页面类型；其中，所述页面类型包括H5页面和Flutter网页页面。
本申请实施例中，当在Flutter网页页面进行页面跳转时，通过页面路由判断跳转的页面是Flutter网页页面还是H5页面。由于Flutter网页页面和H5页面的跳转路径不同，因此，通过页面路由即可以判断出跳转的页面是Flutter网页页面还是H5页面。
步骤S13：根据所述页面类型进行页面跳转，加载所述跳转页面，并基于所述Iframe实现所述H5页面和所述Flutter网页页面之间的双向通信。
在一种具体的实施方式中，通过Flutter网页页面与H5页面进行交互时，如果基于Flutter网页页面跳转的页面为H5页面，需要将所述Iframe显示在所述H5页面，并保持所述H5页面始终显示一个所述Iframe。
可以理解的是，当通过iframe打开H5页面时有以下两种场景：第一种场景如图2所示，Flutter网页页面通过iframe直接打开一个H5页面，H5页面内加载的都是H5页面的内容；第二种场景如图3所示，Flutter网页页面通过iframe打开一个H5页面，进行URL(Uniform Resource Locator，统一资源定位符)拦截后再打开一个Flutter Web页面，也即，Flutter网页页面首先打开一个H5页面，然后在H5页面的基础上再打开一个FlutterWeb页面。由于每个iframe都是一个独立的网页，第二种场景下，当一个主页面中的iframe逐渐增多的时候，其对硬件资源的消耗也会逐渐增高，而且在iPhone设备上基于Safari浏览器打开多个Iframe容器，可能会产生浏览器返回栈异常的问题。因此，本申请实施例中，在打开H5页面时将Iframe显示出来，始终保持一个iframe，这样，克服了打开多个iframe后导致浏览器返回栈异常的问题。
本申请实施例中，基于所述Iframe实现所述H5页面和所述Flutter网页页面之间的双向通信时，如果IFRAME的方式下，在H5页面的基础上再打开一个新Flutter网页页面，通过拦截URL判断是否需要打开新Flutter网页页面，在此过程中，相关的上下文会产生在子应用中，这种方式下，直接将子应用的页面嵌入到宿主应用中指定的区域内进行展示即可，不涉及对子应用的改造，更方便实现。
需要指出的是，如果要打开新Flutter网页页面，需要先将拦截的URL从Iframe页面栈里清除history.back()，再通过加载一个预加载H5页面做中转，根据页面路由，在加载新Flutter网页页面时将Iframe页面隐藏，同时打开新Flutter网页页面。具体的，当基于所述H5页面打开所述新Flutter网页页面时，从Iframe页面栈中清除所述统一资源定位符字符串；获取预加载H5页面，然后根据所述第二页面跳转指令中的页面路由，在加载所述预加载H5页面时将所述Iframe隐藏，并打开所述新Flutter网页页面。可以理解的是，如果再打开一个H5页面时，同样的判断，需要根据页面路由判断是否打开的是新H5页面，如果打开新H5页面，则显示Iframe，并加载新H5页面的内容。具体的，如果不需要打开所述新Flutter网页页面，则根据所述第二页面跳转指令中的页面路由确定基于所述H5页面打开的新H5页面；打开并显示所述Iframe，以便通过所述Iframe加载所述新H5页面。
本申请提供了一种页面加载方法，包括：基于Flutter应用确定初始对应的Flutter网页页面，并在所述Flutter网页页面中动态创建一个Iframe；获取所述Flutter网页页面的页面跳转指令，并通过所述页面跳转指令中的页面路由确定跳转页面的页面类型；其中，所述页面类型包括H5页面和Flutter网页页面；根据所述页面类型进行页面跳转，加载所述跳转页面，并基于所述Iframe实现所述H5页面和所述Flutter网页页面之间的双向通信。可见，由于原生项目在打开H5页面时往往基于WebView进行页面之间的交互，而通过本申请的技术方案，根据不同跳转页面的页面类型进行跳转后，利用Iframe实现H5页面和Flutter网页页面之间的双向通信，不仅能够支持Flutter网页页面与H5页面的混合使用，而且可以完全复用原有Native的代码逻辑，进一步实现页面加载的过程。
如图4所示为示例性提供的基于Iframe加载H5页面的流程示意图。在图上的流程图中主要可以分为两个模块，一个是通过Flutter网页页面打开H5页面；另一个则是Flutter网页页面与Iframe容器内进行通信。可以理解的是，Native app是基于安卓操作系统，采用原生语言开发的应用程序，当加载H5页面时通过WebView进行加载。本申请现在要在Flutter网页页面实现之前的JS相互调用的方案，通过iframe打开H5页面，这样基于Flutter native和WebView项目可以在一套代码同时满足安卓和iOS的项目的前提下，又能满足Flutter网页页面和H5页面一样的效果，支持Flutter网页页面与H5页面的混合使用，不仅解决了Flutter网页页面与H5页面进行数据传递和通信的问题，而且可以完全复用原有Native的代码逻辑。另外，Flutter网页页面与Iframe容器内进行通信时，使用的是一种postMessage方案，通过window.postMessage方法使其适用于安全的实现跨源通信。此方案可以发送消息到Iframe中，同时Iframe也可以发送消息到外部容器里面。可见，图4提供的逻辑可以支持Flutter网页页面与H5页面的混合使用、可以实现Flutter网页页面与H5页面之间的通信，可以通过URL拦截实现Flutter网页页面与H5页面的路由跳转，将以上三部分整合实现本申请方案中的页面加载过程。
在一种具体的实施方式中，对于返回逻辑的处理，当H5页面返回到Flutter网页页面时，参见图5所示，该方法包括：
步骤S21：当基于所述H5页面进行页面返回跳转时，判断当前是否触发预设格式的performance.navigation.type的弹出事件。
步骤S22：如果当前触发所述预设格式的所述performance.navigation.type的弹出事件，则通过所述Iframe调用跨域消息接口执行所述页面返回跳转，以将所述H5页面返回至所述Flutter网页页面。
本申请实施例中，通过调用postmessage(跨域消息接口)实现Flutter网页页面和H5页面之间的跨源通信。可以理解的是，当A经过中转页面打开B页面时，中转页面通过performance.navigation.type来判断自己是从A跳过来的还是B跳过来的。因此，当H5页面返回到Flutter网页页面时，通过预加载H5页面判断是否为预设格式的performance.navigation.type的弹出事件，也即，通过预加载H5页面判断window.performance.navigation.type＝＝2是否为POP(弹出)事件，如果是H5页面返回到Flutter网页页面，则进一步的通过Iframe的window触发一个postMessage给Flutter网页页面执行页面返回的事件。
相应的，本申请实施例还公开了一种页面加载装置，参见图6所示，该装置包括：
Iframe创建模块11，用于基于Flutter应用确定初始对应的Flutter网页页面，并在所述Flutter网页页面中动态创建一个Iframe；
页面类型确定模块12，用于获取所述Flutter网页页面的页面跳转指令，并通过所述页面跳转指令中的页面路由确定跳转页面的页面类型；其中，所述页面类型包括H5页面和Flutter网页页面；
页面通信模块13，用于根据所述页面类型进行页面跳转，加载所述跳转页面，并基于所述Iframe实现所述H5页面和所述Flutter网页页面之间的双向通信。
其中，关于上述各个模块更加具体的工作过程可以参考前述实施例中公开的相应内容，在此不再进行赘述。
由此可见，通过本实施例的上述方案，包括：基于Flutter应用确定初始对应的Flutter网页页面，并在所述Flutter网页页面中动态创建一个Iframe；获取所述Flutter网页页面的页面跳转指令，并通过所述页面跳转指令中的页面路由确定跳转页面的页面类型；其中，所述页面类型包括H5页面和Flutter网页页面；根据所述页面类型进行页面跳转，加载所述跳转页面，并基于所述Iframe实现所述H5页面和所述Flutter网页页面之间的双向通信。可见，由于原生项目在打开H5页面时往往基于WebView进行页面之间的交互，而通过本申请的技术方案，根据不同跳转页面的页面类型进行跳转后，利用Iframe实现H5页面和Flutter网页页面之间的双向通信，不仅能够支持Flutter网页页面与H5页面的混合使用，而且可以完全复用原有Native的代码逻辑，进一步实现页面加载的过程。
进一步的，本申请实施例还公开了一种电子设备，图7是根据一示例性实施例示出的电子设备20结构图，图中内容不能认为是对本申请的使用范围的任何限制。
图7为本申请实施例提供的一种电子设备20的结构示意图。该电子设备20，具体可以包括：至少一个处理器21、至少一个存储器22、电源23、通信接口24、输入输出接口25和通信总线26。其中，所述存储器22用于存储计算机程序，所述计算机程序由所述处理器21加载并执行，以实现前述任一实施例公开的页面加载方法中的相关步骤。另外，本实施例中的电子设备20具体可以为计算机。
本实施例中，电源23用于为电子设备20上的各硬件设备提供工作电压；通信接口24能够为电子设备20创建与外界设备之间的数据传输通道，其所遵循的通信协议是能够适用于本申请技术方案的任意通信协议，在此不对其进行具体限定；输入输出接口25，用于获取外界输入数据或向外界输出数据，其具体的接口类型可以根据具体应用需要进行选取，在此不进行具体限定。
另外，存储器22作为资源存储的载体，可以是只读存储器、随机存储器、磁盘或者光盘等，其上所存储的资源可以包括操作系统221、计算机程序222及数据223等，数据223可以包括各种各样的数据。存储方式可以是短暂存储或者永久存储。
其中，操作系统221用于管理与控制电子设备20上的各硬件设备以及计算机程序222，其可以是Windows Server、Netware、Unix、Linux等。计算机程序222除了包括能够用于完成前述任一实施例公开的由电子设备20执行的页面加载方法的计算机程序之外，还可以进一步包括能够用于完成其他特定工作的计算机程序。
进一步的，本申请实施例还公开了一种计算机可读存储介质，这里所说的计算机可读存储介质包括随机存取存储器(Random Access Memory，RAM)、内存、只读存储器(Read-Only Memory，ROM)、电可编程ROM、电可擦除可编程ROM、寄存器、硬盘、磁碟或者光盘或技术领域内所公知的任意其他形式的存储介质。其中，所述计算机程序被处理器执行时实现前述页面加载方法。关于该方法的具体步骤可以参考前述实施例中公开的相应内容，在此不再进行赘述。
本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其它实施例的不同之处，各个实施例之间相同或相似部分互相参见即可。对于实施例公开的装置而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。
结合本文中所公开的实施例描述的页面加载或算法的步骤可以直接用硬件、处理器执行的软件模块，或者二者的结合来实施。软件模块可以置于随机存储器(RAM)、内存、只读存储器(ROM)、电可编程ROM、电可擦除可编程ROM、寄存器、硬盘、可移动磁盘、CD-ROM、或技术领域内所公知的任意其它形式的存储介质中。
最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
以上对本发明所提供的一种页面加载方法、装置、设备、介质及程序产品进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。
Claims (10)
1.一种页面加载方法，其特征在于，包括：
基于Flutter应用确定初始对应的Flutter网页页面，并在所述Flutter网页页面中动态创建一个Iframe；
获取所述Flutter网页页面的第一页面跳转指令，并通过所述第一页面跳转指令中的页面路由确定跳转页面的页面类型；其中，所述页面类型包括H5页面和Flutter网页页面；
根据所述页面类型进行页面跳转，加载所述跳转页面，并基于所述Iframe实现所述H5页面和所述Flutter网页页面之间的双向通信。
2.根据权利要求1所述的页面加载方法，其特征在于，所述根据所述页面类型进行页面跳转，加载所述跳转页面，包括：
当所述跳转页面为所述H5页面时，将所述Iframe显示在所述H5页面，并保持所述H5页面始终显示一个所述Iframe。
3.根据权利要求1所述的页面加载方法，其特征在于，所述基于所述Iframe实现所述H5页面和所述Flutter网页页面之间的双向通信，包括：
基于所述H5页面，获取所述H5页面的第二页面跳转指令；
根据所述第二页面跳转指令，对统一资源定位符字符串进行拦截，以便通过所述统一资源定位符字符串判断是否需要打开新Flutter网页页面。
4.根据权利要求3所述的页面加载方法，其特征在于，所述通过所述统一资源定位符字符串判断是否需要打开新Flutter网页页面，包括：
当基于所述H5页面打开所述新Flutter网页页面时，从Iframe页面栈中清除所述统一资源定位符字符串；
获取预加载H5页面，然后根据所述第二页面跳转指令中的页面路由，在加载所述预加载H5页面时将所述Iframe隐藏，并打开所述新Flutter网页页面。
5.根据权利要求3所述的页面加载方法，其特征在于，所述通过所述统一资源定位符字符串判断是否需要打开新Flutter网页页面，包括：
如果不需要打开所述新Flutter网页页面，则根据所述第二页面跳转指令中的页面路由确定基于所述H5页面打开的新H5页面；
打开并显示所述Iframe，以便通过所述Iframe加载所述新H5页面。
6.根据权利要求1至5任一项所述的页面加载方法，其特征在于，还包括：
当基于所述H5页面进行页面返回跳转时，判断当前是否触发预设格式的performance.navigation.type的弹出事件；
如果当前触发所述预设格式的所述performance.navigation.type的弹出事件，则通过所述Iframe调用跨域消息接口执行所述页面返回跳转，以将所述H5页面返回至所述Flutter网页页面。
7.一种页面加载装置，其特征在于，包括：
Iframe创建模块，用于基于Flutter应用确定初始对应的Flutter网页页面，并在所述Flutter网页页面中动态创建一个Iframe；
页面类型确定模块，用于获取所述Flutter网页页面的页面跳转指令，并通过所述页面跳转指令中的页面路由确定跳转页面的页面类型；其中，所述页面类型包括H5页面和Flutter网页页面；
页面通信模块，用于根据所述页面类型进行页面跳转，加载所述跳转页面，并基于所述Iframe实现所述H5页面和所述Flutter网页页面之间的双向通信。
8.一种电子设备，其特征在于，所述电子设备包括处理器和存储器；其中，所述存储器用于存储计算机程序，所述计算机程序由所述处理器加载并执行以实现如权利要求1至6任一项所述的页面加载方法。
9.一种计算机可读存储介质，其特征在于，用于存储计算机程序；其中所述计算机程序被处理器执行时实现如权利要求1至6任一项所述的页面加载方法。
10.一种计算机程序产品，其特征在于，所述计算机程序产品在终端设备上运行时，使得所述终端设备执行权利要求1至6任一项所述的页面加载方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310525245.5A CN116484130A (zh) | 2023-05-09 | 2023-05-09 | 一种页面加载方法、装置、设备、介质及程序产品 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202310525245.5A CN116484130A (zh) | 2023-05-09 | 2023-05-09 | 一种页面加载方法、装置、设备、介质及程序产品 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN116484130A true CN116484130A (zh) | 2023-07-25 |
Family
ID=87225061
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202310525245.5A Pending CN116484130A (zh) | 2023-05-09 | 2023-05-09 | 一种页面加载方法、装置、设备、介质及程序产品 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN116484130A (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN118051294A (zh) * | 2024-04-16 | 2024-05-17 | 湖南兴盛优选网络科技有限公司 | 一种基于Flutter的移动端混合页面的管理方法 |
-
2023
- 2023-05-09 CN CN202310525245.5A patent/CN116484130A/zh active Pending
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN118051294A (zh) * | 2024-04-16 | 2024-05-17 | 湖南兴盛优选网络科技有限公司 | 一种基于Flutter的移动端混合页面的管理方法 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109446459B (zh) | 页面切换方法以及装置、电子设备及存储介质 | |
| EP2916243B1 (en) | Method, apparatus, server and system for implementing web application | |
| CN107451162B (zh) | 网络资源访问设备、混合设备及方法 | |
| CN109634588B (zh) | 一种兼容多浏览器的Office文档在线编辑方法和系统 | |
| US10908928B2 (en) | Rules-based workflow messaging | |
| US20120159310A1 (en) | Method for converting mobile web application into native application and apparatus using the same | |
| US20080215997A1 (en) | Webpage block tracking gadget | |
| CN102567516A (zh) | 脚本加载方法及装置 | |
| WO2015000383A1 (en) | Method, apparatus and system for information recommending | |
| CN110795649A (zh) | 目标页面展示方法、装置、系统及电子设备 | |
| CN114065080B (zh) | 页面渲染方法、装置、设备及计算机可读存储介质 | |
| CN101957756A (zh) | 一种智能移动终端程序快速生成系统及方法 | |
| CN113239672A (zh) | 目标文件编辑方法及装置、电子设备、存储介质 | |
| CN116484130A (zh) | 一种页面加载方法、装置、设备、介质及程序产品 | |
| CN101876998B (zh) | 一种实现数据编辑的方法和系统 | |
| CN112835568A (zh) | 一种项目构建方法和装置 | |
| CN112130908B (zh) | 设置用户引导的方法及装置 | |
| CN110618811B (zh) | 信息呈现方法和装置 | |
| US11550990B2 (en) | Machine first approach for identifying accessibility, non-compliances, remediation techniques and fixing at run-time | |
| CN114528510A (zh) | 网页数据处理的方法、装置、电子设备及介质 | |
| CN114254229A (zh) | 网页渲染方法及装置 | |
| CN113094138A (zh) | 界面显示方法、装置、电子设备及存储介质 | |
| CN115525305A (zh) | 数据处理、应用启动方法、装置、计算机设备和存储介质 | |
| CN106021501A (zh) | 一种数据存储方法及装置 | |
| CN106991167B (zh) | Web应用的迁移方法及装置 |
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 |