harmony 鸿蒙Managing Page Redirection and Browsing History Navigation

2023-06-24
浏览 (504)

Managing Page Redirection and Browsing History Navigation

History Navigation

When 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() or backward() to browse the previous or next history record.

In the following example, when a user clicks the button, backward() is called to go back to the previous page.

// xxx.ets
import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
  webviewController: web_webview.WebviewController = new web_webview.WebviewController();
  build() {
    Column() {
      Button('loadData')
        .onClick(() => {
          if (this.webviewController.accessBackward()) {
            this.webviewController.backward();
          }
        })
      Web({ src: 'https://www.example.com/cn/', controller: this.webviewController})
    }
  }
}

If a previous record exists, accessBackward() will return true. Similarly, you can call accessForward() to check whether a next record exists. If you skip the check, forward() and backward() will not trigger any action if the user has navigated to the end of history records.

Page Redirection

The Web component provides the onUrlLoadIntercept() API to redirect you from one page to another.

In 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.

Code of the index.ets page:

  // index.ets
  import web_webview from '@ohos.web.webview';
  import router from '@ohos.router';
  @Entry
  @Component
  struct WebComponent {
    webviewController: web_webview.WebviewController = new web_webview.WebviewController();
  
    build() {
      Column() {
        Web({ src: $rawfile('route.html'), controller: this.webviewController })
          .onUrlLoadIntercept((event) => {
            if (event) {
              let url: string = event.data as string;
              if (url.indexOf('native://') === 0) {
                // Redirect to another page.
                router.pushUrl({ url:url.substring(9) })
                return true;
              }
            }
            return false;
          })
      }
    }
  }

Code of the route.html page:

  <!-- route.html -->
  <!DOCTYPE html>
  <html>
  <body>
    <div>
        <a href="native://pages/ProfilePage">My Profile</a>
     </div>
  </body>
  </html>

Code of the ProfilePage.ets page:

  @Entry
  @Component
  struct ProfilePage {
    @State message: string = 'Hello World';
  
    build() {
      Column() {
        Text(this.message)
          .fontSize(20)
      }
    }
  }

Cross-Application Redirection

The Web component supports redirection from one application to another.

In 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.

Application code:

  // xxx.ets
  import web_webview from '@ohos.web.webview';
  import call from '@ohos.telephony.call';
  
  @Entry
  @Component
  struct WebComponent {
    webviewController: web_webview.WebviewController = new web_webview.WebviewController();
  
    build() {
      Column() {
        Web({ src: $rawfile('xxx.html'), controller: this.webviewController})
          .onUrlLoadIntercept((event) => {
            if (event) {
              let url: string = event.data as string;
              // Check whether the link is redirecting to the dial screen of the phone app.
              if (url.indexOf('tel://') === 0) {
                // Redirect to the dial screen.
                call.makeCall(url.substring(6), (err) => {
                  if (!err) {
                    console.info('make call succeeded.');
                  } else {
                    console.info('make call fail, err is:' + JSON.stringify(err));
                  }
                });
                return true;
              }
            }
            return false;
          })
      }
    }
  }

Code of the call.html page:

  <!-- call.html -->
  <!DOCTYPE html>
  <html>
  <body>
    <div>
      <a href="tel://xxx xxxx xxx">Dial number</a>
    </div>
  </body>
  </html>

你可能感兴趣的鸿蒙文章

harmony 鸿蒙Web

harmony 鸿蒙Establishing a Data Channel Between the Application and the Frontend Page

harmony 鸿蒙Web Component Overview

harmony 鸿蒙Managing Cookies and Data Storage

harmony 鸿蒙Debugging Frontend Pages by Using DevTools

harmony 鸿蒙Uploading Files

harmony 鸿蒙Managing Location Permissions

harmony 鸿蒙Invoking Frontend Page Functions on the Application

harmony 鸿蒙Invoking Application Functions on the Frontend Page

harmony 鸿蒙Opening Pages in a New Window

0 赞

所属分类： 后端技术
本文标签：
版权声明： 原创文章如转载，请注明本文链接: https://m.seaxiang.com/blog/6c09676f5e4b40b29c16ec7570d877a0

harmony 鸿蒙Managing Page Redirection and Browsing History Navigation

Managing Page Redirection and Browsing History Navigation

History Navigation

Page Redirection

Cross-Application Redirection

你可能感兴趣的鸿蒙文章

热门推荐

标签云

最新文章

本文目录