1# Managing Page Redirection and Browsing History Navigation 2 3To speed up page access, browsing history navigation allows users to switch between history pages with the forward and back buttons. The **Web** component supports redirection to other pages within the application and across different applications. 4 5## History Navigation 6 7When 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/arkts-apis-webview-WebviewController.md#forward) and [backward()](../reference/apis-arkweb/arkts-apis-webview-WebviewController.md#backward) to browse the previous or next history record. 8 9If 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). 10 11 ``` 12 "requestPermissions":[ 13 { 14 "name" : "ohos.permission.INTERNET" 15 } 16 ] 17 ``` 18 19In the following example, when a user clicks the button, **backward()** is called to go back to the previous page. 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 45If a historical record exists, [accessBackward()](../reference/apis-arkweb/arkts-apis-webview-WebviewController.md#accessbackward) will return **true**. Similarly, you can call [accessForward()](../reference/apis-arkweb/arkts-apis-webview-WebviewController.md#accessforward) to check whether a next record exists. If you skip the check, [forward()](../reference/apis-arkweb/arkts-apis-webview-WebviewController.md#forward) and [backward()](../reference/apis-arkweb/arkts-apis-webview-WebviewController.md#backward) will not trigger any action if the user has navigated to the end of history records. 46 47 48## Page Redirection 49 50The **Web** component provides the [onLoadIntercept()](../reference/apis-arkweb/arkts-basic-components-web-events.md#onloadintercept10) API to redirect you from one page to another. 51 52In 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 **Me** link on the **route.html** page. 53 54- Code of the **Index.ets** page: 55 56 ```ts 57 // index.ets 58 import { webview } from '@kit.ArkWeb'; 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 this.getUIContext().getRouter().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://***********">Make a call</a> 170 </div> 171 </body> 172 </html> 173 ``` 174 175
