管理頁面跳轉(zhuǎn)及瀏覽記錄導(dǎo)航

2024-02-16 13:40 更新

歷史記錄導(dǎo)航

使用者在前端頁面點擊網(wǎng)頁中的鏈接時，Web組件默認(rèn)會自動打開并加載目標(biāo)網(wǎng)址。當(dāng)前端頁面替換為新的加載鏈接時，會自動記錄已經(jīng)訪問的網(wǎng)頁地址?？梢酝ㄟ^forward()和backward()接口向前/向后瀏覽上一個/下一個歷史記錄。

在下面的示例中，點擊應(yīng)用的按鈕來觸發(fā)前端頁面的后退操作。
  1. // xxx.ets
  2. import web_webview from '@ohos.web.webview';
  3. 

  4. @Entry
  5. @Component
  6. struct WebComponent {
  7.   webviewController: web_webview.WebviewController = new web_webview.WebviewController();
  8.   build() {
  9.     Column() {
  10.       Button('loadData')
  11.         .onClick(() => {
  12.           if (this.webviewController.accessBackward()) {
  13.             this.webviewController.backward();
  14.             return true;
  15.           }
  16.         })
  17.       Web({ src: 'https://www.example.com/cn/', controller: this.webviewController})
  18.     }
  19.   }
  20. }

如果存在歷史記錄，accessBackward()接口會返回true。同樣，您可以使用accessForward()接口檢查是否存在前進(jìn)的歷史記錄。如果您不執(zhí)行檢查，那么當(dāng)用戶瀏覽到歷史記錄的末尾時，調(diào)用forward()和backward()接口時將不執(zhí)行任何操作。

頁面跳轉(zhuǎn)

當(dāng)點擊網(wǎng)頁中的鏈接需要跳轉(zhuǎn)到應(yīng)用內(nèi)其他頁面時，可以通過使用Web組件的onUrlLoadIntercept()接口來實現(xiàn)。

在下面的示例中，應(yīng)用首頁Index.ets加載前端頁面route.html，在前端route.html頁面點擊超鏈接，可跳轉(zhuǎn)到應(yīng)用的ProfilePage.ets頁面。

  • 應(yīng)用首頁index.ets頁面代碼。
    1. // index.ets
    2. import web_webview from '@ohos.web.webview';
    3. import router from '@ohos.router';
    4. @Entry
    5. @Component
    6. struct WebComponent {
    7.   webviewController: web_webview.WebviewController = new web_webview.WebviewController();
    8. 

    9.   build() {
    10.     Column() {
    11.       Web({ src: $rawfile('route.html'), controller: this.webviewController })
    12.         .onUrlLoadIntercept((event) => {
    13.           let url: string = event.data as string;
    14.           if (url.indexOf('native://') === 0) {
    15.             // 跳轉(zhuǎn)其他界面
    16.             router.pushUrl({ url:url.substring(9) })
    17.             return true;
    18.           }
    19.           return false;
    20.         })
    21.     }
    22.   }
    23. }
  • route.html前端頁面代碼。
    1. <!-- route.html -->
    2. <!DOCTYPE html>
    3. <html>
    4. <body>
    5.   <div>
    6.       <a href="native://pages/ProfilePage">個人中心</a>
    7.    </div>
    8. </body>
    9. </html>
  • 跳轉(zhuǎn)頁面ProfilePage.ets代碼。
    1. @Entry
    2. @Component
    3. struct ProfilePage {
    4.   @State message: string = 'Hello World';
    5. 

    6.   build() {
    7.     Column() {
    8.       Text(this.message)
    9.         .fontSize(20)
    10.     }
    11.   }
    12. }

跨應(yīng)用跳轉(zhuǎn)

Web組件可以實現(xiàn)點擊前端頁面超鏈接跳轉(zhuǎn)到其他應(yīng)用。

在下面的示例中，點擊call.html前端頁面中的超連接，跳轉(zhuǎn)到電話應(yīng)用的撥號界面。

  • 應(yīng)用側(cè)代碼。
    1. // xxx.ets
    2. import web_webview from '@ohos.web.webview';
    3. import call from '@ohos.telephony.call';
    4. 

    5. @Entry
    6. @Component
    7. struct WebComponent {
    8.   webviewController: web_webview.WebviewController = new web_webview.WebviewController();
    9. 

    10.   build() {
    11.     Column() {
    12.       Web({ src: $rawfile('xxx.html'), controller: this.webviewController})
    13.         .onUrlLoadIntercept((event) => {
    14.           let url: string = event.data as string;
    15.           // 判斷鏈接是否為撥號鏈接
    16.           if (url.indexOf('tel://') === 0) {
    17.             // 跳轉(zhuǎn)撥號界面
    18.             call.makeCall(url.substring(6), (err) => {
    19.               if (!err) {
    20.                 console.info('make call succeeded.');
    21.               } else {
    22.                 console.info('make call fail, err is:' + JSON.stringify(err));
    23.               }
    24.             });
    25.             return true;
    26.           }
    27.           return false;
    28.         })
    29.     }
    30.   }
    31. }
  • 前端頁面call.html代碼。
    1. <!-- call.html -->
    2. <!DOCTYPE html>
    3. <html>
    4. <body>
    5.   <div>
    6.     <a href="tel://xxx xxxx xxx">撥打電話</a>
    7.   </div>
    8. </body>
    9. </html>
以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號