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 you need to obtain online resources when loading a page, declare the network access permission in the **module.json5** file. For details, see [Declaring Permissions](../security/AccessToken/declare-permissions.md).
9
10  ```
11  "requestPermissions":[
12      {
13        "name" : "ohos.permission.INTERNET"
14      }
15    ]
16  ```
17
18In the following example, when a user clicks the button, **backward()** is called to go back to the previous page.
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
44If 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.
45
46
47## Page Redirection
48
49The **Web** component provides the [onLoadIntercept()](../reference/apis-arkweb/ts-basic-components-web.md#onloadintercept10) API to redirect you from one page to another.
50
51In 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.
52
53- Code of the **Index.ets** page:
54
55  ```ts
56  // index.ets
57  import { webview } from '@kit.ArkWeb';
58  import { router } from '@kit.ArkUI';
59
60  @Entry
61  @Component
62  struct WebComponent {
63    webviewController: webview.WebviewController = new webview.WebviewController();
64
65    build() {
66      Column() {
67        // Path for storing the route.html resource file: src/main/resources/rawfile
68        Web({ src: $rawfile('route.html'), controller: this.webviewController })
69          .onLoadIntercept((event) => {
70            if (event) {
71              let url: string = event.data.getRequestUrl();
72              if (url.indexOf('native://') === 0) {
73                // Redirect to another page.
74                router.pushUrl({ url: url.substring(9) });
75                return true;
76              }
77            }
78            return false;
79          })
80      }
81    }
82  }
83  ```
84
85- Code of the **route.html** page:
86
87  ```html
88  <!-- route.html -->
89  <!DOCTYPE html>
90  <html>
91  <body>
92    <div>
93        <a href="native://pages/ProfilePage">My Profile</a>
94     </div>
95  </body>
96  </html>
97  ```
98
99- Code of the **ProfilePage.ets** page:
100
101  ```ts
102  @Entry
103  @Component
104  struct ProfilePage {
105    @State message: string = 'Hello World';
106
107    build() {
108      Column() {
109        Text(this.message)
110          .fontSize(20)
111      }
112    }
113  }
114  ```
115
116
117## Cross-Application Redirection
118
119The **Web** component supports redirection from one application to another.
120
121In 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.
122
123- Application code:
124
125  ```ts
126  // xxx.ets
127  import { webview } from '@kit.ArkWeb';
128  import { call } from '@kit.TelephonyKit';
129
130  @Entry
131  @Component
132  struct WebComponent {
133    webviewController: webview.WebviewController = new webview.WebviewController();
134
135    build() {
136      Column() {
137        Web({ src: $rawfile('call.html'), controller: this.webviewController })
138          .onLoadIntercept((event) => {
139            if (event) {
140              let url: string = event.data.getRequestUrl();
141              // Check whether the link is redirecting to the dial screen of the phone app.
142              if (url.indexOf('tel://') === 0) {
143                // Redirect to the dial screen.
144                call.makeCall(url.substring(6), (err) => {
145                  if (!err) {
146                    console.info('make call succeeded.');
147                  } else {
148                    console.info('make call fail, err is:' + JSON.stringify(err));
149                  }
150                });
151                return true;
152              }
153            }
154            return false;
155          })
156      }
157    }
158  }
159  ```
160
161- Code of the **call.html** page:
162
163  ```html
164  <!-- call.html -->
165  <!DOCTYPE html>
166  <html>
167  <body>
168    <div>
169      <a href="tel://xxx xxxx xxx">Dial number</a>
170    </div>
171  </body>
172  </html>
173  ```
174