iOS 26 新功能： SwiftUI 的 WebView 與 WebPage

在 iOS 26 中，SwiftUI 終於推出了其中一個最受期待的元件：WebView，一個原生的解決方案用來顯示網頁內容。在這個更新之前，SwiftUI 開發者必須依賴 UIKit 框架，透過 UIViewRepresentable 包裝 WKWebView 或 SFSafariViewController 來嵌入網頁檢視。隨著 WebView 的推出，Apple 現在提供了一個完整的原生 SwiftUI 方式來整合網頁瀏覽功能進入應用程式中。在這篇教學中，我會快速介紹新的 WebView，並示範如何在你自己的應用中使用它。

WebView 的基本用法

要使用新的 WebView 載入網頁，你只需匯入 WebKit 框架，並以網址建立這個檢視。以下是範例程式碼：

import SwiftUI
import WebKit

struct ContentView: View {
    var body: some View {
        WebView(url: URL(string: "https://www.appcoda.com"))
    }
}

只要簡單一行程式碼，你就能在應用中嵌入一個完整的行動 Safari 瀏覽體驗——它是由與 Safari 相同的 WebKit 引擎驅動。

載入網頁內容的另一種方式

除了 WebView，WebKit 框架也引入了一個名為 WebPage 的新類別。你可以先使用網址建立一個 WebPage 實例，然後再透過它來顯示網頁內容。以下是達成相同結果的範例程式碼：

struct ContentView: View {
    @State private var page = WebPage()
    
    var body: some View {
        
        WebView(page)
            .ignoresSafeArea()
            .onAppear {
                if let pageURL = URL(string: "https://www.appcoda.com") {
                    let urlRequest = URLRequest(url: pageURL)
                    page.load(urlRequest)
                }
            }
    }
}

使用 WebPage

大多數情況下，如果你只是想顯示網頁內容或嵌入瀏覽器，使用 WebView 是最直接的方法。但如果你需要更細緻的控制，例如與應用程式互動、取得網頁屬性等，那麼 WebPage 提供了更多的自訂功能。

舉例來說，你可以透過 WebPage 物件的 title 屬性來取得目前網頁的標題：

Text(page.title)
Text(page.url)

你也可以使用 url 屬性來取得目前的網頁網址。

如果你想追蹤網頁載入進度，estimatedProgress 屬性會提供一個大約的百分比：

Text(page.estimatedProgress.formatted(.percent.precision(.fractionLength(0))))

除了讀取屬性之外，WebPage 類別也允許你控制網頁的載入行為。例如，你可以呼叫 reload() 來重新載入當前頁面，或使用 stopLoading() 來停止載入。

使用 WebPage 載入自訂 HTML 內容

除了載入 URLRequest 以外，WebPage 類別的 load 方法也可以直接載入自訂 HTML 內容。以下是載入 YouTube 播放器的範例程式碼：

struct ContentView: View {
    
    @State private var page = WebPage()
    
    private let htmlContent: String = """
        <div class="videoFrame">
        <iframe width="960" height="540" src="https://www.youtube.com/embed/0_DjDdfqtUE?si=iYAmkvDghnGaVcAC" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
        </div>
        """
    var body: some View {
        
        WebView(page)
            .onAppear {
                page.load(html: htmlContent, baseURL: URL(string: "about:blank")!)
            }
    }
}

你可以把這段程式碼貼進 Xcode 預覽，應該會看到 YouTube 播放器畫面。

執行 JavaScript

WebPage 物件不僅能載入 HTML 內容，還可以執行 JavaScript。你可以使用 callJavaScript 方法，傳入你想執行的程式碼。以下是一個範例：

struct ContentView: View {
    
    @State private var page = WebPage()
    
    private let snippet = """
        document.write("<h1>This text is generated by Javascript</h1>");
        """
    
    var body: some View {
        
        WebView(page)
            .task {
                do {
                    try await page.callJavaScript(snippet)
                } catch {
                    print("JavaScript 執行失敗：\(error)")
                }
            }
    }
}

總結

SwiftUI 新增的原生 WebView 元件大大簡化了在 iOS 應用中顯示網頁的方式，省去了依賴 UIKit 包裝器的麻煩。SwiftUI 開發者可以選擇以下兩種方式整合網頁內容：

• WebView：適用於單純載入與顯示網頁的場景。
• WebPage：提供更細部的控制，讓你可以讀取頁面屬性、追蹤載入進度、重新載入、停止載入，甚至執行 JavaScript。

這項原生解決方案讓 SwiftUI 嵌入網頁內容的體驗變得更加簡潔且一致。