网硕互联帮助中心本文同步发表于 微信公众号，微信搜索 程语新视界 即可关注，每个工作日都有文章更新
一、浏览记录管理
1. 管理机制
当用户在Web组件中点击链接时，系统会自动记录访问过的网页地址，形成浏览历史栈。可以通过以下两个接口控制导航：
-
backward()：返回上一个历史记录页面
-
forward()：前进到下一个历史记录页面
这两个方法需要配合历史记录检查接口使用，以避免在无历史记录时调用无效操作。
2. 检查历史记录是否存在
在调用导航方法前，应先检查是否有可用的历史记录：
-
accessBackward()：检查是否存在可后退的历史记录
-
accessForward()：检查是否存在可前进的历史记录
3. 示例：实现后退功能
import { webview } from '@kit.ArkWeb';
@Entry
@Component
struct WebComponent {
webviewController: webview.WebviewController = new webview.WebviewController();
build() {
Column() {
Button('loadData')
.onClick(() => {
if (this.webviewController.accessBackward()) {
this.webviewController.backward();
}
})
Web({ src: 'https://www.example.com/cn/', controller: this.webviewController });
}
}
}
4. 网络权限配置
如果加载的页面涉及网络资源，必须在module.json5中声明网络权限：
"requestPermissions": [
{
"name": "ohos.permission.INTERNET"
}
]
二、应用内页面跳转
1. 使用onLoadIntercept()拦截跳转
onLoadIntercept事件允许开发者在页面加载前拦截请求，并根据自定义逻辑进行处理，常用于实现应用内路由。
2. 示例：从网页跳转到原生页面
应用首页（Index.ets）：
import { webview } from '@kit.ArkWeb';
import { router } from '@kit.ArkUI';
@Entry
@Component
struct WebComponent {
webviewController: webview.WebviewController = new webview.WebviewController();
build() {
Column() {
Web({ src: $rawfile('route.html'), controller: this.webviewController })
.onLoadIntercept((event) => {
if (event) {
let url: string = event.data.getRequestUrl();
if (url.indexOf('native://') === 0) {
// 跳转到指定页面
this.getUIContext().getRouter().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)
}
}
}
3. 实现原理
-
前端页面使用自定义协议（如native://）标识应用内跳转
-
Web组件通过onLoadIntercept拦截请求
-
解析URL并调用路由接口跳转到目标页面
三、跨应用跳转
1. 场景
Web组件还支持通过前端链接触发跨应用跳转，例如跳转到拨号界面、地图应用等。
2. 示例：跳转到电话应用
应用端（CrossApplicationRedirection.ets）：
import { webview } from '@kit.ArkWeb';
import { call } from '@kit.TelephonyKit';
@Entry
@Component
struct WebComponent {
webviewController: webview.WebviewController = new webview.WebviewController();
build() {
Column() {
Web({ src: $rawfile('call.html'), controller: this.webviewController })
.onLoadIntercept((event) => {
if (event) {
let url: string = event.data.getRequestUrl();
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://***********">拨打电话</a>
</div>
</body>
</html>
3. 其他
-
跳转到短信应用（sms://）
-
跳转到邮件应用（mailto://）
-
跳转到地图应用（geo://）
-
跳转到第三方应用（通过自定义URL Scheme）
评论前必须登录！
注册