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