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