• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 管理页面跳转及浏览记录导航
2
3
4## 历史记录导航
5
6在前端页面点击网页中的链接时，Web组件默认会自动打开并加载目标网址。当前端页面替换为新的加载链接时，会自动记录已经访问的网页地址。可以通过[forward()](../reference/apis-arkweb/js-apis-webview.md#forward)和[backward()](../reference/apis-arkweb/js-apis-webview.md#backward)接口向前/向后浏览上一个/下一个历史记录。
7
8页面加载过程中，若涉及网络资源获取，需要在module.json5中配置网络访问权限，添加方法请参考[在配置文件中声明权限](../security/AccessToken/declare-permissions.md)。
9
10  ```
11  "requestPermissions":[
12      {
13        "name" : "ohos.permission.INTERNET"
14      }
15    ]
16  ```
17
18在下面的示例中，点击应用的按钮来触发前端页面的后退操作。
19
20```ts
21// xxx.ets
22import { webview } from '@kit.ArkWeb';
23
24@Entry
25@Component
26struct WebComponent {
27  webviewController: webview.WebviewController = new webview.WebviewController();
28
29  build() {
30    Column() {
31      Button('loadData')
32        .onClick(() => {
33          if (this.webviewController.accessBackward()) {
34            this.webviewController.backward();
35          }
36        })
37      Web({ src: 'https://www.example.com/cn/', controller: this.webviewController })
38    }
39  }
40}
41```
42
43
44如果存在历史记录，[accessBackward()](../reference/apis-arkweb/js-apis-webview.md#accessbackward)接口会返回true。同样，您可以使用[accessForward()](../reference/apis-arkweb/js-apis-webview.md#accessforward)接口检查是否存在前进的历史记录。如果您不执行检查，那么当用户浏览到历史记录的末尾时，调用[forward()](../reference/apis-arkweb/js-apis-webview.md#forward)和[backward()](../reference/apis-arkweb/js-apis-webview.md#backward)接口时将不执行任何操作。
45
46
47## 页面跳转
48
49当点击网页中的链接需要跳转到应用内其他页面时，可以通过使用Web组件的[onLoadIntercept()](../reference/apis-arkweb/ts-basic-components-web.md#onloadintercept10)接口来实现。
50
51在下面的示例中，应用首页Index.ets加载前端页面route.html，在前端route.html页面点击超链接，可跳转到应用的ProfilePage.ets页面。
52
53- 应用首页Index.ets页面代码。
54
55  ```ts
56  // index.ets
57  import { webview } from '@kit.ArkWeb';
58
59  @Entry
60  @Component
61  struct WebComponent {
62    webviewController: webview.WebviewController = new webview.WebviewController();
63
64    build() {
65      Column() {
66        // 资源文件route.html存放路径src/main/resources/rawfile
67        Web({ src: $rawfile('route.html'), controller: this.webviewController })
68          .onLoadIntercept((event) => {
69            if (event) {
70              let url: string = event.data.getRequestUrl();
71              if (url.indexOf('native://') === 0) {
72                // 跳转其他界面
73                this.getUIContext().getRouter().pushUrl({ url: url.substring(9) });
74                return true;
75              }
76            }
77            return false;
78          })
79      }
80    }
81  }
82  ```
83
84- route.html前端页面代码。
85
86  ```html
87  <!-- route.html -->
88  <!DOCTYPE html>
89  <html>
90  <body>
91    <div>
92        <a href="native://pages/ProfilePage">个人中心</a>
93     </div>
94  </body>
95  </html>
96  ```
97
98- 跳转页面ProfilePage.ets代码。
99
100  ```ts
101  @Entry
102  @Component
103  struct ProfilePage {
104    @State message: string = 'Hello World';
105
106    build() {
107      Column() {
108        Text(this.message)
109          .fontSize(20)
110      }
111    }
112  }
113  ```
114
115
116## 跨应用跳转
117
118Web组件可以实现点击前端页面超链接跳转到其他应用。
119
120在下面的示例中，点击call.html前端页面中的超链接，跳转到电话应用的拨号界面。
121
122- 应用侧代码。
123
124  ```ts
125  // xxx.ets
126  import { webview } from '@kit.ArkWeb';
127  import { call } from '@kit.TelephonyKit';
128
129  @Entry
130  @Component
131  struct WebComponent {
132    webviewController: webview.WebviewController = new webview.WebviewController();
133
134    build() {
135      Column() {
136        Web({ src: $rawfile('call.html'), controller: this.webviewController })
137          .onLoadIntercept((event) => {
138            if (event) {
139              let url: string = event.data.getRequestUrl();
140              // 判断链接是否为拨号链接
141              if (url.indexOf('tel://') === 0) {
142                // 跳转拨号界面
143                call.makeCall(url.substring(6), (err) => {
144                  if (!err) {
145                    console.info('make call succeeded.');
146                  } else {
147                    console.info('make call fail, err is:' + JSON.stringify(err));
148                  }
149                });
150                return true;
151              }
152            }
153            return false;
154          })
155      }
156    }
157  }
158  ```
159
160- 前端页面call.html代码。
161
162  ```html
163  <!-- call.html -->
164  <!DOCTYPE html>
165  <html>
166  <body>
167    <div>
168      <a href="tel://xxx xxxx xxx">拨打电话</a>
169    </div>
170  </body>
171  </html>
172  ```
173