HarmonyOS 管理页面跳转及浏览记录导航

 

历史记录导航

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

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

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 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页面代码。

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 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前端页面代码。

 

?
1
2
3
4
5
6
7
8
9
10
<!-- route.html -->
<!DOCTYPE html>
<html>
<body>
  <div>
      <a href="native://pages/ProfilePage">个人中心</a>
   </div>
</body>
</html>

　　

● 跳转页面ProfilePage.ets代码。

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
@Entry
@Component
struct ProfilePage {
  @State message: string = 'Hello World';
 
  build() {
    Column() {
      Text(this.message)
        .fontSize(20)
    }
  }
}

　　

跨应用跳转

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

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

● 应用侧代码。

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// 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代码。

 

?
1
2
3
4
5
6
7
8
9
<!-- call.html -->
<!DOCTYPE html>
<html>
<body>
  <div>
    <a href="tel://xxx xxxx xxx">拨打电话</a>
  </div>
</body>
</html>

　　

posted @   HarmonyOS开发者  阅读(194)  评论(0)  编辑  收藏  举报
相关博文：
· HarmonyOS应用侧与前端页面数据通道建立
· HarmonyOS应用开发Web组件基本属性应用和事件
· 鸿蒙HarmonyOS实战-Web组件（页面跳转和浏览记录）
· HarmonyOS如何实现前端跳转
· HarmonyOS-基础之页面跳转
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示