ArkWeb頁面載入與瀏覽記錄導航 - 基礎操作

SameX發表於2024-10-18
Web

本文旨在深入探討華為鴻蒙HarmonyOS Next系統（截止目前API12）的技術細節，基於實際開發實踐進行總結。
主要作為技術分享與交流載體，難免錯漏，歡迎各位同仁提出寶貴意見和問題，以便共同進步。
本文為原創內容，任何形式的轉載必須註明出處及原作者。

簡介

在ArkWeb框架中，頁面載入和瀏覽記錄導航是開發者經常需要使用的功能。透過掌握這些功能，您可以輕鬆地載入Web頁面、管理瀏覽記錄，並提升使用者體驗。本文將介紹ArkWeb框架中頁面載入和瀏覽記錄導航的基礎操作。

頁面載入

載入網路頁面

您可以使用兩種方式載入網路頁面：

  • 使用src屬性： 在Web元件的src屬性中指定網路頁面的URL，例如：
Web({ src: "https://www.example.com" });
  • 使用loadUrl方法： 在Web元件建立後，使用loadUrl方法載入網路頁面，例如：
Web({ src: $rawfile("local.html") })
    .onControllerAttached(() => {
        this.controller.loadUrl("https://www.example.com");
    });

您可以使用loadUrl方法在Web元件建立後動態更改載入的頁面。

載入本地頁面

您可以使用兩種方式載入本地頁面：

  • 使用$rawfile： 在Web元件的src屬性中使用$rawfile函式載入本地頁面，例如：
Web({ src: $rawfile("local.html") });
  • 使用loadUrl方法： 在Web元件建立後，使用loadUrl方法載入本地頁面，例如：
Web({ src: $rawfile("local.html") })
    .onControllerAttached(() => {
        this.controller.loadUrl($rawfile("another_local.html"));
    });

您可以使用loadUrl方法在Web元件建立後動態更改載入的頁面。

載入HTML文字資料

您可以使用loadData方法載入HTML文字資料，例如：

Web({ src: $rawfile("local.html") })
    .onControllerAttached(() => {
        this.controller.loadData("<html><body>Hello, World!</body></html>", "text/html", "UTF-8");
    });

您需要指定資料型別、編碼格式和內容。

載入模式

ArkWeb框架支援兩種載入模式：

  • 同步渲染模式： 預設模式，Web渲染與系統元件一起進行。
  • 非同步渲染模式： Web元件作為獨立節點渲染，效能更高，但受限於最大尺寸。
    您可以使用renderMode屬性設定載入模式，例如：
Web({ src: "https://www.example.com", renderMode: RenderMode.ASYNC_RENDER });

載入進度監聽

您可以使用onProgressChange介面監聽頁面載入進度，例如：

Web({ src: "https://www.example.com" })
    .onProgressChange((event) => {
        console.log("Loading progress: " + event.newProgress);
    });

瀏覽記錄導航

前進和後退

您可以使用forward和backward方法進行頁面前進和後退操作，例如：

Web({ src: "https://www.example.com" })
    .onControllerAttached(() => {
        this.controller.forward(); // 前進
        this.controller.backward(); // 後退
    });

您可以使用accessForward和accessBackward方法檢查是否存在前進或後退的歷史記錄，例如：

Web({ src: "https://www.example.com" })
    .onControllerAttached(() => {
        if (this.controller.accessForward()) {
            this.controller.forward(); // 存在前進歷史記錄，可以前進
        }
        if (this.controller.accessBackward()) {
            this.controller.backward(); // 存在後退歷史記錄，可以後退
        }
    });

示例程式碼

以下示例程式碼展示瞭如何載入網路頁面、載入本地頁面和載入HTML文字資料，以及如何進行瀏覽記錄導航：

import { webview } from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
    controller: webview.WebviewController = new webview.WebviewController();
    build() {
        Column() {
            // 載入網路頁面
            Web({ src: "https://www.example.com" });
            // 載入本地頁面
            Web({ src: $rawfile("local.html") });
            // 載入HTML文字資料
            Web({ src: $rawfile("local.html") })
                .onControllerAttached(() => {
                    this.controller.loadData("<html><body>Hello, World!</body></html>", "text/html", "UTF-8");
                });
            // 瀏覽記錄導航
            Web({ src: "https://www.example.com" })
                .onControllerAttached(() => {
                    this.controller.forward(); // 前進
                    this.controller.backward(); // 後退
                });
        }
    }
}

總結

透過掌握ArkWeb框架中頁面載入和瀏覽記錄導航的基礎操作，您可以輕鬆地載入Web頁面、管理瀏覽記錄，並提升使用者體驗，希望能夠幫到您，嘿嘿。

相關文章