• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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/js-apis-webview.md#forward) or [backward()](../reference/apis/js-apis-webview.md#backward) to browse the previous or next history record.
7
8  In the following example, when a user clicks the button, **backward()** is called to go back to the previous page.
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
33If a previous record exists, [accessBackward()](../reference/apis/js-apis-webview.md#accessbackward) will return **true**. Similarly, you can call [accessForward()](../reference/apis/js-apis-webview.md#accessforward) to check whether a next record exists. If you skip the check, [forward()](../reference/apis/js-apis-webview.md#forward) and [backward()](../reference/apis/js-apis-webview.md#backward) will not trigger any action if the user has navigated to the end of history records.
34
35
36## Page Redirection
37
38The **Web** component provides the [onUrlLoadIntercept()](../reference/arkui-ts/ts-basic-components-web.md#onurlloadinterceptdeprecated) API to redirect you from one page to another.
39
40In 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.
41
42- Code of the **index.ets** page:
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                // Redirect to another page.
61                router.pushUrl({ url:url.substring(9) })
62                return true;
63              }
64            }
65            return false;
66          })
67      }
68    }
69  }
70  ```
71
72- Code of the **route.html** page:
73
74  ```html
75  <!-- route.html -->
76  <!DOCTYPE html>
77  <html>
78  <body>
79    <div>
80        <a href="native://pages/ProfilePage">My Profile</a>
81     </div>
82  </body>
83  </html>
84  ```
85
86- Code of the **ProfilePage.ets** page:
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## Cross-Application Redirection
105
106The **Web** component supports redirection from one application to another.
107
108In 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.
109
110- Application code:
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              // Check whether the link is redirecting to the dial screen of the phone app.
129              if (url.indexOf('tel://') === 0) {
130                // Redirect to the dial screen.
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- Code of the **call.html** page:
149
150  ```html
151  <!-- call.html -->
152  <!DOCTYPE html>
153  <html>
154  <body>
155    <div>
156      <a href="tel://xxx xxxx xxx">Dial number</a>
157    </div>
158  </body>
159  </html>
160  ```
161