• 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            return true;
25          }
26        })
27      Web({ src: 'https://www.example.com/cn/', controller: this.webviewController})
28    }
29  }
30}
31```
32
33
34If 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.
35
36
37## Page Redirection
38
39The **Web** component provides the [onUrlLoadIntercept()](../reference/arkui-ts/ts-basic-components-web.md#onurlloadintercept) API to redirect you from one page to another.
40
41In 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.
42
43- Code of the **index.ets** page:
44
45  ```ts
46  // index.ets
47  import web_webview from '@ohos.web.webview';
48  import router from '@ohos.router';
49  @Entry
50  @Component
51  struct WebComponent {
52    webviewController: web_webview.WebviewController = new web_webview.WebviewController();
53
54    build() {
55      Column() {
56        Web({ src: $rawfile('route.html'), controller: this.webviewController })
57          .onUrlLoadIntercept((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            return false;
65          })
66      }
67    }
68  }
69  ```
70
71- Code of the **route.html** page:
72
73  ```html
74  <!-- route.html -->
75  <!DOCTYPE html>
76  <html>
77  <body>
78    <div>
79        <a href="native://pages/ProfilePage">My Profile</a>
80     </div>
81  </body>
82  </html>
83  ```
84
85- Code of the **ProfilePage.ets** page:
86
87  ```ts
88  @Entry
89  @Component
90  struct ProfilePage {
91    @State message: string = 'Hello World';
92
93    build() {
94      Column() {
95        Text(this.message)
96          .fontSize(20)
97      }
98    }
99  }
100  ```
101
102
103## Cross-Application Redirection
104
105The **Web** component supports redirection from one application to another.
106
107In 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.
108
109- Application code:
110
111  ```ts
112  // xxx.ets
113  import web_webview from '@ohos.web.webview';
114  import call from '@ohos.telephony.call';
115
116  @Entry
117  @Component
118  struct WebComponent {
119    webviewController: web_webview.WebviewController = new web_webview.WebviewController();
120
121    build() {
122      Column() {
123        Web({ src: $rawfile('xxx.html'), controller: this.webviewController})
124          .onUrlLoadIntercept((event) => {
125            let url: string = event.data as string;
126            // Check whether the link is redirecting to the dial screen of the phone app.
127            if (url.indexOf('tel://') === 0) {
128              // Redirect to the dial screen.
129              call.makeCall(url.substring(6), (err) => {
130                if (!err) {
131                  console.info('make call succeeded.');
132                } else {
133                  console.info('make call fail, err is:' + JSON.stringify(err));
134                }
135              });
136              return true;
137            }
138            return false;
139          })
140      }
141    }
142  }
143  ```
144
145- Code of the **call.html** page:
146
147  ```html
148  <!-- call.html -->
149  <!DOCTYPE html>
150  <html>
151  <body>
152    <div>
153      <a href="tel://xxx xxxx xxx">Dial number</a>
154    </div>
155  </body>
156  </html>
157  ```
158