1# Managing Page Redirection and Browsing History Navigation
2
3
4## History Navigation
5
6When a user clicks a web page link on the frontend page, the **Web** component automatically opens and loads the target website by default. When the current page is assigned a new loading link, the address of the accessed web page is automatically recorded. You can call [forward()](../reference/apis-arkweb/js-apis-webview.md#forward) or [backward()](../reference/apis-arkweb/js-apis-webview.md#backward) to browse the previous or next history record.
7
8If acquisition of network resources is involved in page loading, you need to declare the [ohos.permission.INTERNET](../security/AccessToken/declare-permissions.md) permission.
9
10In the following example, when a user clicks the button, **backward()** is called to go back to the previous page.
11
12```ts
13// xxx.ets
14import { webview } from '@kit.ArkWeb';
15
16@Entry
17@Component
18struct WebComponent {
19  webviewController: webview.WebviewController = new webview.WebviewController();
20  
21  build() {
22    Column() {
23      Button('loadData')
24        .onClick(() => {
25          if (this.webviewController.accessBackward()) {
26            this.webviewController.backward();
27          }
28        })
29      Web({ src: 'https://www.example.com/cn/', controller: this.webviewController })
30    }
31  }
32}
33```
34
35
36If a previous record exists, [accessBackward()](../reference/apis-arkweb/js-apis-webview.md#accessbackward) will return **true**. Similarly, you can call [accessForward()](../reference/apis-arkweb/js-apis-webview.md#accessforward) to check whether a next record exists. If you skip the check, [forward()](../reference/apis-arkweb/js-apis-webview.md#forward) and [backward()](../reference/apis-arkweb/js-apis-webview.md#backward) will not trigger any action if the user has navigated to the end of history records.
37
38
39## Page Redirection
40
41The **Web** component provides the [onLoadIntercept()](../reference/apis-arkweb/ts-basic-components-web.md#onloadintercept10) API to redirect you from one page to another.
42
43In the following example, the frontend page **route.html** is loaded on to the application home page **Index.ets**, and the user is redirected to the application page **ProfilePage.ets** when clicking the link on the **route.html** page.
44
45- Code of the **Index.ets** page:
46  
47  ```ts
48  // index.ets
49  import { webview } from '@kit.ArkWeb';
50  import { router } from '@kit.ArkUI';
51
52  @Entry
53  @Component
54  struct WebComponent {
55    webviewController: webview.WebviewController = new webview.WebviewController();
56
57    build() {
58      Column() {
59        // Path for storing the route.html resource file: src/main/resources/rawfile
60        Web({ src: $rawfile('route.html'), controller: this.webviewController })
61          .onLoadIntercept((event) => {
62            if (event) {
63              let url: string = event.data.getRequestUrl();
64              if (url.indexOf('native://') === 0) {
65                // Redirect to another page.
66                router.pushUrl({ url: url.substring(9) });
67                return true;
68              }
69            }
70            return false;
71          })
72      }
73    }
74  }
75  ```
76
77- Code of the **route.html** page:
78  
79  ```html
80  <!-- route.html -->
81  <!DOCTYPE html>
82  <html>
83  <body>
84    <div>
85        <a href="native://pages/ProfilePage">My Profile</a>
86     </div>
87  </body>
88  </html>
89  ```
90
91- Code of the **ProfilePage.ets** page:
92  
93  ```ts
94  @Entry
95  @Component
96  struct ProfilePage {
97    @State message: string = 'Hello World';
98  
99    build() {
100      Column() {
101        Text(this.message)
102          .fontSize(20)
103      }
104    }
105  }
106  ```
107
108
109## Cross-Application Redirection
110
111The **Web** component supports redirection from one application to another.
112
113In the following example, when a user clicks the link on the frontend page **call.html**, the user will be redirected to the dial screen of the phone app.
114
115- Application code:
116  
117  ```ts
118  // xxx.ets
119  import { webview } from '@kit.ArkWeb';
120  import { call } from '@kit.TelephonyKit';
121
122  @Entry
123  @Component
124  struct WebComponent {
125    webviewController: webview.WebviewController = new webview.WebviewController();
126
127    build() {
128      Column() {
129        Web({ src: $rawfile('call.html'), controller: this.webviewController })
130          .onLoadIntercept((event) => {
131            if (event) {
132              let url: string = event.data.getRequestUrl();
133              // Check whether the link is redirecting to the dial screen of the phone app.
134              if (url.indexOf('tel://') === 0) {
135                // Redirect to the dial screen.
136                call.makeCall(url.substring(6), (err) => {
137                  if (!err) {
138                    console.info('make call succeeded.');
139                  } else {
140                    console.info('make call fail, err is:' + JSON.stringify(err));
141                  }
142                });
143                return true;
144              }
145            }
146            return false;
147          })
148      }
149    }
150  }
151  ```
152
153- Code of the **call.html** page:
154  
155  ```html
156  <!-- call.html -->
157  <!DOCTYPE html>
158  <html>
159  <body>
160    <div>
161      <a href="tel://xxx xxxx xxx">Dial number</a>
162    </div>
163  </body>
164  </html>
165  ```
166