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