历史记录导航

使用者在前端页面点击网页中的链接时,Web组件默认会自动打开并加载目标网址。当前端页面替换为新的加载链接时,会自动记录已经访问的网页地址。可以通过forward()backward()接口向前/向后浏览上一个/下一个历史记录。

在下面的示例中,点击应用的按钮来触发前端页面的后退操作。

// xxx.ets
import web_webview from '@ohos.web.webview'; @Entry
@Component
struct WebComponent {
webviewController: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Button('loadData')
.onClick(() => {
if (this.webviewController.accessBackward()) {
this.webviewController.backward();
return true;
}
})
Web({ src: 'https://www.example.com/cn/', controller: this.webviewController})
}
}
}

  

如果存在历史记录,accessBackward()接口会返回true。同样,您可以使用accessForward()接口检查是否存在前进的历史记录。如果您不执行检查,那么当用户浏览到历史记录的末尾时,调用forward()backward()接口时将不执行任何操作。

页面跳转

当点击网页中的链接需要跳转到应用内其他页面时,可以通过使用Web组件的onUrlLoadIntercept()接口来实现。

在下面的示例中,应用首页Index.ets加载前端页面route.html,在前端route.html页面点击超链接,可跳转到应用的ProfilePage.ets页面。

● 应用首页index.ets页面代码。

// index.ets
import web_webview from '@ohos.web.webview';
import router from '@ohos.router';
@Entry
@Component
struct WebComponent {
webviewController: web_webview.WebviewController = new web_webview.WebviewController(); build() {
Column() {
Web({ src: $rawfile('route.html'), controller: this.webviewController })
.onUrlLoadIntercept((event) => {
let url: string = event.data as string;
if (url.indexOf('native://') === 0) {
// 跳转其他界面
router.pushUrl({ url:url.substring(9) })
return true;
}
return false;
})
}
}
}

  

● route.html前端页面代码。

<!-- route.html -->
<!DOCTYPE html>
<html>
<body>
<div>
<a href="native://pages/ProfilePage">个人中心</a>
</div>
</body>
</html>

  

● 跳转页面ProfilePage.ets代码。

@Entry
@Component
struct ProfilePage {
@State message: string = 'Hello World'; build() {
Column() {
Text(this.message)
.fontSize(20)
}
}
}

  

跨应用跳转

Web组件可以实现点击前端页面超链接跳转到其他应用。

在下面的示例中,点击call.html前端页面中的超连接,跳转到电话应用的拨号界面。

● 应用侧代码。

// xxx.ets
import web_webview from '@ohos.web.webview';
import call from '@ohos.telephony.call'; @Entry
@Component
struct WebComponent {
webviewController: web_webview.WebviewController = new web_webview.WebviewController(); build() {
Column() {
Web({ src: $rawfile('xxx.html'), controller: this.webviewController})
.onUrlLoadIntercept((event) => {
let url: string = event.data as string;
// 判断链接是否为拨号链接
if (url.indexOf('tel://') === 0) {
// 跳转拨号界面
call.makeCall(url.substring(6), (err) => {
if (!err) {
console.info('make call succeeded.');
} else {
console.info('make call fail, err is:' + JSON.stringify(err));
}
});
return true;
}
return false;
})
}

  

● 前端页面call.html代码。

<!-- call.html -->
<!DOCTYPE html>
<html>
<body>
<div>
<a href="tel://xxx xxxx xxx">拨打电话</a>
</div>
</body>
</html>

  

HarmonyOS 管理页面跳转及浏览记录导航的更多相关文章

  1. Android Jetpack - 使用 Navigation 管理页面跳转

    在今年的 IO 大会上,发布了一套叫 Android Jetpack 的程序库.Android Jetpack 里的组件大部分我们都接触过了,其中也有一些全新的组件,其中一个就是 Navigation ...

  2. 【Flutter学习】页面跳转之路由及导航

    一,概述 移动应用通常通过成为‘屏幕’或者‘页面’的全屏元素显示其内容,在Flutter中,这些元素统称为路由,它们由导航器Navigator组件管理.导航器管理一组路由Route对象,并提供了管理堆 ...

  3. Redis添加历史浏览记录

    参考资料 http://redisdoc.com/index.html http://redis-py.readthedocs.io/en/latest/#indices-and-tables 1.什 ...

  4. chrome 抓包的小功能--preserve log (记录页面跳转后,所有的抓包记录)

    1.记录页面跳转后,所有的抓包记录,勾上

  5. Django用户登陆以及跳转后台管理页面3

    Django用户登陆以及跳转后台管理页面1http://www.cnblogs.com/ujq3/p/7891774.html Django用户登陆以及跳转后台管理页面2http://www.cnbl ...

  6. Django用户登陆以及跳转后台管理页面2

    请先写好以下,再来替换文件 Django用户登陆以及跳转后台管理页面1http://www.cnblogs.com/ujq3/p/7891774.html from django.shortcuts ...

  7. Cookie实现商品浏览记录--方式二:JS实现

    使用Cookie实现商品浏览记录:方式二:JS方法实现cookie的获取以及写入.当某一个产品被点击时,触发JS方法.利用JS方法判断一下,此产品是否在浏览记录中.如果不存在,则将产品ID加入到coo ...

  8. 使用Cookie保存商品浏览记录

    数据流程:页面上是商品列表,点击<a href="productServlet">商品名</a> ==>跳转到自定义的servlet中进行处理,先得到 ...

  9. js记录用户在网站的浏览记录和停留时间

    by weber开发者 from http://weber.pub/ 本文地址: http://weber.pub/js记录用户行为浏览记录和停留时间/163.html 问题 公司想统计一个用户从进入 ...

  10. Jsp与servlet之间页面跳转及参数传递实例(转)

    原网址:http://blog.csdn.net/ssy_shandong/article/details/9328985 11. jsp与servlet之间页面跳转及参数传递实例 分类: Java ...

随机推荐

  1. 【Azure 应用服务】由Web App“无法连接数据库”而逐步分析到解析内网地址的办法(SQL和Redis开启private endpoint,只能通过内网访问,无法从公网访问的情况下)

    问题描述 在Azure上创建的数据库,单独通过SQL的连接工具是可以访问,但在Web App却无法访问,错误信息为: { "timestamp": "2021-05-20 ...

  2. 链接服务器导致SQL Server停止响应

    概要 如果多个实例中同时存在数据源为对方实例的链接服务器,并且开启了"分发服务器"的属性,您可能会遇到这种情况. 1 现象 14:31时,在SSMS中检查HIS实例是否有复制订阅时 ...

  3. 使用 Abp.Zero 搭建第三方登录模块(二):服务端开发

    ​ 微信SDK库的集成 微信SDK库是针对微信相关 API 进行封装的模块 ,目前开源社区中微信SDK库数量真是太多了,我选了一个比较好用的EasyAbp WeChat库. EasyAbp/Abp.W ...

  4. 探索Git内部原理

    Git是一个开源的分布式版本控制系统,是目前主流的版本控制系统,很多软件项目都会用它做源代码管理.Git的常用操作想必很多人都会,但是可能了解Git内部原理的人并不多.了解一些底层的东西,可以更好的帮 ...

  5. vscode 快速重新启动 reload Window

    vscode 快速重新启动 reload Window ctrl + shift + P 输入 reload

  6. SourceTree 合并DEV分支到master

    SourceTree 合并DEV分支到master 1 切换到master分支 2 右键dev分支,选择 合并dev至当前分支 3 提交代码

  7. nginx四层和七层负载的配置

    四层负载和七层负载是两种不同类型的负载均衡策略,它们分别在网络的不同层次上工作.在Nginx中,这两种负载均衡策略可以通过配置nginx.conf文件来实现. 四层负载(L4 Load Balanci ...

  8. STM32进入HardFault_Handler的调试方法

    在编写STM32程序代码时由于自己的粗心会发现有时候程序跑着跑着就进入了 HardFault_Handler中断,按照经验来说进入HardFault_Handler故障的原因主要有两个方面: 1:内存 ...

  9. 关于全景(360)图片拼接的方法(Opencv3.0 Stitcher)

    PS:要转载请注明出处,本人版权所有. PS: 这个只是基于<我自己>的理解, 如果和你的原则及想法相冲突,请谅解,勿喷. 前置说明   本文作为本人csdn blog的主站的备份.(Bl ...

  10. echo: nice day

    乐开花了,echo 姑娘,很合我的胃口,活泼.俏皮.专业.三观出乎的齐,第一次遇见这种默契度如此高的,你说半句我懂,我说半句你懂,太完美了,以前感觉和女生沟通太累,聊几句就 game over,我这是 ...